/* ===================================
   卧室电台 v4 — Scroll Frame + GSAP
   =================================== */
:root {
  --bg: #0c0a0d;
  --card: #110f12;
  --text: #c4bec8;
  --text-dim: #78707c;
  --text-bright: #e8e2ec;
  --accent: #8b7d8a;
  --accent-dim: #6b5d6a;
  --accent-glow: rgba(139,125,138,0.2);
  --line: #1c1920;
  --radius: 8px;
  --font-mono: "Courier New", "Noto Sans SC", monospace;
  --font-serif: Georgia, "Noto Serif SC", serif;
  --transition-theme: background 0.6s, color 0.6s, border-color 0.6s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; background: var(--bg); }
body { background: var(--bg); color: var(--text); font-family: var(--font-serif); line-height: 1.8; overflow-x: hidden; padding-bottom: 90px; }

/* ============================================
   Hero Carousel
   ============================================ */
.hero {
  position: relative;
  height: 55vh;
  min-height: 360px;
  max-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease;
  filter: brightness(0.55) saturate(0.85);
}

.hero-slide.active {
  opacity: 1;
  transition: opacity 1.5s ease;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(12,10,13,0.3) 0%, transparent 30%, transparent 70%, var(--bg) 100%),
    linear-gradient(90deg, rgba(12,10,13,0.6) 0%, transparent 50%, rgba(12,10,13,0.6) 100%);
}

.stage-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
}

.stage-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
}

.stage-line {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}

.stage-amp {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  margin: 4px 0;
}

.stage-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  color: rgba(255,255,255,0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ============================================
   Floating Pill Player
   ============================================ */
.player {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: calc(100vw - 32px);
  z-index: 100;
  background: rgba(22,20,25,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) inset;
}

.player-inner {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 20px 8px;
}

.player-btn {
  flex-shrink: 0; width: 36px; height: 36px;
  border: 2px solid var(--accent); border-radius: 50%;
  background: transparent; color: var(--accent);
  font-size: 11px; cursor: pointer;
  transition: all 0.25s; display: flex; align-items: center; justify-content: center;
}
.player-btn:hover { background: var(--accent); color: #fff; box-shadow: 0 0 16px var(--accent-glow); }
.player-btn.playing { background: var(--accent); color: #fff; }

.player-info { flex: 1; min-width: 0; line-height: 1.25; cursor: pointer; }

.player-track {
  font-family: var(--font-serif); font-size: 0.78rem;
  color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-artist {
  font-family: var(--font-mono); font-size: 0.63rem;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.player-progress {
  width: 70px; height: 3px; background: var(--line);
  border-radius: 2px; cursor: pointer; position: relative;
}
.player-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 0.15s linear; }
.player-progress-thumb {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; background: var(--accent); border-radius: 50%;
  border: 2px solid var(--bg); left: 0%; opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.player-progress:hover .player-progress-thumb { opacity: 1; }

.player-time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-dim); min-width: 32px; text-align: right; }

.mode-btn {
  flex-shrink: 0; width: 20px; height: 20px; border: none; background: transparent;
  color: var(--text-dim); font-size: 0.65rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: color 0.2s;
}
.mode-btn:hover { color: var(--accent); }
.mode-btn.loop-one, .mode-btn.shuffle { color: var(--accent); }

.player-volume { display: flex; align-items: center; gap: 3px; }
.vol-icon { font-size: 0.65rem; cursor: pointer; user-select: none; }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 2px; background: var(--line);
  border-radius: 1px; outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); cursor: pointer; }
.vol-slider::-webkit-slider-thumb:hover { background: var(--accent); }
.vol-slider::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); border: none; cursor: pointer; }

.player.idle .player-right { display: none; }

/* ============================================
   Main Content
   ============================================ */
.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Text-only posts */
.post:not(.layout-album) {
  max-width: 600px;
  align-self: center;
  width: 100%;
}

/* Album post */
.post.layout-album {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.post.layout-album.revealed { opacity: 1; transform: translateY(0); }
.post.layout-album:hover { transform: translateY(-2px) !important; }

.album-left { flex-direction: row; }
.album-right { flex-direction: row-reverse; }

.post.layout-album .album-wrapper {
  width: 240px;
  aspect-ratio: 1/1;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

/* ============================================
   Record Sleeve + Vinyl (kept from v3)
   ============================================ */
.record-sleeve {
  position: absolute; inset: 0; z-index: 3; cursor: pointer;
  border-radius: 8px;
  transition: transform 0.5s cubic-bezier(0.25,0.1,0.25,1), opacity 0.45s, filter 0.4s;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.record-sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.album-wrapper:hover .record-sleeve { filter: brightness(1.06); }

.is-playing .record-sleeve {
  transform: translateX(-50%) translateY(-30%) rotate(-8deg) scale(0.7);
  opacity: 0; cursor: default; pointer-events: none;
}

.record-vinyl {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transform: scale(0.75);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

.vinyl-disc {
  width: 95%; height: 95%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a1a22 0%, #1a1a22 17.5%, #1e1e28 17.8%, #15151d 18.1%, #1a1a22 18.4%, #16161e 18.6%, #1f1f28 18.8%, #13131b 19%, #1d1d26 19.2%, #15151d 19.4%, #1e1e28 19.6%, #14141c 19.8%, #1c1c24 20%, #16161e 20.2%, #1f1f28 20.4%, #13131b 20.6%, #1d1d26 20.8%, #15151d 21%, #1e1e28 21.3%, #14141c 21.6%, #1c1c24 21.9%, #16161e 22.2%, #20202a 22.5%, #13131b 22.8%, #1d1d26 23.1%, #15151d 23.4%, #1e1e28 23.7%, #14141c 24%, #1c1c24 24.3%, #16161e 24.6%, #1f1f28 25%, #13131b 25.4%, #1d1d26 25.8%, #15151d 26.2%, #1e1e28 26.6%, #14141c 27%, #1c1c24 27.4%, #16161e 27.8%, #20202a 28.2%, #13131b 28.6%, #1d1d26 29%, #15151d 29.4%, #1e1e28 30%, #14141c 30.6%, #1c1c24 31.2%, #16161e 31.8%, #1f1f28 32.4%, #13131b 33%, #1d1d26 33.6%, #15151d 34.2%, #1e1e28 35%, #181820 35.5%, #222230 36%, #15151d 37%, #1a1a24 38.5%, #1e1e28 40%, #1a1a24 41%, #242430 42%, #15151d 43%);
  box-shadow: 0 0 3px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.4), 0 0 35px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 0 1px rgba(0,0,0,0.5);
  position: relative;
}
.vinyl-disc::before { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse 160% 45% at 42% 32%, rgba(255,255,255,0.08) 0%, transparent 55%); pointer-events:none; }
.vinyl-disc::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 45deg, transparent 0deg, rgba(255,255,255,0.035) 20deg, transparent 50deg, transparent 50deg, rgba(255,255,255,0.015) 100deg, transparent 150deg, transparent 150deg, rgba(255,255,255,0.04) 190deg, transparent 230deg, transparent 230deg, rgba(255,255,255,0.01) 280deg, transparent 320deg, transparent 320deg, rgba(255,255,255,0.03) 350deg, transparent 360deg); pointer-events:none; }
.vinyl-label { position:absolute; inset:0; margin:auto; width:28%; height:28%; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); box-shadow:0 0 0 3px rgba(0,0,0,0.3),0 0 0 5px rgba(255,255,255,0.04),0 0 0 6px rgba(0,0,0,0.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vinyl-label img { width:100%; height:100%; object-fit:cover; display:block; }
.vinyl-hole { position:absolute; inset:0; margin:auto; width:5px; height:5px; border-radius:50%; background:#1a1a22; border:1px solid rgba(255,255,255,0.1); box-shadow:0 0 0 1px rgba(0,0,0,0.4); z-index:2; }

.record-tonearm {
  position: absolute; top: 5%; right: 6%; z-index: 4;
  transform-origin: 12px 12px; transform: rotate(38deg);
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.is-playing .record-tonearm { transform: rotate(12deg); transition: transform 0.55s cubic-bezier(0.25,0.1,0.25,1) 0.2s; }
.tonearm-base { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,rgba(255,255,255,0.15),rgba(0,0,0,0.4)); border:1px solid rgba(255,255,255,0.1); box-shadow:0 2px 8px rgba(0,0,0,0.5); position:relative; z-index:2; backdrop-filter:blur(4px); }
.tonearm-arm { position:absolute; top:10px; right:8px; width:45%; min-width:80px; height:3px; background:linear-gradient(180deg,rgba(255,255,255,0.2),rgba(0,0,0,0.3)); border-radius:2px; transform:rotate(-5deg); transform-origin:right center; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.tonearm-head { position:absolute; left:-4px; top:-6px; width:14px; height:12px; background:linear-gradient(135deg,rgba(255,255,255,0.25),rgba(0,0,0,0.35)); border-radius:2px; transform:rotate(45deg); box-shadow:0 1px 2px rgba(0,0,0,0.4); }
.tonearm-head::after { content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); width:1.5px; height:6px; background:rgba(255,255,255,0.5); border-radius:1px; box-shadow:0 0 2px rgba(0,0,0,0.3); }

.is-playing .record-vinyl { opacity:1; transform:scale(1); transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.1s, opacity 0.35s 0.1s; }
.is-playing .vinyl-disc { animation:vinylSpin 2.2s linear infinite; }
@keyframes vinylSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ============================================
   Album Info Panel
   ============================================ */
.album-info {
  flex: 1; min-width: 0;
  padding: 24px 28px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.015);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.album-left .album-info { text-align: left; }
.album-right .album-info { text-align: right; }

.album-genre {
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 3px 10px; border-radius: 10px; border: 1px solid;
  letter-spacing: 1px; text-transform: uppercase; display: inline-block; margin-bottom: 10px;
}
.album-genre.emo { color: var(--accent); border-color: var(--accent); background: rgba(139,125,138,0.06); }
.album-genre.punk { color: #8a9bb5; border-color: #8a9bb5; background: rgba(138,155,181,0.06); }

.album-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--text-bright); letter-spacing: -0.3px; margin-bottom: 8px; line-height: 1.3; }
.album-title .song { color: var(--accent); }
.album-title .sep { color: var(--line); margin: 0 4px; font-weight: 400; }

.album-text { font-size: 0.82rem; line-height: 1.75; color: var(--text-dim); }

/* ============================================
   Hanging Tag
   ============================================ */
.tag-trigger { position:fixed; top:18px; right:18px; z-index:150; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--text-dim); cursor:pointer; border-radius:50%; transition:color 0.3s,transform 0.3s; }
.tag-trigger:hover { color:var(--accent); transform:rotate(180deg); }
.tag-overlay { position:fixed; inset:0; z-index:160; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity 0.4s; }
.tag-overlay.active { opacity:1; pointer-events:auto; }
.hanging-tag { position:fixed; top:-380px; right:30px; z-index:170; display:flex; flex-direction:column; align-items:center; transition:top 0.7s cubic-bezier(0.22,0.61,0.36,1); }
.hanging-tag.active { top:8px; transition:top 0.6s cubic-bezier(0.22,0.61,0.36,1); }
.tag-string { width:1px; height:40px; background:linear-gradient(180deg,transparent,rgba(200,190,210,0.5),rgba(200,190,210,0.7)); margin-bottom:-1px; }
.tag-hole { width:10px; height:10px; border-radius:50%; background:var(--bg); border:1px solid rgba(255,255,255,0.1); margin:0 auto 10px; }
.tag-card { background:#1c1920; border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:20px 22px 18px; width:180px; box-shadow:0 8px 30px rgba(0,0,0,0.5); position:relative; }
.tag-card::before { content:''; position:absolute; inset:3px; border:1px dashed rgba(255,255,255,0.04); border-radius:3px; pointer-events:none; }
.tag-brand { font-family:var(--font-mono); font-size:0.7rem; color:var(--accent); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.tag-desc { font-family:var(--font-serif); font-size:0.6rem; color:var(--text-dim); font-style:italic; margin-bottom:14px; }
.tag-links { display:flex; flex-direction:column; gap:6px; }
.tag-links span { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-dim); letter-spacing:1px; cursor:pointer; transition:color 0.2s; }
.tag-links span:hover { color:var(--accent); }

/* ============================================
   Footer
   ============================================ */
.site-footer { text-align:center; padding:60px 24px 40px; }
.site-footer p { font-family:var(--font-mono); font-size:0.7rem; color:var(--text-dim); letter-spacing:2px; }
.footer-sub { margin-top:6px; font-size:0.6rem !important; opacity:0.5; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:768px) {
  .content { gap: 32px; padding: 40px 16px 32px; }
  .post.layout-album { flex-direction: column !important; gap: 16px; }
  .post.layout-album .album-wrapper { width: 180px; }
  .album-info { text-align: left !important; padding: 16px; }
  .player { border-radius: 20px; bottom: 12px; }
  .player-progress { width: 40px; }
  .vol-slider { width: 28px; }
  .record-vinyl { width: 100px; height: 100px; }
  .tonearm-arm { min-width: 50px; }
  .tonearm-base { width: 16px; height: 16px; }
}