/* ECHOES / Cinematic production build */
:root {
  --ink: #e2e2e2;
  --ink-soft: #999;
  --ink-mute: #555;
  --bg: #0a0a0a;
  --bg-2: #131313;
  --bg-3: #1a1a1a;
  --surface: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.07);
  --green: #1db954;
  --green-bright: #1ed760;
  --green-fill: rgba(29,185,84,0.10);
  --green-glow: rgba(29,185,84,0.18);
  --cream: #f0ece4;
  --gold: #ffd700;
  --serif: "Fraunces", serif;
  --sans: "Inter", -apple-system, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --r: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;overflow-x:hidden;min-height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--green);color:#000}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;padding:16px 28px;gap:24px;background:linear-gradient(180deg,rgba(10,10,10,0.9),transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand-mark{transition:transform 0.5s var(--ease)}
.brand:hover .brand-mark{transform:rotate(360deg)}
.brand-word{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;color:var(--cream);letter-spacing:-0.02em}
.nav{display:flex;gap:20px}
.nav a{font-size:12px;font-weight:500;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.08em;transition:color 0.2s}
.nav a:hover{color:var(--green-bright)}
.nav-random{font-size:18px;color:var(--ink-soft);transition:color 0.2s,transform 0.3s var(--ease);padding:4px}
.nav-random:hover{color:var(--green-bright);transform:rotate(180deg)}

/* ========== HERO (cinematic stack) ========== */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 100px;gap:24px;position:relative;background:#050505;overflow:hidden;isolation:isolate}

/* Layered backdrop */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;perspective:1400px;perspective-origin:50% 60%}

/* Aurora: 4 drifting blob lights (hue + position animated) */
.hero-aurora{position:absolute;inset:-20%;filter:blur(80px) saturate(1.4);opacity:0.85;mix-blend-mode:screen}
.hero-aurora span{position:absolute;width:55vmax;height:55vmax;border-radius:50%;will-change:transform,opacity}
.hero-aurora span:nth-child(1){left:-10%;top:-10%;background:radial-gradient(circle,rgba(29,185,84,0.55),transparent 60%);animation:aurora1 22s ease-in-out infinite}
.hero-aurora span:nth-child(2){right:-15%;top:0;background:radial-gradient(circle,rgba(116,29,255,0.42),transparent 60%);animation:aurora2 28s ease-in-out infinite}
.hero-aurora span:nth-child(3){left:20%;bottom:-25%;background:radial-gradient(circle,rgba(255,72,140,0.32),transparent 60%);animation:aurora3 26s ease-in-out infinite}
.hero-aurora span:nth-child(4){right:10%;bottom:-10%;background:radial-gradient(circle,rgba(29,185,84,0.40),transparent 60%);animation:aurora4 30s ease-in-out infinite}
@keyframes aurora1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(15vw,8vh) scale(1.15)}66%{transform:translate(-6vw,18vh) scale(0.92)}}
@keyframes aurora2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20vw,12vh) scale(1.2)}}
@keyframes aurora3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(18vw,-10vh) scale(1.1)}80%{transform:translate(-10vw,5vh) scale(0.95)}}
@keyframes aurora4{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-15vw,-15vh) scale(1.18)}}

/* Synthwave perspective grid floor */
.hero-grid{position:absolute;left:50%;bottom:-12%;width:220vw;height:90vh;transform:translateX(-50%) perspective(900px) rotateX(72deg);transform-origin:50% 0;background-image:linear-gradient(to right,rgba(29,185,84,0.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(29,185,84,0.18) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);animation:gridScroll 8s linear infinite;opacity:0.55}
@keyframes gridScroll{from{background-position:0 0}to{background-position:0 60px}}

/* Particle dots floating up */
.hero-particles{position:absolute;inset:0;overflow:hidden}
.hp-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);opacity:0;animation:dotRise var(--dur,12s) linear infinite;animation-delay:var(--del,0s);left:var(--x,50%);bottom:-20px}
@keyframes dotRise{0%{transform:translateY(0) scale(0.6);opacity:0}10%{opacity:0.9}90%{opacity:0.5}100%{transform:translateY(-110vh) scale(1);opacity:0}}

/* Floating album covers in 3D space (the "flying shit") */
.hero-floaters{position:absolute;inset:0;transform-style:preserve-3d}
.hp-floater{position:absolute;width:var(--size,120px);height:var(--size,120px);left:calc(50% + var(--x,0vw));top:calc(50% + var(--y,0vh));margin-left:calc(var(--size,120px) * -0.5);margin-top:calc(var(--size,120px) * -0.5);border-radius:14px;overflow:hidden;background:#111;box-shadow:0 30px 60px rgba(0,0,0,0.6),0 0 40px rgba(29,185,84,0.15);transform:translateZ(var(--z,0)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg));animation:floatDrift var(--dur,18s) ease-in-out infinite;animation-delay:var(--del,0s);will-change:transform;opacity:0;transition:opacity 1.2s ease}
.hp-floater.in{opacity:var(--op,0.7)}
.hp-floater img{width:100%;height:100%;object-fit:cover;display:block}
.hp-floater::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(29,185,84,0.18));pointer-events:none}
@keyframes floatDrift{0%,100%{transform:translateZ(var(--z,0)) translate(0,0) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg))}50%{transform:translateZ(var(--z,0)) translate(18px,-22px) rotateY(calc(var(--ry,0deg) + 6deg)) rotateX(calc(var(--rx,0deg) - 4deg)) rotateZ(calc(var(--rz,0deg) + 2deg))}}

/* Hero vinyl (kept, more dramatic) */
.hero-vinyl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(380px,55vw,640px);aspect-ratio:1;pointer-events:auto;opacity:0.18;z-index:0}
.hv-disc{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1a1a1a 0%,#050505 55%,#000 100%);animation:spinFlat 18s linear infinite;border:1px solid rgba(255,255,255,0.06);position:relative}
.hv-disc::before{content:"";position:absolute;inset:6%;border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,0.025) 0,rgba(255,255,255,0.025) 1px,transparent 1px,transparent 5px)}
.hv-shine{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(29,185,84,0.10) 30deg,transparent 60deg,transparent 180deg,rgba(29,185,84,0.07) 220deg,transparent 260deg)}
.hv-label{position:absolute;top:50%;left:50%;width:28%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--green),var(--green-fill));box-shadow:0 0 40px rgba(29,185,84,0.5)}
@keyframes spinFlat{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Vignette + noise for filmic finish */
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(5,5,5,0.6) 80%,#050505 100%);pointer-events:none}
.hero-noise{position:absolute;inset:0;opacity:0.045;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.65'/></svg>")}

/* Hero content layer */
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;width:100%;max-width:760px}

/* Corner live pill (demoted from headline to ambient indicator) */
.hero-corner-pill{position:absolute;top:90px;right:28px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:9999px;border:1px solid rgba(29,185,84,0.25);background:rgba(0,0,0,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--sans);font-size:10px;font-weight:600;color:var(--green-bright);letter-spacing:0.18em;text-transform:uppercase;animation:fadeUp 0.7s var(--ease) 0.2s both}
.he-pulse{width:6px;height:6px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 0 var(--green-bright);animation:livePulse 1.6s ease-out infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(29,185,84,0.7)}100%{box-shadow:0 0 0 12px rgba(29,185,84,0)}}

/* ===== HERO ARTWORK (the hero piece — massive cross-fading album cover) ===== */
.hero-artwork{position:relative;width:clamp(280px,36vw,460px);aspect-ratio:1;animation:artworkEnter 1.1s cubic-bezier(0.2,0.8,0.2,1) 0.2s both;will-change:transform,opacity}
@keyframes artworkEnter{from{opacity:0;transform:translateY(40px) scale(0.85);filter:blur(20px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}

.ha-glow{position:absolute;inset:-10%;border-radius:50%;filter:blur(60px) saturate(1.3);opacity:0.85;transition:background 0.6s ease;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(29,185,84,0.5),transparent 65%)}
.ha-frame{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,0.7),0 0 60px rgba(29,185,84,0.18),inset 0 1px 0 rgba(255,255,255,0.08);transform:translateZ(0)}
.ha-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 0.55s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.2,0.8,0.2,1),filter 0.7s ease;will-change:opacity,transform,filter;transform:scale(1.04);filter:blur(0)}
.ha-layer.on{opacity:1;transform:scale(1)}
.ha-layer.exit{opacity:0;transform:scale(0.98);filter:blur(8px)}
.ha-shine{position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 35%,transparent 70%,rgba(0,0,0,0.25));pointer-events:none}
.ha-vinyl-peek{position:absolute;right:-18%;top:50%;transform:translateY(-50%);width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,#000 28%,#1a1a1a 30%,#000 32%,#0a0a0a 60%,#000);box-shadow:-20px 0 40px rgba(0,0,0,0.6),inset 0 0 30px rgba(0,0,0,0.8);z-index:-1;animation:spinFlat 14s linear infinite}
.ha-vinyl-peek::before{content:"";position:absolute;inset:42%;border-radius:50%;background:radial-gradient(circle,var(--green),var(--green-fill));box-shadow:0 0 20px rgba(29,185,84,0.5)}

/* ===== HERO TRACK INFO (Spotify-style bold sans) ===== */
.hero-track{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:fadeUp 0.9s var(--ease) 1s both}
.ht-year-row{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--green-bright);letter-spacing:0.18em;text-transform:uppercase}
.ht-year{padding:4px 10px;border-radius:6px;background:rgba(29,185,84,0.12);border:1px solid rgba(29,185,84,0.25)}
.ht-streams{color:var(--ink-mute);letter-spacing:0.14em}
.ht-title{font-family:var(--sans);font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:1.0;letter-spacing:-0.035em;color:#fff;max-width:14ch;transition:opacity 0.22s ease,transform 0.22s ease;will-change:opacity,transform}
.ht-title.flip{opacity:0;transform:translateY(8px)}
.ht-artist{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.7vw,22px);color:var(--ink-soft);letter-spacing:-0.01em;transition:opacity 0.22s ease 0.04s,transform 0.22s ease 0.04s;will-change:opacity,transform}
.ht-artist.flip{opacity:0;transform:translateY(8px)}

/* ========== TIMELINE SCRUBBER (bigger, bolder) ========== */
.scrubber{width:min(760px,94vw);margin-top:6px;padding:28px 32px 26px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.09);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);box-shadow:0 40px 100px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.07);animation:fadeUp 0.95s var(--ease) 1.4s both;display:flex;flex-direction:column;gap:22px}

.scrub-track{position:relative;height:64px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;padding:0 2px}
.scrub-track:active{cursor:grabbing}
.st-line{position:absolute;left:0;right:0;top:50%;height:3px;background:linear-gradient(90deg,rgba(255,255,255,0.08),rgba(255,255,255,0.20) 50%,rgba(255,255,255,0.08));transform:translateY(-50%);border-radius:3px}
.st-fill{position:absolute;left:0;top:50%;height:4px;width:0;background:linear-gradient(90deg,#1db954,#1ed760);transform:translateY(-50%);border-radius:4px;box-shadow:0 0 16px rgba(29,185,84,0.7);transition:width 0.05s linear}
.st-ticks{position:absolute;inset:0;pointer-events:none}
.st-ticks span{position:absolute;top:50%;width:1px;height:8px;background:rgba(255,255,255,0.18);transform:translate(-50%,-50%)}
.st-ticks span.major{height:18px;background:rgba(255,255,255,0.36)}
.st-decade-labels{position:absolute;left:0;right:0;bottom:-4px;pointer-events:none}
.st-decade-labels span{position:absolute;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink-mute);letter-spacing:0.10em;transform:translateX(-50%);white-space:nowrap}

.st-handle{position:absolute;top:50%;left:0;width:36px;height:36px;transform:translate(-50%,-50%);will-change:transform;z-index:3;transition:transform 0.06s linear}
.scrub-track.dragging .st-handle{transition:none}
.sth-disc{position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#1ed760 55%,#0e8a3e);box-shadow:0 8px 22px rgba(29,185,84,0.55),inset 0 1px 0 rgba(255,255,255,0.4)}
.sth-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(29,185,84,0.45);background:rgba(29,185,84,0.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sth-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(29,185,84,0.55),transparent 60%);filter:blur(10px);pointer-events:none}
.sth-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--green-bright);animation:handlePulse 2s ease-out infinite;pointer-events:none}
.scrub-track.dragging .sth-pulse{animation:none;opacity:0}
@keyframes handlePulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(2.6);opacity:0}}

.scrub-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.sf-hint{font-size:12px;color:var(--ink-mute);font-family:var(--sans);font-weight:500;letter-spacing:0.02em}
.sf-input{font-family:var(--mono);font-size:15px;font-weight:600;color:#fff;background:rgba(255,255,255,0.06);border:1px solid var(--border);padding:10px 16px;width:130px;outline:none;text-align:center;border-radius:9999px;transition:all 0.2s}
.sf-input:focus{border-color:var(--green);background:rgba(29,185,84,0.10);box-shadow:0 0 0 3px var(--green-glow)}
.sf-input::placeholder{color:var(--ink-mute);font-weight:500}
.sf-go{background:linear-gradient(135deg,#1db954,#1ed760);color:#000;font-family:var(--sans);font-weight:800;font-size:14px;padding:12px 26px;border-radius:9999px;letter-spacing:0.02em;text-transform:lowercase;transition:transform 0.15s,box-shadow 0.2s;box-shadow:0 10px 26px rgba(29,185,84,0.35)}
.sf-go:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(29,185,84,0.5)}
.sf-go:active{transform:translateY(0) scale(0.96)}

/* Scroll cue */
.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:0.18em;animation:fadeUp 0.8s var(--ease) 2.5s both}
.hs-arrow{font-style:normal;font-size:14px;color:var(--green-bright);animation:bobDown 1.8s ease-in-out infinite}
@keyframes bobDown{0%,100%{transform:translateY(0);opacity:0.6}50%{transform:translateY(6px);opacity:1}}

/* Generic fadeUp */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ========== REVEAL (cinematic overlay) ========== */
.reveal{position:fixed;inset:0;z-index:600;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity 0.5s ease}
.reveal.active{opacity:1;pointer-events:auto}
.reveal-close{position:absolute;top:20px;right:24px;font-size:20px;color:var(--ink-soft);width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.reveal-close:hover{border-color:var(--green);color:var(--green-bright)}
.reveal-card{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:400px;width:100%;text-align:center}
.reveal-cover{width:280px;height:280px;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.6);position:relative;transform:scale(0);transition:transform 0.8s var(--ease);background:var(--bg-3)}
.reveal.active .reveal-cover{transform:scale(1)}
.reveal-cover img{width:100%;height:100%;object-fit:cover}
.reveal-cover-gradient{position:absolute;inset:0;border-radius:12px}
.reveal-info{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease 0.4s,transform 0.6s var(--ease) 0.4s}
.reveal.active .reveal-info{opacity:1;transform:translateY(0)}
.reveal-year{font-family:var(--mono);font-size:11px;color:var(--green-bright);text-transform:uppercase;letter-spacing:0.16em;margin-bottom:8px}
.reveal-song{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,6vw,44px);color:var(--cream);line-height:1.05;letter-spacing:-0.03em}
.reveal-artist{font-size:16px;color:var(--ink-soft);margin-top:6px;font-weight:400}
.reveal-streams{font-family:var(--mono);font-size:13px;color:var(--green-bright);margin-top:12px;letter-spacing:0.04em}
.reveal-streams .counting{display:inline}
.reveal-genre{font-size:11px;font-weight:500;color:var(--green-bright);background:var(--green-fill);padding:4px 12px;border-radius:9999px;margin-top:10px;display:inline-block}
.reveal-note{font-family:var(--serif);font-weight:300;font-size:15px;color:var(--ink-soft);margin-top:16px;line-height:1.55;max-width:36ch}
.reveal-actions{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease 0.8s,transform 0.5s var(--ease) 0.8s;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.reveal.active .reveal-actions{opacity:1;transform:translateY(0)}
.reveal-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:9999px;font-size:13px;font-weight:600;transition:transform 0.2s,background 0.2s}
.reveal-btn:active{transform:scale(0.95)}
.reveal-btn.primary{background:var(--green);color:#000}
.reveal-btn.primary:hover{background:var(--green-bright)}
.reveal-btn.secondary{border:1px solid var(--border);color:var(--ink-soft)}
.reveal-btn.secondary:hover{border-color:var(--green);color:var(--green-bright)}
.reveal-tag{font-size:12px;color:var(--ink-mute);margin-top:8px}

/* ========== DECADES ========== */
.decades{padding:120px 28px;background:radial-gradient(ellipse at 50% 0%,rgba(29,185,84,0.07),transparent 55%);position:relative}
.decades::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:80px 100%;pointer-events:none;mask-image:linear-gradient(to bottom,#000 20%,transparent 90%);-webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 90%)}
.section-label{font-family:var(--serif);font-style:italic;font-weight:200;font-size:clamp(36px,5vw,64px);color:var(--cream);letter-spacing:-0.03em;margin-bottom:48px;max-width:1300px;margin-left:auto;margin-right:auto;text-align:center}

.rail{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;max-width:1300px;margin:0 auto;perspective:1400px;perspective-origin:50% 60%;transform-style:preserve-3d;transition:opacity 0.45s ease}
.rail.fade-out{opacity:0;pointer-events:none}

.dcard{position:relative;aspect-ratio:0.62;background:var(--dcard-bg,var(--bg-3));border:1px solid var(--border);border-radius:var(--r);padding:18px 16px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;text-align:left;transform-style:preserve-3d;transform:translateZ(0) rotateY(var(--ry,0deg)) rotateX(2deg);transition:transform 0.5s var(--ease),border-color 0.3s,box-shadow 0.35s;overflow:hidden;will-change:transform,opacity;animation:dcardEnter 0.9s var(--ease) both;animation-delay:var(--enter,0s)}
.dcard:nth-child(1){--ry:-12deg;--enter:0s}
.dcard:nth-child(2){--ry:-8deg;--enter:0.08s}
.dcard:nth-child(3){--ry:-4deg;--enter:0.16s}
.dcard:nth-child(4){--ry:0deg;--enter:0.24s}
.dcard:nth-child(5){--ry:4deg;--enter:0.32s}
.dcard:nth-child(6){--ry:8deg;--enter:0.40s}
.dcard:nth-child(7){--ry:12deg;--enter:0.48s}
@keyframes dcardEnter{from{opacity:0;transform:translateY(60px) rotateY(var(--ry,0deg)) rotateX(2deg) scale(0.85);filter:blur(10px)}to{opacity:1;transform:translateY(0) rotateY(var(--ry,0deg)) rotateX(2deg) scale(1);filter:blur(0)}}

.dcard[data-decade="60s"]{--dcard-bg:linear-gradient(170deg,#1a1008,#2a1c0c 60%,#100a04);--accent:#c4622a}
.dcard[data-decade="70s"]{--dcard-bg:linear-gradient(170deg,#1a0c18,#2c1430 60%,#0e060c);--accent:#a02a3a}
.dcard[data-decade="80s"]{--dcard-bg:linear-gradient(170deg,#0c0a1a,#1e1440 60%,#08060e);--accent:#5a1c8a}
.dcard[data-decade="90s"]{--dcard-bg:linear-gradient(170deg,#081410,#0e2c1e 60%,#040c08);--accent:#1db954}
.dcard[data-decade="00s"]{--dcard-bg:linear-gradient(170deg,#080c1a,#102040 60%,#04060c);--accent:#2c5494}
.dcard[data-decade="10s"]{--dcard-bg:linear-gradient(170deg,#1a0808,#301810 60%,#0c0404)}
.dcard[data-decade="20s"]{--dcard-bg:linear-gradient(170deg,#041a0c,#083820 60%,#020c06)}

.dcard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,var(--accent,rgba(29,185,84,0.4)),transparent 60%);opacity:0.4;transition:opacity 0.3s;pointer-events:none}
.dcard::after{content:"";position:absolute;left:-40%;top:-40%;width:80%;height:30%;background:linear-gradient(115deg,transparent,rgba(255,255,255,0.08) 45%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.08) 55%,transparent);transform:rotate(25deg);transition:left 0.6s ease;pointer-events:none}
.dcard:hover{transform:translateY(-8px) translateZ(40px) rotateY(var(--ry,0deg)) rotateX(0deg) scale(1.05);border-color:rgba(29,185,84,0.5);box-shadow:0 24px 60px -10px rgba(0,0,0,0.7),0 0 40px var(--green-glow)}
.dcard:hover::before{opacity:0.7}
.dcard:hover::after{left:120%}
.dcard:active{transform:translateY(-4px) scale(0.98)}

/* Cascade burst when one is clicked: others scatter, clicked one zooms */
.rail.bursting .dcard{transition:transform 0.42s cubic-bezier(0.4,0,0.2,1),opacity 0.32s ease,filter 0.32s ease;pointer-events:none}
.rail.bursting .dcard:not(.picked){animation:none;transform:translateY(var(--burst-y,60px)) translateX(var(--burst-x,0)) rotateZ(var(--burst-rot,0deg)) scale(0.78);opacity:0;filter:blur(6px)}
.rail.bursting .dcard.picked{animation:none;transform:translateZ(60px) scale(1.12);z-index:5;filter:drop-shadow(0 22px 50px rgba(29,185,84,0.5))}

.dcard-content{position:relative;z-index:1}
.dcard-label{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,2.4vw,42px);color:var(--cream);letter-spacing:-0.02em;text-shadow:0 4px 20px rgba(0,0,0,0.6)}
.dcard-range{font-family:var(--mono);font-size:10px;color:var(--green-bright);letter-spacing:0.14em;margin-top:6px;text-transform:uppercase}
.dcard-num{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,0.35);letter-spacing:0.16em}

/* SPLAY — slides up cinematically when a decade is picked */
.splay-wrap{max-width:1300px;margin:0 auto;padding:28px;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,rgba(29,185,84,0.08),transparent 50%),linear-gradient(180deg,var(--bg-2),var(--bg-3));border:1px solid var(--border);box-shadow:0 40px 100px rgba(0,0,0,0.55);display:flex;flex-direction:column;gap:22px;transform:translateY(28px) scale(0.97);opacity:0;transition:transform 0.5s cubic-bezier(0.2,0.8,0.2,1),opacity 0.35s ease}
.splay-wrap.in{transform:translateY(0) scale(1);opacity:1}
.splay-head{font-size:12px;font-weight:500;color:var(--ink-mute);text-transform:uppercase;letter-spacing:0.1em;display:flex;gap:16px;flex-wrap:wrap}
.splay-head strong{color:var(--green-bright)}
.splay-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.splay-grid.cols-7{grid-template-columns:repeat(7,1fr)}
.splay-nav{display:flex;justify-content:center;gap:12px}
.splay-nav button{font-size:12px;font-weight:500;color:var(--ink-soft);border:1px solid var(--border);padding:10px 18px;border-radius:9999px;transition:all 0.2s}
.splay-nav button:hover{border-color:var(--green);color:var(--green-bright)}
.splay-nav button:disabled{opacity:0.3;pointer-events:none}
.stage-controls{max-width:1300px;margin:20px auto 0;display:flex;justify-content:center}
.ctrl{font-size:12px;font-weight:500;color:var(--ink-soft);border:1px solid var(--border);padding:10px 20px;border-radius:9999px;transition:all 0.2s}
.ctrl:hover{border-color:var(--green);color:var(--green-bright)}

/* YEAR CARDS — bolder cinematic stagger entrance */
.ycard{position:relative;aspect-ratio:0.74;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;text-align:left;opacity:0;transform:translateY(40px) scale(0.82) rotateX(-12deg);transform-origin:50% 100%;filter:blur(8px);transition:transform 0.7s cubic-bezier(0.2,0.8,0.2,1),opacity 0.5s ease,filter 0.5s ease,border-color 0.2s,box-shadow 0.25s;will-change:transform,opacity,filter}
.ycard.in{opacity:1;transform:translateY(0) scale(1) rotateX(0);filter:blur(0)}
.ycard:hover{border-color:rgba(29,185,84,0.45);transform:translateY(-6px) scale(1.05);box-shadow:0 18px 40px -8px rgba(0,0,0,0.65),0 0 24px var(--green-glow)}
.ycard:active{transform:translateY(-2px) scale(0.97)}
.ycard.crown{border-color:var(--gold);box-shadow:0 0 0 1px rgba(255,215,0,0.18) inset}
.ycard.crown:hover{box-shadow:0 18px 40px -8px rgba(0,0,0,0.6),0 0 28px rgba(255,215,0,0.3)}
.ycard::after{content:"";position:absolute;inset:0;border-radius:var(--r);box-shadow:inset 0 -40px 60px -20px rgba(29,185,84,0.0);transition:box-shadow 0.3s;pointer-events:none}
.ycard:hover::after{box-shadow:inset 0 -40px 60px -20px rgba(29,185,84,0.25)}
.ycard-cover{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;margin-bottom:10px;background:var(--bg);flex-shrink:0}
.ycard-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px}
.ycard-cover-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px;z-index:1}
.ycard-cover-year{font-family:var(--mono);font-size:9px;letter-spacing:0.18em;color:rgba(255,255,255,0.7);text-transform:uppercase}
.ycard-cover-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:13px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.6);line-height:1.1}
.ycard-meta{display:flex;flex-direction:column;gap:2px}
.ycard-year{font-family:var(--mono);font-size:10px;color:var(--green-bright);letter-spacing:0.08em}
.ycard-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px;color:var(--cream);line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ycard-artist{font-size:10px;color:var(--ink-mute)}
.ycard .genre-tag{font-size:9px;font-weight:500;color:var(--green-bright);background:var(--green-fill);padding:3px 8px;border-radius:9999px;display:inline-block;margin-top:4px}

/* NOW PLAYING bars */
.now-playing{position:absolute;top:8px;right:8px;display:flex;gap:2px;align-items:flex-end;height:12px;z-index:2}
.now-playing span{width:2.5px;background:var(--green-bright);border-radius:1px;animation:npbar 1s ease-in-out infinite}
.now-playing span:nth-child(1){animation-delay:0s}
.now-playing span:nth-child(2){animation-delay:0.2s}
.now-playing span:nth-child(3){animation-delay:0.4s}
@keyframes npbar{0%,100%{height:3px}50%{height:12px}}

/* INDEX */
.index-section{padding:80px 28px}
.year-index{max-width:1300px;margin:0 auto}
.decade-divider{font-family:var(--serif);font-style:italic;font-weight:200;font-size:28px;color:var(--green-bright);padding:28px 0 12px;border-bottom:1px solid rgba(29,185,84,0.15);margin-bottom:4px;letter-spacing:-0.02em}
.yrow{display:grid;grid-template-columns:70px 1fr auto 100px;gap:14px;align-items:center;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer;transition:background 0.2s,padding 0.2s;text-align:left;width:100%}
.yrow:hover{background:var(--green-fill);padding-left:16px}
.yrow-year{font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;color:var(--green-bright)}
.yrow-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--cream)}
.yrow-artist{font-size:11px;color:var(--ink-mute);margin-top:1px}
.yrow-genre{font-size:10px;font-weight:500;color:var(--green-bright);background:var(--green-fill);padding:3px 10px;border-radius:9999px}
.yrow-streams{font-family:var(--mono);font-size:11px;color:var(--ink-mute);text-align:right}
.yrow:hover .yrow-streams{color:var(--green-bright)}

/* ABOUT */
.about{padding:80px 28px}
.about-body{max-width:600px;margin:0 auto;font-family:var(--serif);font-weight:300;font-size:17px;color:var(--ink-soft);line-height:1.7}
.about-body p{margin-bottom:16px}
.about-body a{color:var(--green-bright);border-bottom:1px solid rgba(29,185,84,0.3)}

/* FOOTER */
.foot{padding:48px 28px 32px;border-top:1px solid var(--border);text-align:center}
.foot-tip{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute);margin-bottom:20px}
.foot-tip-text{color:var(--ink-soft)}
.foot-upi code{font-family:var(--mono);font-size:12px;color:var(--cream);background:var(--bg-3);padding:4px 10px;border-radius:6px;margin-left:4px}
.foot-sep{color:var(--ink-mute)}
.foot-kofi{color:var(--green-bright);font-weight:500}
.foot-bottom{font-size:11px;color:var(--ink-mute);letter-spacing:0.06em}

/* MODAL */
.modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;margin:0;background:radial-gradient(ellipse at 30% 20%,rgba(29,185,84,0.06),transparent 50%),rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:500;color:var(--ink);overflow-y:auto}
.modal::backdrop{background:transparent}
.modal[open]{animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-close{position:fixed;top:20px;right:24px;z-index:10;font-size:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);transition:all 0.2s;background:rgba(0,0,0,0.5)}
.modal-close:hover{border-color:var(--green);color:var(--green-bright)}
.modal-body{max-width:1100px;margin:0 auto;padding:80px 40px 60px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;min-height:100vh}
.modal-cover-wrap{perspective:1000px}
.modal-cover{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.7);transition:transform 0.15s ease-out;will-change:transform}
.modal-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px}
.modal-cover-inner{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;z-index:1}
.modal-cover-year{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.16em}
.modal-cover-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(24px,3.5vw,44px);color:#fff;text-shadow:0 4px 20px rgba(0,0,0,0.5);line-height:1}
.modal-cover-foot{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,0.6);letter-spacing:0.12em;text-transform:uppercase;display:flex;justify-content:space-between}
.modal-info{display:flex;flex-direction:column;gap:18px}
.modal-eyebrow{font-size:11px;font-weight:500;color:var(--green-bright);text-transform:uppercase;letter-spacing:0.12em}
.modal-title{font-family:var(--serif);font-style:italic;font-weight:200;font-size:clamp(36px,5vw,64px);color:var(--cream);line-height:0.95;letter-spacing:-0.03em}
.modal-artist{font-size:17px;color:var(--ink-soft)}
.modal-artist strong{color:var(--green-bright);font-weight:500}
.modal-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.modal-meta-label{font-size:10px;font-weight:500;color:var(--ink-mute);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:4px}
.modal-meta-val{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;color:var(--cream)}
.modal-streams-long{font-family:var(--mono);font-size:11px;color:var(--ink-mute);margin-top:3px}
.modal-streams-long .still{color:var(--green-bright)}
.modal-note{font-family:var(--serif);font-weight:300;font-size:16px;color:var(--ink-soft);line-height:1.55;border-left:2px solid var(--green);padding-left:16px}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-action{font-size:12px;font-weight:500;padding:10px 18px;border:1px solid var(--border);border-radius:9999px;transition:all 0.2s;white-space:nowrap}
.modal-action:hover{border-color:var(--green);color:var(--green-bright)}
.modal-action:active{transform:scale(0.95)}
.modal-action.primary{background:var(--green);color:#000;border-color:var(--green)}
.modal-action.primary:hover{background:var(--green-bright)}

/* RESPONSIVE */
@media(max-width:1100px){.rail{grid-template-columns:repeat(4,1fr)}.splay-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){
  .nav{display:none}
  .hero-title{font-size:clamp(60px,18vw,140px)}
  .rail{grid-template-columns:repeat(2,1fr)}
  .splay-grid,.splay-grid.cols-7{grid-template-columns:repeat(2,1fr)}
  .modal-body{grid-template-columns:1fr;padding:60px 20px 40px;gap:32px}
  .yrow{grid-template-columns:55px 1fr 80px}
  .yrow-genre{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}