/* ------------------------------------------------------------------
   Track 01 — hero: headline, stats, spinning vinyl, tech marquee.
   ------------------------------------------------------------------ */

.hero{min-height:calc(100svh - var(--player-h)); display:flex; flex-direction:column; justify-content:center; padding-top:clamp(100px,12vh,132px); padding-bottom:24px}
.hero-main{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,5vw,60px); align-items:center}
@media(max-width:980px){.hero-main{grid-template-columns:1fr; gap:36px}}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  padding:7px 14px; border:1px solid var(--border); border-radius:999px;
  background:var(--accent-soft); margin-bottom:20px; transition:color .8s var(--ease), background .8s var(--ease);
}
.eyebrow::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent)}
.who{
  display:flex; align-items:center; gap:12px; font-family:var(--font-display);
  font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:16px;
}
.who .rule{width:clamp(28px,5vw,54px); height:1px; background:var(--accent); transition:background .8s var(--ease)}
.who b{color:var(--text); font-weight:700}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.9rem); font-weight:800; letter-spacing:-.04em; max-width:19ch}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--text) 8%,var(--accent) 48%,var(--text) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% auto; animation:shine 7s linear infinite;
}
@keyframes shine{to{background-position:220% center}}
.hero p.lead{font-size:clamp(1rem,1.35vw,1.13rem); color:var(--text-2); max-width:50ch; margin:22px 0 0}
.role{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:18px 0 0; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--text-3)}
.role .sep{width:5px; height:5px; border-radius:50%; background:var(--accent)}
.cta-row{display:flex; flex-wrap:wrap; gap:11px; margin-top:32px}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:.94rem;
  border:1px solid transparent; transition:all .35s var(--ease), background .8s var(--ease), box-shadow .8s var(--ease);
}
.btn svg{width:17px; height:17px}
.btn-primary{background:var(--accent); color:#17131A; box-shadow:0 10px 30px -10px var(--accent)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 40px -12px var(--accent)}
html[data-theme="light"] .btn-primary{color:#fff}
.btn-ghost{background:var(--surface); border-color:var(--border-2); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2); transform:translateY(-3px)}

/* liner-note stats */
.hero-stats{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,50px); margin-top:clamp(30px,4.5vh,46px); padding-top:24px; border-top:1px solid var(--border)}
.stat .n{font-family:var(--font-display); font-size:clamp(1.5rem,2.7vw,2rem); font-weight:700; letter-spacing:-.03em}
.stat .n em{font-style:normal; color:var(--accent); transition:color .8s var(--ease)}
.stat .l{font-size:.78rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; margin-top:2px}

/* vinyl */
.vinyl-wrap{position:relative; display:grid; place-items:center; min-height:min(52vh,440px)}
@media(max-width:980px){.vinyl-wrap{min-height:320px}}
.vinyl{
  position:relative; width:min(330px,74vw); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--vinyl) 0 17%, transparent 17.5%),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 3px, var(--groove) 3px 4px);
  background-color:var(--vinyl);
  box-shadow:var(--shadow), inset 0 0 40px rgba(0,0,0,.5);
  animation:spin 14s linear infinite;
}
body.playing .vinyl{animation-duration:3.2s}
@keyframes spin{to{transform:rotate(360deg)}}
.vinyl::before{ /* light sweep */
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 40deg, transparent 0 12%, rgba(255,255,255,.06) 16%, transparent 22%, transparent 55%, rgba(255,255,255,.05) 62%, transparent 70%);
}
.vlabel{
  position:absolute; inset:0; margin:auto; width:33%; aspect-ratio:1; border-radius:50%;
  background:var(--accent); display:grid; place-items:center; overflow:hidden;
  transition:background .8s var(--ease);
}
.vlabel img{width:58%; height:58%; object-fit:cover; border-radius:50%}
.vlabel::after{content:""; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--bg)}
.badge{
  position:absolute; display:flex; align-items:center; gap:8px; padding:9px 14px;
  border-radius:999px; border:1px solid var(--border-2); background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow);
  font-family:var(--font-display); font-size:.78rem; font-weight:600; white-space:nowrap; z-index:2;
}
.badge .d{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent)}
.badge.one{top:7%; left:0; animation:bob 6s ease-in-out infinite}
.badge.two{bottom:10%; right:0; animation:bob 8s ease-in-out .8s infinite}
@keyframes bob{50%{transform:translateY(-10px)}}

/* marquee */
.marquee{overflow:hidden; border-block:1px solid var(--border); padding:15px 0; margin-top:clamp(24px,3.5vh,38px); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtrack{display:flex; gap:52px; width:max-content; animation:scrollx 26s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.mtrack span{font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--text-3); white-space:nowrap; display:flex; align-items:center; gap:52px}
.mtrack span::after{content:"♪"; font-size:.8rem; color:var(--accent); transition:color .8s var(--ease)}