/* REVOLVER — independent record shop / listening room
   Signature: an audio-reactive spinning vinyl + tonearm, driven by WebAudio.
   Palette: charcoal + bone + molten orange + amber secondary. */

:root{
  --bg:#141213;
  --bg-2:#1b1819;
  --panel:#1f1c1d;
  --ink:#f0ece3;
  --dim:#a49b8f;
  --faint:#6f665c;
  --accent:#ff5a1f;      /* molten orange */
  --accent-2:#e8b04b;    /* warm amber (subtle secondary) */
  --line:rgba(240,236,227,.12);
  --line-2:rgba(240,236,227,.06);
  --max:1320px;
  --spin:2.6s;           /* one platter revolution */
  --ease:cubic-bezier(.19,1,.22,1);
  --level:0;             /* live audio amplitude, set by JS */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:
    radial-gradient(120% 80% at 78% -6%, rgba(255,90,31,.12), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(232,176,75,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-weight:400;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
::selection{background:var(--accent);color:#141213}
img,svg,canvas{display:block;max-width:100%}

/* grain overlay */
.grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;
  align-items:center;padding:20px clamp(18px,4vw,44px);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(20,18,19,.72);backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.brand{font-weight:700;font-size:1.15rem;letter-spacing:.14em;display:flex;align-items:flex-start;gap:1px}
.brand span{color:var(--accent);font-size:.6rem;transform:translateY(1px)}
.nav-links{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;font-size:.76rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-family:"JetBrains Mono",monospace}
.nav-links a{color:var(--dim);transition:color .25s}
.nav-links a:hover{color:var(--ink)}
.nav-guide{color:var(--ink)!important;border:1px solid var(--line);border-radius:40px;padding:7px 15px;
  transition:background .3s,color .3s,border-color .3s}
.nav-guide:hover{background:var(--accent);color:#141213!important;border-color:var(--accent)}
@media(max-width:640px){.nav-links a:nth-child(1),.nav-links a:nth-child(2){display:none}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding:clamp(96px,13vh,150px) clamp(18px,4vw,44px) clamp(60px,9vh,90px);
  max-width:var(--max);margin:0 auto;position:relative}
.hero-copy{max-width:38rem}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:clamp(18px,3vh,26px)}
.hero-title{font-weight:700;line-height:.86;letter-spacing:-.03em;
  font-size:clamp(3.6rem,11vw,8.4rem);text-transform:none}
.hero-title .line{display:block;overflow:hidden}
.hero-sub{max-width:40ch;margin-top:clamp(20px,3.5vh,32px);font-size:clamp(1rem,1.35vw,1.18rem);
  color:var(--dim)}

/* now playing */
.now{margin-top:clamp(26px,4vh,40px);padding:18px 20px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.now-label{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:9px;margin-bottom:8px}
.now-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:background .3s}
.playing .now-dot{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.4s var(--ease) infinite}
@keyframes pulse{50%{opacity:.35}}
.now-title{font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.01em;line-height:1.05}
.now-meta{margin-top:5px;font-size:.9rem;color:var(--dim);display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.now-meta i{color:var(--faint)}
.now-meta .mono{color:var(--accent-2)}

/* controls */
.controls{margin-top:clamp(22px,3.5vh,30px);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:14px;padding:0 26px 0 0;height:64px;border-radius:40px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em;
  transition:border-color .3s,background .3s,transform .3s var(--ease)}
.play:hover{border-color:var(--accent);transform:translateY(-2px)}
.play:active{transform:translateY(0)}
.play-ico{position:relative;width:64px;height:64px;flex:none;border-radius:50%;
  background:var(--accent);display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(255,90,31,.35)}
.play-ico svg{position:absolute;width:26px;height:26px;fill:#141213;transition:opacity .25s,transform .25s var(--ease)}
.ico-pause{opacity:0;transform:scale(.6)}
.playing .ico-play{opacity:0;transform:scale(.6)}
.playing .ico-pause{opacity:1;transform:none}
.play-word{min-width:3.4em;text-align:left}
.readout{display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--dim);letter-spacing:.02em}
.readout b{color:var(--ink);font-weight:500}
.playing .readout #stState{color:var(--accent)}
.audio-note{margin-top:16px;font-size:.72rem;color:var(--accent-2)}

/* ---------- the deck / turntable ---------- */
.deck{display:flex;flex-direction:column;align-items:center;gap:16px;justify-self:center}
.turntable{width:min(50vw,460px);max-width:88vw}
.platter{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #2a2627, #171516 60%, #100e0f 100%);
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(240,236,227,.05),
    0 0 var(--glow,0) rgba(255,90,31,.0);
  display:grid;place-items:center}
.platter::after{content:"";position:absolute;inset:2%;border-radius:50%;
  box-shadow:0 0 calc(30px + var(--level)*70px) rgba(255,90,31,calc(.05 + var(--level)*.35));
  pointer-events:none;transition:box-shadow .12s linear}

.viz{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* the record */
.vinyl{position:absolute;width:78%;height:78%;border-radius:50%;z-index:2;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 0 1px, rgba(255,255,255,.028) 1px 2px, rgba(0,0,0,0) 2px 4px),
    radial-gradient(circle at 50% 50%, #201d1e 0 33%, #121011 33% 100%),
    radial-gradient(circle at 42% 36%, #26221f, #0a0909 78%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 10px 40px -12px rgba(0,0,0,.7);
  transform:rotate(0)}
.grooves{position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.5) 0 1.5px, rgba(255,255,255,.02) 1.5px 3px);
  opacity:.5;mix-blend-mode:overlay}
.sheen{position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,.14) 26deg, transparent 70deg,
    transparent 180deg, rgba(232,176,75,.1) 210deg, transparent 250deg)}
.playing #vinyl{animation:spin var(--spin) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* centre label */
.label{position:absolute;top:50%;left:50%;width:41%;height:41%;transform:translate(-50%,-50%);
  border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle at 40% 34%, #ff7a44, var(--accent) 46%, #d43f0c 100%);
  box-shadow:inset 0 0 0 2px rgba(20,18,19,.35), 0 2px 10px rgba(0,0,0,.4)}
.label-arc{position:absolute;inset:0;width:100%;height:100%}
.arc-t{fill:#20100a;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:1.4px;text-anchor:middle}
.label-center{position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#241009;text-align:center;transform-origin:50% 50%}
.playing .label-center{animation:spin var(--spin) linear infinite reverse}
.label-side{font-weight:700;font-size:.92rem;letter-spacing:.04em}
.label-rpm{font-family:"JetBrains Mono",monospace;font-size:.5rem;letter-spacing:.12em;opacity:.7}
.spindle{position:absolute;top:50%;left:50%;width:2.6%;height:2.6%;transform:translate(-50%,-50%);
  border-radius:50%;background:#0a0909;box-shadow:0 0 0 2px rgba(240,236,227,.12);z-index:4}

/* tonearm */
.tonearm{position:absolute;top:6%;right:5%;width:44%;height:44%;z-index:5}
.arm-base{position:absolute;top:0;right:0;width:20%;height:20%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#3a3536,#141213);
  box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(240,236,227,.08)}
.arm-pivot{position:absolute;top:9%;right:9%;width:4.5%;height:4.5%;border-radius:50%;
  background:var(--accent-2);z-index:2}
.arm-rest{position:absolute;top:2%;right:24%;width:5%;height:14%;border-radius:3px;
  background:linear-gradient(#2c2728,#171516);box-shadow:inset 0 0 0 1px rgba(240,236,227,.06)}
.arm{position:absolute;top:11%;right:11%;height:5%;width:78%;
  transform-origin:right center;transform:rotate(-32deg);
  background:linear-gradient(180deg,#4b4546,#2a2627);border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(240,236,227,.12);
  transition:transform 1.1s var(--ease)}
.arm-head{position:absolute;left:-4%;top:-42%;width:16%;height:190%;border-radius:3px;
  background:linear-gradient(#59110a,#320a06);transform:rotate(8deg);
  box-shadow:0 2px 6px rgba(0,0,0,.5)}
.playing .arm{transform:rotate(4deg)}
.deck-cap{font-size:.66rem;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);
  animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:left}
  .hero-copy{order:0}
  .deck{order:-1;margin-bottom:8px}
  .turntable{width:min(76vw,420px)}
  .scroll-cue{display:none}
}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;background:var(--accent)}
.marquee-track{display:inline-flex;gap:1.6rem;align-items:center;animation:march 28s linear infinite;
  font-weight:700;font-size:clamp(1.2rem,2.6vw,2rem);text-transform:uppercase;color:#141213;letter-spacing:.02em}
.marquee-track i{font-style:normal;font-size:.6em;opacity:.55}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section:not(.hero):not(.marquee){padding:clamp(72px,11vh,140px) clamp(18px,4vw,44px)}
.section-head{max-width:var(--max);margin:0 auto clamp(32px,5vh,56px)}
.index{font-family:"JetBrains Mono",monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem}
h2{font-weight:700;font-size:clamp(2.2rem,6vw,4.4rem);line-height:.98;letter-spacing:-.02em}
.crate-note{margin-top:1.2rem;max-width:46ch;color:var(--dim);font-size:1rem}

/* ---------- tracks ---------- */
.tracks{max-width:var(--max);margin:0 auto;list-style:none;border-top:1px solid var(--line)}
.track-fallback{padding:24px 4px;color:var(--dim);font-family:"JetBrains Mono",monospace;font-size:.85rem}
.js .track-fallback{display:none}
.track{position:relative;display:grid;
  grid-template-columns:54px minmax(0,1fr) 150px 120px 64px;align-items:center;gap:16px;
  padding:clamp(16px,2.6vw,26px) 10px;border-bottom:1px solid var(--line);width:100%;
  background:none;border-left:0;border-right:0;border-top:0;color:inherit;text-align:left;cursor:pointer;
  font-family:inherit;transition:padding-left .5s var(--ease),background .4s var(--ease)}
.track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .4s var(--ease)}
.track:hover{padding-left:26px;background:linear-gradient(90deg,rgba(255,90,31,.06),transparent 60%)}
.track:hover::before{transform:scaleY(.6)}
.track.is-cued{padding-left:26px;background:linear-gradient(90deg,rgba(255,90,31,.1),transparent 65%)}
.track.is-cued::before{transform:scaleY(1)}
.t-idx{font-family:"JetBrains Mono",monospace;font-size:.82rem;color:var(--faint);display:flex;align-items:center;gap:10px}
.t-eq{display:inline-flex;gap:2px;height:14px;align-items:flex-end;opacity:0;transition:opacity .3s}
.t-eq i{width:2px;height:5px;background:var(--accent);display:block}
.is-cued .t-eq{opacity:1}
.playing .is-cued .t-eq i{animation:eq .8s var(--ease) infinite}
.is-cued .t-eq i:nth-child(2){animation-delay:.18s}
.is-cued .t-eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.t-title{font-weight:700;font-size:clamp(1.15rem,2.2vw,1.7rem);letter-spacing:-.01em;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-cued .t-title{color:var(--accent)}
.t-artist{color:var(--dim);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-genre{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-time{font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--accent-2);text-align:right}
@media(max-width:760px){
  .track{grid-template-columns:34px minmax(0,1fr) 58px;gap:10px}
  .t-artist,.t-genre{display:none}
  .t-title{white-space:normal}
}

/* ---------- shop ---------- */
.shop{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.shop-inner{max-width:900px;margin:0 auto}
.shop-text{font-weight:500;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.32;letter-spacing:-.01em;
  margin:1.4rem 0 0}
.shop-text em{color:var(--accent);font-style:normal}
.shop-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:clamp(36px,6vh,60px) 0 0;
  border-top:1px solid var(--line);padding-top:clamp(28px,4vh,40px)}
.stat{display:flex;flex-direction:column;gap:8px}
.stat-n{font-size:clamp(1.8rem,4vw,3rem);font-weight:500;color:var(--ink);letter-spacing:-.02em}
.stat-l{font-size:.86rem;color:var(--dim)}
.shop-sign{margin-top:clamp(30px,4vh,44px);font-family:"JetBrains Mono",monospace;font-size:.85rem;
  color:var(--faint);letter-spacing:.04em}
@media(max-width:620px){.shop-stats{grid-template-columns:1fr;gap:22px}}

/* ---------- footer ---------- */
.footer{padding:clamp(56px,8vh,96px) clamp(18px,4vw,44px) 40px;border-top:1px solid var(--accent)}
.footer-top{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:24px;
  flex-wrap:wrap;align-items:flex-start}
.footer-brand{font-weight:700;font-size:clamp(2.6rem,10vw,6rem);letter-spacing:.02em;display:flex;align-items:flex-start;gap:2px}
.footer-brand span{color:var(--accent);font-size:.5rem}
.footer-info{font-size:.82rem;color:var(--dim);line-height:1.9;text-align:right}
.footer-info a{color:var(--ink)}
.footer-info a:hover{color:var(--accent)}
.footer-bottom{max-width:var(--max);margin:clamp(40px,6vh,64px) auto 0;padding-top:20px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:.76rem;color:var(--faint)}
.footer-bottom a{color:var(--ink)}
.footer-bottom a:hover{color:var(--accent)}
@media(max-width:560px){.footer-info{text-align:left}}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,.track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- reveals (JS-gated; reveal out-specifies the hide) ---------- */
.js .reveal{opacity:0;transform:translateY(34px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* hero intro — compositor-driven via .loaded */
.js .hero .hero-title .line,
.js .hero .eyebrow,
.js .hero .hero-sub,
.js .hero .now,
.js .hero .controls,
.js .hero .deck{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .hero .deck{transform:translateY(28px) scale(.96)}
.hero.loaded .hero-title .line,
.hero.loaded .eyebrow,
.hero.loaded .hero-sub,
.hero.loaded .now,
.hero.loaded .controls,
.hero.loaded .deck{opacity:1;transform:none}
.hero .eyebrow{transition-delay:.05s}
.hero .hero-title .line{transition-delay:.14s}
.hero .hero-sub{transition-delay:.26s}
.hero .now{transition-delay:.36s}
.hero .controls{transition-delay:.46s}
.hero .deck{transition-delay:.2s}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal,
  .js .hero .hero-title .line,.js .hero .eyebrow,.js .hero .hero-sub,
  .js .hero .now,.js .hero .controls,.js .hero .deck{opacity:1!important;transform:none!important}
  .playing #vinyl,.playing .label-center,.marquee-track,.now-dot,.scroll-cue span,
  .is-cued .t-eq i,.playing .now-dot{animation:none!important}
  .arm{transition:none!important}
  .platter::after{transition:none!important}
}