/* =================================================================
   БУМБОКС — 20 років історії
   Vintage · concert · Ukrainian rock/funk/hip-hop
   ================================================================= */

:root{
  --black:#070707;
  --graphite:#141414;
  --graphite-2:#1d1c1a;
  --yellow:#f5c518;
  --red:#e23b2e;
  --orange:#d97a34;
  --cream:#efe7d6;
  --muted:#8a8378;

  --font-display:'Bebas Neue','Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --font-body:'Oswald','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1200px;
}

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

html{scroll-behavior:smooth}

body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.55;
  overflow-x:clip;           /* clip (not hidden) so position:sticky keeps working */
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b{font-weight:600;color:var(--cream)}

.container{width:min(var(--maxw),92vw);margin-inline:auto}

.section{position:relative;scroll-margin-top:70px}

/* ---------- accessibility primitives ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:.6rem;left:.6rem;z-index:90;transform:translateY(-160%);
  background:var(--yellow);color:#1a1407;font-family:var(--font-mono);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;padding:.7em 1.1em;border-radius:4px;transition:transform .25s var(--ease)}
.skip-link:focus{transform:none;outline:2px solid #1a1407;outline-offset:2px}
/* visible keyboard focus everywhere (mouse users keep the custom cursor, no outline) */
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:2px}
#hero:focus-visible{outline:none}        /* skip-link target — don't paint a full-screen outline */

/* ---------- typography helpers ---------- */
.display-h{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.8rem,8vw,7rem);
  line-height:.92;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.track-tag{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:1rem;
}
.lead-p{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:400;color:var(--cream)}
.muted{color:var(--muted)}

/* =================================================================
   GLOBAL CINEMATIC OVERLAYS
   ================================================================= */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-2%)}
  100%{transform:translate(2%,4%)}
}
.vignette{
  position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%);
}

/* slow concert spotlights */
.stage-lights{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.beam{
  position:absolute;top:-30%;width:40vw;height:160vh;
  background:linear-gradient(180deg,rgba(245,197,24,.10),transparent 70%);
  filter:blur(30px);transform-origin:top center;mix-blend-mode:screen;
}
.beam--1{left:-5%;animation:sweep1 19s var(--ease) infinite}
.beam--2{left:35%;background:linear-gradient(180deg,rgba(226,59,46,.08),transparent 70%);animation:sweep2 24s var(--ease) infinite}
.beam--3{right:-5%;background:linear-gradient(180deg,rgba(217,122,52,.09),transparent 70%);animation:sweep1 27s var(--ease) infinite reverse}
@keyframes sweep1{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(10deg)}}
@keyframes sweep2{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-12deg)}}

/* =================================================================
   CINEMATIC INTRO — black → noise → reveal (перша секунда)
   ================================================================= */
.intro{position:fixed;inset:0;z-index:78;background:#050505;pointer-events:none;
  animation:introFade 2.1s var(--ease) forwards}
.intro::before{content:'';position:absolute;inset:-50%;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
  animation:grain .4s steps(3) infinite, introNoise 2.1s ease forwards}
@keyframes introFade{0%,15%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes introNoise{0%{opacity:.6}45%{opacity:.45}100%{opacity:0}}

/* =================================================================
   CUSTOM CURSOR — round PLAY button + sound wave
   ================================================================= */
.cursor{position:fixed;top:0;left:0;z-index:81;pointer-events:none;
  transform:translate(-50%,-50%);mix-blend-mode:difference;display:none}
.cursor__ring{
  position:absolute;top:50%;left:50%;width:32px;height:32px;
  border:1px solid rgba(245,197,24,.7);border-radius:50%;
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s}
.cursor__dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  font-size:.62rem;color:var(--yellow);opacity:.5;transition:.25s var(--ease)}
.cursor__wave{position:absolute;top:50%;left:50%;width:30px;height:30px;
  border:1px solid rgba(245,197,24,.4);border-radius:50%;transform:translate(-50%,-50%);
  animation:cursorWave 2.2s ease-out infinite}
@keyframes cursorWave{0%{opacity:.5;transform:translate(-50%,-50%) scale(.5)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
.cursor.is-hover .cursor__ring{width:62px;height:62px;background:rgba(245,197,24,.08)}
.cursor.is-hover .cursor__dot{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
.cursor.is-click .cursor__ring{width:22px;height:22px}
@media (pointer:fine){.cursor{display:block}body{cursor:none}a,button,.album__open,.boombox{cursor:none}}

/* =================================================================
   FIXED TOP NAV
   ================================================================= */
.topnav{position:fixed;top:0;left:0;right:0;z-index:62;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.65rem clamp(1rem,3vw,2.2rem);
  background:linear-gradient(180deg,rgba(7,7,7,.85),rgba(7,7,7,.3) 75%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.topnav__logo{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.12em;
  color:var(--cream);text-transform:uppercase;line-height:1}
.topnav__logo:hover{color:var(--yellow)}
.topnav__list{display:flex;gap:.3rem;list-style:none;align-items:center}
.topnav__item{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;color:var(--muted);padding:.5em .8em;border-radius:4px;
  transition:.25s var(--ease);text-transform:uppercase;white-space:nowrap}
.topnav__item b{color:var(--yellow);font-weight:700;font-size:.62rem;opacity:.75}
.topnav__item:hover{color:var(--cream);background:rgba(245,197,24,.08)}
.topnav__item.is-active{color:var(--cream);background:rgba(245,197,24,.13)}
.topnav__item.is-active b{opacity:1}
.topnav__actions{display:flex;align-items:center;gap:.6rem}
/* persistent ticket CTA — always visible, desktop + mobile */
.topnav__cta{font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#1a1407;background:var(--yellow);border:1px solid var(--yellow);
  border-radius:3px;padding:.6em 1em;min-height:40px;display:inline-flex;align-items:center;
  white-space:nowrap;transition:.25s var(--ease)}
.topnav__cta:hover{background:#ffd534;box-shadow:0 0 26px rgba(245,197,24,.5);transform:translateY(-1px)}
.topnav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;width:44px;height:44px;padding:10px}
.topnav__burger span{display:block;width:24px;height:2px;background:var(--cream);transition:.3s var(--ease)}
.topnav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topnav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.topnav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .topnav__burger{display:flex;z-index:2}
  /* backdrop-filter would make .topnav the containing block for the fixed drawer,
     pushing it off-screen — drop it on mobile so the drawer anchors to the viewport */
  .topnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,7,7,.92)}
  .topnav__list{position:fixed;inset:0;width:100vw;height:100dvh;
    flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:5rem 1.6rem;
    background:rgba(7,7,7,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transform:translateX(100%);transition:transform .4s var(--ease),visibility .4s;
    visibility:hidden;pointer-events:none}                 /* full-screen overlay; closed menu not focusable */
  .topnav.open .topnav__list{transform:none;visibility:visible;pointer-events:auto}
  .topnav__item{font-size:1.25rem;padding:.7em 1em;min-height:48px;justify-content:center}   /* ≥44px tap targets */
  .topnav__item b{font-size:.8rem}
  .topnav__cta{font-size:.7rem;padding:.55em .8em}
}

/* =================================================================
   1. HERO
   ================================================================= */
.hero{position:relative;min-height:220vh}
.hero__spot{
  position:absolute;top:8%;left:50%;width:120vh;height:120vh;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 40%,rgba(245,197,24,.16),rgba(217,122,52,.05) 35%,transparent 60%);
  opacity:0;animation:spotIn 2.4s var(--ease) .3s forwards}
@keyframes spotIn{to{opacity:1}}

.hero-photo{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  transform:scale(.1);transform-origin:50% 52%;border-radius:8px;
  background:url("../assets/history-banner.jpg") center/cover}
/* TRACK 01 intro text that resolves on the zoom photo (replaces the old banner) */
.hero-intro{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;gap:.5rem;padding:0 1rem 9vh;
  background:linear-gradient(180deg,transparent 42%,rgba(7,7,7,.5) 72%,rgba(7,7,7,.9))}
.hero-intro .display-h{font-size:clamp(2.6rem,7vw,5rem)}
.hero-intro .lead-p{max-width:34ch}
.hero-intro .miniplayer{margin-top:1.4rem}

/* ===== PLAY → HISTORY cinematic transition (cassette → instant photo → fullscreen) ===== */
.display.glow{border-color:var(--yellow);box-shadow:0 0 26px rgba(245,197,24,.45),inset 0 0 14px rgba(245,197,24,.28)}
.display.glow .display__text{color:#fff;text-shadow:0 0 12px rgba(245,197,24,.85)}
.tr{position:fixed;inset:0;z-index:130;pointer-events:none}
.tr__vignette{position:absolute;inset:0;opacity:0;
  background:radial-gradient(125% 95% at 50% 46%,transparent 0,transparent 30%,rgba(4,4,4,.62) 76%,rgba(2,2,2,.95) 100%)}
.tr__spot{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(42% 34% at 50% 48%,rgba(245,197,24,.22),rgba(245,197,24,.05) 46%,transparent 72%)}

/* ---- cassette deck close-up: where the mechanics play out ---- */
.tr__deck{position:fixed;left:50%;top:50%;width:min(540px,74vw);aspect-ratio:1.46/1;opacity:0;
  transform:translate(-50%,-50%) scale(.42);transform-origin:50% 50%;will-change:transform,opacity;perspective:1200px;
  border-radius:16px;background:linear-gradient(180deg,#2c2926,#1c1915 58%,#120f09);
  border:1px solid #3a342c;box-shadow:0 50px 92px rgba(0,0,0,.72),inset 0 2px 4px rgba(255,255,255,.07),inset 0 -8px 18px rgba(0,0,0,.6)}
.tr__well{position:absolute;left:7%;right:7%;top:12%;bottom:9%;border-radius:9px;
  background:radial-gradient(130% 130% at 50% 22%,#15120e,#070503);box-shadow:inset 0 10px 26px rgba(0,0,0,.9)}
/* the cassette unit — slides UP out of the deck (the main movement) */
.tr__cassette{position:absolute;left:11%;right:11%;bottom:9%;height:72%;will-change:transform}
.tr__casbody{position:absolute;inset:0;z-index:2;border-radius:6px;
  background:linear-gradient(180deg,#2b2721,#15120c);border:1px solid #443c32;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.08),0 12px 22px rgba(0,0,0,.55)}
.tr__casbody::before{content:'';position:absolute;left:8%;right:8%;top:12%;height:46%;border-radius:6px;
  background:radial-gradient(circle at 50% 45%,#262420,#0a0907);border:1px solid #000}
.tr__reel{position:absolute;top:25%;width:15%;aspect-ratio:1;border-radius:50%;z-index:3;
  background:radial-gradient(circle,#46413a 0 30%,#16140f 31%);border:2px solid #5a544a;box-shadow:0 0 0 3px rgba(0,0,0,.4)}
.tr__reel--l{left:25%}.tr__reel--r{right:25%}
.tr__reel::after{content:'';position:absolute;inset:0;border-radius:50%;
  background-image:repeating-conic-gradient(#6a6359 0 8deg,transparent 8deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 34%,#0000 35%);mask:radial-gradient(circle,#000 34%,#0000 35%)}
.tr__label{position:absolute;left:11%;right:11%;bottom:10%;height:22%;z-index:3;border-radius:2px;
  background:linear-gradient(180deg,#efe7d6,#d6cbb4);display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.46rem;letter-spacing:.1em;color:#3a342a}
/* the instant photo, stored INSIDE the cassette (z below the body) — slides out the top */
.tr__photo{position:absolute;left:15%;right:15%;bottom:6%;z-index:1;aspect-ratio:1/.84;box-sizing:border-box;
  border:6px solid #f4efe2;border-bottom-width:20px;border-radius:2px;background:#f4efe2;will-change:transform;
  box-shadow:0 14px 26px rgba(0,0,0,.6)}
.tr__photo>div{position:absolute;inset:0}
.tr__img{background:url("../assets/history-banner.jpg") center/cover;will-change:filter}
.tr__develop{background:linear-gradient(155deg,#2b251c,#0c0a07)}
.tr__grain{opacity:.4;mix-blend-mode:overlay;background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* deck door — smoked flap hinged at the bottom, swings open toward the viewer */
.tr__door{position:absolute;left:6%;right:6%;top:9%;bottom:7%;z-index:5;transform-origin:50% 100%;will-change:transform;
  border-radius:8px;background:linear-gradient(180deg,rgba(56,52,46,.96),rgba(24,20,16,.97));
  border:1px solid #4a423a;box-shadow:inset 0 2px 6px rgba(255,255,255,.06),0 8px 16px rgba(0,0,0,.5)}
.tr__door::after{content:'';position:absolute;left:11%;right:11%;top:15%;height:52%;border-radius:5px;
  background:linear-gradient(180deg,rgba(120,150,170,.14),rgba(18,26,34,.22));border:1px solid rgba(255,255,255,.07)}
/* while PLAY is animating, clear the resting hero copy (matches the scroll-zoom fade) */
.hero.tr-playing .hero__eyebrow,.hero.tr-playing .hero__title,.hero.tr-playing .hero__lead,
.hero.tr-playing .hero__cta,.hero.tr-playing .scroll-cue,.hero.tr-playing .deco-label{
  opacity:0!important;transition:opacity .4s var(--ease);pointer-events:none}
@media (prefers-reduced-motion:reduce){.tr{display:none}}
.hero__inner{position:sticky;top:0;z-index:2;min-height:100vh;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 1rem 12vh}
.hero__eyebrow{font-family:var(--font-mono);letter-spacing:.4em;font-size:.72rem;
  color:var(--muted);margin-bottom:1rem;opacity:0;animation:fadeUp 1s var(--ease) 1.6s forwards}

.hero__title{
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,6rem);line-height:.85;letter-spacing:.02em;margin-top:.8rem;
  color:transparent;-webkit-text-stroke:1.4px rgba(239,231,214,.72);
  text-shadow:0 0 26px rgba(245,197,24,.35),0 2px 10px rgba(0,0,0,.6);
  opacity:0;animation:fadeUp 1.1s var(--ease) 1.9s forwards}
@supports not (-webkit-text-stroke:1px #000){.hero__title{color:var(--cream)}}
.hero__lead{font-size:clamp(1rem,2.2vw,1.3rem);color:var(--cream);margin-top:.7rem;
  max-width:30ch;opacity:0;animation:fadeUp 1s var(--ease) 2.15s forwards}
.hero__lead b{color:var(--yellow)}

.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.3rem;
  opacity:0;animation:fadeUp 1s var(--ease) 2.4s forwards}

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

/* ----- buttons ----- */
.btn{
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.95em 1.8em;border:1px solid rgba(239,231,214,.3);border-radius:2px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--cream);transition:.3s var(--ease)}
.btn--solid{background:var(--yellow);color:#1a1407;border-color:var(--yellow);font-weight:600}
.btn--solid:hover{background:#ffd534;box-shadow:0 0 30px rgba(245,197,24,.45);transform:translateY(-2px)}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 24px rgba(245,197,24,.15)}
/* ticket CTA — high emphasis without stealing the solid primary */
.btn--ticket{border-color:var(--yellow);color:var(--yellow);font-weight:600;
  box-shadow:0 0 18px rgba(245,197,24,.12)}
.btn--ticket:hover{background:var(--yellow);color:#1a1407;box-shadow:0 0 34px rgba(245,197,24,.5);transform:translateY(-2px)}
.btn--mini{padding:.5em 1.2em;font-size:.72rem;min-height:0;background:var(--yellow);color:#1a1407;border:none}

/* ----- scroll cue ----- */
.scroll-cue{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.6rem;
  opacity:0;animation:fadeUp 1s var(--ease) 2.8s forwards}
.scroll-cue__arrow{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* decompose layer label (корпус → касета → стрічка → звук → концерт) */
.deco-label{position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--yellow);opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
  text-shadow:0 0 14px rgba(245,197,24,.55)}

/* hero side rail (бокова панель) — socials + vertical brand, pinned on the main screen */
.hero-rail{position:absolute;left:clamp(14px,3vw,46px);top:50%;z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:1.3rem;
  transform:translate(0,-50%);opacity:0;animation:railIn 1s var(--ease) .8s forwards}
@keyframes railIn{from{opacity:0;transform:translate(-18px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.hero-rail__social{display:flex;flex-direction:column;gap:.55rem}
.hero-rail__link{width:36px;height:36px;display:grid;place-items:center;border:1px solid #34302a;border-radius:8px;
  background:rgba(8,7,6,.5);color:var(--cream);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;
  text-decoration:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:.3s var(--ease)}
.hero-rail__link:hover,.hero-rail__link:focus-visible{border-color:var(--yellow);color:var(--yellow);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 18px rgba(245,197,24,.22);outline:none}
.hero-rail__line{width:1px;height:clamp(40px,9vh,84px);background:linear-gradient(180deg,var(--yellow),transparent)}
.hero-rail__brand{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:860px){.hero-rail{display:none}}

/* =================================================================
   THE BOOMBOX
   ================================================================= */
.boombox{
  position:relative;width:min(430px,76vw);margin-top:.2rem;transform-origin:50% 52%;
  transform:perspective(1400px) rotateX(6deg) rotateY(-7deg);
  opacity:0;animation:bbReveal 2.2s var(--ease) .5s forwards;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
@keyframes bbReveal{0%{opacity:0;transform:perspective(1400px) rotateX(20deg) rotateY(-7deg) translateY(60px) scale(.9);filter:blur(8px) drop-shadow(0 0 0 transparent)}
  100%{opacity:1;transform:perspective(1400px) rotateX(6deg) rotateY(-7deg);filter:blur(0) drop-shadow(0 40px 60px rgba(0,0,0,.7))}}

.boombox__handle{
  width:42%;height:26px;margin:0 auto;border:7px solid #2c2926;border-bottom:none;
  border-radius:26px 26px 0 0;background:transparent;box-shadow:inset 0 4px 6px rgba(0,0,0,.6)}
.boombox__body{
  position:relative;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:2.5%;align-items:center;
  padding:5% 4.5%;border-radius:14px;
  background:linear-gradient(160deg,#33302c,#1a1815 60%,#0f0e0c);
  border:1px solid #3d3934;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.06),inset 0 -10px 30px rgba(0,0,0,.6)}
.boombox__body::before{/* brushed-metal sheen + wear */
  content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 5px),
    radial-gradient(circle at 18% 120%,rgba(0,0,0,.5),transparent 40%);
  mix-blend-mode:overlay;opacity:.6}

/* speakers */
.speaker{aspect-ratio:1;border-radius:50%;position:relative;
  background:radial-gradient(circle at 38% 32%,#2a2724,#0c0b0a 70%);
  border:3px solid #45403a;
  box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 2px 4px rgba(255,255,255,.05)}
.speaker::before{/* grille dots */
  content:'';position:absolute;inset:11%;border-radius:50%;
  background:radial-gradient(circle,#1a1916 1.4px,transparent 1.7px) 0 0/9px 9px;
  opacity:.55}
.speaker__cone{position:absolute;inset:30%;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#3a3530,#100f0d 75%);
  box-shadow:inset 0 0 14px rgba(0,0,0,.9);transition:transform .15s ease}
.speaker__cone::after{content:'';position:absolute;inset:34%;border-radius:50%;
  background:radial-gradient(circle,#544e46,#1a1814)}

/* center column */
.boombox__center{display:flex;flex-direction:column;gap:7%}
.display{
  background:linear-gradient(180deg,#0d1a0d,#08120a);border:2px solid #2c2a26;border-radius:5px;
  padding:.7em .4em;text-align:center;font-family:var(--font-mono);
  box-shadow:inset 0 0 14px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);overflow:hidden}
.display__text{display:block;color:#7dffa0;font-weight:700;letter-spacing:.12em;
  font-size:clamp(.7rem,2.2vw,1.05rem);text-shadow:0 0 8px rgba(125,255,160,.7);
  animation:flicker 6s infinite}
.display__sub{display:block;color:#3f8a52;font-size:.52rem;letter-spacing:.34em;margin-top:.25em;text-transform:uppercase}
@keyframes flicker{0%,96%,100%{opacity:1}97%{opacity:.6}98%{opacity:.9}}

.cassette{
  background:linear-gradient(180deg,#211f1c,#15130f);border:2px solid #38332d;border-radius:6px;
  padding:9% 8% 6%;position:relative;box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
.cassette__window{position:relative;height:0;padding-bottom:42%;
  background:radial-gradient(circle at 50% 50%,#23211d,#0b0a08);border-radius:60px/40px;
  border:1px solid #000;display:flex;align-items:center;justify-content:space-between;padding-inline:14%}
.reel{width:26%;aspect-ratio:1;border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);
  background:radial-gradient(circle,#444038 0 30%,#16140f 32%);
  border:2px solid #555;box-shadow:0 0 0 3px rgba(0,0,0,.4)}
.reel::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#0000 0 0);box-shadow:
    0 0 0 0 #6a6359, inset 0 0 0 2px #6a6359;
  -webkit-mask:radial-gradient(circle,#000 36%,#0000 37%);mask:radial-gradient(circle,#000 36%,#0000 37%);
  background-image:repeating-conic-gradient(#6a6359 0 8deg,transparent 8deg 30deg)}
.reel--l{left:12%}.reel--r{right:12%}
.cassette__tape{position:absolute;top:50%;left:24%;right:24%;height:14%;transform:translateY(-50%);
  background:linear-gradient(180deg,#5a4632,#2c2114);border-radius:2px}
/* track-01 photo revealed inside the cassette as the boombox zooms in */
.cassette__photo{position:absolute;inset:0;border-radius:60px/40px;z-index:6;opacity:0;
  background:url("../assets/history-banner.jpg") center/cover}
.deco-label{display:none}
.cassette__label{display:block;text-align:center;font-family:var(--font-mono);font-size:.5rem;
  letter-spacing:.18em;color:var(--muted);margin-top:8%}

.boombox.playing .reel::after{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* controls */
.controls{display:flex;gap:5%;justify-content:center;align-items:flex-end}
.ctrl{
  font-family:var(--font-mono);background:linear-gradient(180deg,#3a3631,#211e1a);
  border:1px solid #4a443d;border-top-color:#5c554c;color:#cdc6b8;
  padding:.55em .7em;border-radius:4px;font-size:.7rem;
  box-shadow:0 3px 0 #0e0d0b,0 4px 6px rgba(0,0,0,.5);transition:.12s ease;position:relative}
.ctrl:active,.ctrl.is-press{transform:translateY(3px);box-shadow:0 0 0 #0e0d0b}
.ctrl--play{
  background:linear-gradient(180deg,#f7d23a,#d99a1e);border-color:#ffe98a;color:#2a1d05;
  padding:.7em 1.1em;font-weight:700;box-shadow:0 4px 0 #7a5300,0 0 22px rgba(245,197,24,.35);
  display:flex;flex-direction:column;align-items:center;gap:.15em}
.ctrl--play:hover{transform:translateY(2px);box-shadow:0 2px 0 #7a5300,0 0 40px rgba(245,197,24,.7)}
.ctrl--play:hover .ctrl__glyph{animation:pulseGlyph .7s ease infinite}
.ctrl__glyph{font-size:1.1rem;line-height:1}
.ctrl__hint{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase}
@keyframes pulseGlyph{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* speaker vibration when hovering play */
.boombox.vibe .speaker__cone{animation:vibe .12s linear infinite}
@keyframes vibe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* bass pulse while playing */
.boombox.playing .speaker--right .speaker__cone{animation:bass .5s ease-in-out infinite}
@keyframes bass{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* wear / stickers / scratches / dust — "річ, яка пережила багато концертів" */
.boombox__wear{position:absolute;inset:0;pointer-events:none}
.sticker{position:absolute;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;
  padding:.2em .45em;transform:rotate(-7deg);color:#1a1814;font-weight:700;opacity:.85;z-index:2}
.sticker--1{background:var(--red);top:13%;left:-2%;transform:rotate(-9deg)}
.sticker--2{background:var(--yellow);bottom:17%;right:-2%;transform:rotate(6deg)}
.sticker--3{background:#15130f;color:var(--yellow);border:1px solid var(--yellow);
  font-size:.48rem;top:45%;left:-3%;transform:rotate(4deg)}
.wear-scratch{position:absolute;height:1px;opacity:.45;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.wear-scratch--1{top:28%;left:12%;width:46%;transform:rotate(-7deg)}
.wear-scratch--2{top:66%;left:34%;width:34%;transform:rotate(5deg)}
.wear-dust{position:absolute;top:12%;left:0;right:0;bottom:0;opacity:.5;mix-blend-mode:overlay;
  background-image:radial-gradient(circle,rgba(255,255,255,.10) .5px,transparent 1px),
                   radial-gradient(circle,rgba(0,0,0,.30) .5px,transparent 1px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.wear-scuff{position:absolute;width:32%;height:20%;bottom:6%;left:5%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%);transform:rotate(-18deg)}

/* sound wave ring on play */
.boombox::after{content:'';position:absolute;inset:0;border-radius:14px;border:1px solid rgba(245,197,24,.4);
  opacity:0;pointer-events:none}
.boombox.wave::after{animation:wave 1s var(--ease)}
@keyframes wave{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}

/* PLAY hover: display blinks + repeating faint sound wave */
.display.blink .display__text{animation:displayBlink .45s steps(1,end) infinite}
@keyframes displayBlink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.boombox.hovering::after{animation:waveLoop 1.3s var(--ease) infinite}
@keyframes waveLoop{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}

/* =================================================================
   SPEAKER → SPOTLIGHT WARP TRANSITION
   ================================================================= */
.warp{position:fixed;z-index:70;border-radius:50%;pointer-events:none;
  width:40px;height:40px;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,#fff 0 8%,var(--yellow) 18%,var(--orange) 40%,#0a0a0a 70%);
  opacity:0}
.warp.go{animation:warp 1.25s var(--ease) forwards}
@keyframes warp{
  0%{opacity:1;transform:translate(-50%,-50%) scale(0)}
  55%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(60)}}

/* =================================================================
   REWIND OVERLAY (footer "PLAY AGAIN")
   ================================================================= */
.rewind{position:fixed;inset:0;z-index:75;pointer-events:none;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  opacity:0;visibility:hidden}
.rewind.go{animation:rewindFlash 1.4s var(--ease)}
@keyframes rewindFlash{
  0%{opacity:0;visibility:visible}12%{opacity:1}82%{opacity:1}100%{opacity:0;visibility:hidden}}
.rewind__label{font-family:var(--font-mono);letter-spacing:.45em;color:var(--red);
  font-size:clamp(1rem,4vw,1.6rem);animation:rew .28s steps(2) infinite}
.rewind__strip{width:min(80vw,720px);height:90px;border-radius:6px;
  background:repeating-linear-gradient(90deg,#241a10 0 40px,#0c0a08 40px 80px);
  border:1px solid #2a2520;box-shadow:inset 0 0 30px rgba(0,0,0,.8)}
.rewind.go .rewind__strip{animation:stripRun .35s linear infinite}
@keyframes stripRun{to{background-position:-80px 0}}

/* =================================================================
   REVEAL ON SCROLL
   ================================================================= */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =================================================================
   2. HISTORY
   ================================================================= */
.history{padding:4vh 0 10vh;background:linear-gradient(180deg,#070707,#0c0a09)}
.history__bg{position:absolute;inset:0;z-index:0;opacity:.5;
  background:
    radial-gradient(60% 50% at 75% 30%,rgba(226,59,46,.10),transparent 60%),
    radial-gradient(50% 40% at 20% 70%,rgba(245,197,24,.08),transparent 60%),
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.25) 3px 4px)}
/* hazy ІСТОРІЯ banner behind the head; text sits low so it clears the faces */
.history__banner{position:relative;z-index:1;min-height:82vh;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;overflow:hidden;padding-bottom:6vh}
.history__banner-photo{position:absolute;inset:-16px;z-index:0;
  background:url("../assets/history-banner.jpg") center 22%/cover no-repeat;
  filter:blur(2px) grayscale(.15) brightness(.95)}
.history__banner-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,7,.55) 0%,rgba(7,7,7,0) 20%,rgba(7,7,7,0) 46%,rgba(7,7,7,.55) 72%,#0b0a09 96%)}
.history__banner .display-h{font-size:clamp(2.6rem,7vw,5rem)}
.history__head{position:relative;z-index:1;text-align:center;max-width:60ch;margin:0 auto}
.history__head .lead-p{margin-top:1rem}
.history__head .miniplayer{margin:1.6rem auto 0}

/* documentary scenes (Netflix-style) */
/* horizontal timeline — sticky pin, driven by vertical scroll */
.doc-stage{position:relative;z-index:1;height:430vh;margin-top:6vh}
.doc-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;overflow:hidden}
.doc-track{display:flex;gap:4vw;align-items:center;will-change:transform;padding-inline:50vw}
.doc-scene{flex:0 0 min(860px,86vw);
  display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;
  padding:2.4rem 2.6rem;border:1px solid #2c2824;border-radius:16px;
  background:linear-gradient(160deg,rgba(26,22,18,.6),rgba(9,8,7,.65));
  box-shadow:0 24px 50px rgba(0,0,0,.45)}
.doc-scene--rev .scene__media{order:2}
.doc-scene--wide{grid-template-columns:1fr;gap:1.6rem;text-align:center;justify-items:center}
.doc-scene .scene__media,.doc-scene .bandphoto{max-width:300px;max-height:52vh;width:100%;justify-self:center}
/* scene videos — shown FULL (no crop), stacked in the media column */
.scene__videos,.scene__stack{display:flex;flex-direction:column;gap:.8rem;
  width:100%;max-width:360px;max-height:84vh;justify-self:center;align-self:center}
.scene__video{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #2a2724;
  background:#000;box-shadow:0 18px 38px rgba(0,0,0,.5)}
.scene__stack .scene__media{max-width:none;width:100%;max-height:48vh}   /* match video width; cap height so the scene fits the pin */
.scene__body{max-width:46ch}
.scene__body--center{max-width:62ch}
.scene__body p{margin-bottom:1rem}
.doc-hint{position:absolute;top:9vh;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.doc-progress{position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);z-index:3;
  width:min(320px,60vw);height:2px;background:#2a2724;border-radius:2px;overflow:hidden}
.doc-progress i{display:block;height:100%;width:14%;background:var(--yellow);box-shadow:0 0 8px var(--yellow);transition:width .12s linear}
.scene__chip{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.26em;
  color:var(--yellow);border:1px solid rgba(245,197,24,.4);border-radius:3px;padding:.35em .8em;margin-bottom:1rem}
.scene__chip--red{color:var(--red);border-color:rgba(226,59,46,.5)}
.reveal.in .scene__chip{animation:trackPlay .8s var(--ease)}
@keyframes trackPlay{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:none}}
.scene__title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);line-height:.95;
  text-transform:uppercase;margin-bottom:1rem}
.scene__note{font-style:italic;color:var(--yellow)}

/* scene media + auto-upgrading photo placeholder */
.scene__media,.bandphoto{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  border:1px solid #2a2724;background:linear-gradient(160deg,#1c1814,#0a0908)}
.scene__media--tall{aspect-ratio:3/4}
.scene__media img,.bandphoto__layer--band img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;filter:grayscale(.35) contrast(1.05)}
.scene__media img.img-missing,.bandphoto__layer--band img.img-missing{display:none}
.scene__media--color img{filter:none}            /* 2018 — plain colour photo, no vintage desaturation */
.scene__ph{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:1rem;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;color:var(--muted)}
.scene__ph::before{content:'📷';font-size:1.7rem;margin-bottom:.5rem;filter:grayscale(1);opacity:.55}
.scene__media figcaption,.bandphoto figcaption{position:absolute;bottom:0;left:0;right:0;z-index:5;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6em;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(0,0,0,.75))}

/* bandphoto parallax layers (2004 scene) */
.bandphoto__layer{position:absolute;inset:0;transition:transform .25s var(--ease)}
.bandphoto__layer--crowd{background:radial-gradient(circle at 50% 90%,#241c14,#0a0908)}
.bandphoto__layer--stage{background:radial-gradient(120% 60% at 50% 100%,rgba(245,197,24,.22),transparent 60%)}
.bandphoto__layer--band{z-index:2}
.bandphoto__layer--tape{z-index:4;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(0,0,0,.4) 14px 15px)}

/* member cards + lineup */
.member-cards,.lineup{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.lineup{justify-content:center;max-width:780px}
.member-card{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  border:1px solid #2c2a26;border-radius:5px;padding:.6rem .9rem;background:rgba(0,0,0,.3);
  font-size:.82rem;color:var(--cream);min-width:118px;transition:.3s var(--ease);position:relative}
.member-card:hover{border-color:var(--yellow);transform:translateY(-3px);z-index:6}
.member-card i{font-style:normal;font-size:1.1rem;margin-bottom:.2rem}
.member-card small{color:var(--muted);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
.mc__img{width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 16%;margin-bottom:.4rem;
  filter:grayscale(.3) contrast(1.05);border:1px solid #3a342c;transform-origin:center bottom;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.mc__img.img-missing{display:none}
.member-card .mc__img:not(.img-missing)+i{display:none}
.member-card:hover .mc__img{transform:scale(2.5) translateY(-6px);border-color:var(--yellow);
  box-shadow:0 16px 34px rgba(0,0,0,.75)}
/* compact single row (2004 lineup) — keeps the «2004» chip + scene readable */
.member-cards--row{flex-wrap:nowrap;gap:.5rem}
.member-cards--row .member-card{flex:1 1 0;min-width:0;align-items:center;text-align:center;
  padding:.5rem .45rem;font-size:.74rem}
.member-cards--row .member-card i{font-size:.95rem}
.member-cards--row .mc__img{width:44px;height:44px}
.member-cards--row .member-card small{font-size:.5rem;letter-spacing:.1em}

/* stat block */
.stat-block{display:flex;gap:1.8rem;margin:1.4rem 0 .4rem;flex-wrap:wrap}
.stat-block b{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--yellow);display:block}
.stat-block span{font-size:.74rem;color:var(--muted)}

/* track list */
.track-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.track-list .lp,.track-list .song{font-family:var(--font-mono);font-size:.74rem;
  border:1px solid #2c2a26;border-radius:3px;padding:.45em .8em}
.track-list .lp{color:var(--cream);border-color:rgba(245,197,24,.35)}
.track-list .song{color:var(--muted)}

/* leaving (Самойло) + new-member animations */
.reveal.in .scene__media--leaving img{animation:leaveFade 2.6s var(--ease) .5s both}
@keyframes leaveFade{0%,55%{opacity:1;filter:grayscale(.35)}100%{opacity:.12;filter:grayscale(1)}}
.new-member{position:absolute;top:9%;left:-2%;z-index:6;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.22em;background:var(--yellow);color:#1a1407;padding:.35em .7em;transform:rotate(-6deg);opacity:0}
.reveal.in .new-member{animation:newMember .7s var(--ease) .5s both}
@keyframes newMember{0%{opacity:0;transform:rotate(-6deg) scale(.6)}
  60%{opacity:1;transform:rotate(-6deg) scale(1.15)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}

/* real album cover image (drops over the CSS art when present) */
.album__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px;z-index:3}

/* tape coils into a disc → albums */
.tape-to-disc{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:1rem;margin-top:12vh;min-height:130px;justify-content:center}
.ttd-tape{width:240px;height:10px;border-radius:5px;
  background:repeating-linear-gradient(90deg,#3a2c1c 0 10px,#241a10 10px 20px)}
.tape-to-disc.in .ttd-tape{animation:tapeCoil 1.7s var(--ease) .2s forwards}
@keyframes tapeCoil{0%{width:240px;opacity:1;rotate:0deg}
  60%{opacity:1}100%{width:0;opacity:0;rotate:200deg}}
.ttd-disc{position:absolute;top:0;width:96px;height:96px;border-radius:50%;scale:0;opacity:0;
  background:repeating-radial-gradient(circle,#0c0c0c 0 2px,#1c1c1c 2px 4px);box-shadow:0 0 40px rgba(0,0,0,.6)}
.ttd-disc::after{content:'';position:absolute;inset:40%;border-radius:50%;
  background:radial-gradient(circle,var(--orange),#2a1206);border:2px solid #000}
.tape-to-disc.in .ttd-disc{animation:discForm .8s var(--ease) .9s forwards, discSpin 6s linear 1.7s infinite}
@keyframes discForm{from{scale:0;opacity:0}to{scale:1;opacity:1}}
@keyframes discSpin{to{rotate:360deg}}
.ttd-text{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin-top:104px}

/* mini player */
.miniplayer{display:flex;align-items:center;gap:1rem;margin-top:2rem;
  border:1px solid #2c2a26;border-radius:6px;padding:.9rem 1.1rem;background:rgba(0,0,0,.3);max-width:380px}
.miniplayer__btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--yellow);
  background:transparent;color:var(--yellow);flex:none}
.miniplayer__meta{flex:1;display:flex;flex-direction:column;gap:.35rem}
.miniplayer__title,.miniplayer__time{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;color:var(--muted)}
.miniplayer__time b{color:var(--yellow)}
.miniplayer__bar{height:3px;background:#2a2724;border-radius:3px;overflow:hidden}
.miniplayer__bar span{display:block;height:100%;width:0;background:var(--yellow);box-shadow:0 0 8px var(--yellow)}

/* timeline */
.timeline{position:relative;z-index:1;margin-top:2vh;padding-top:2rem}
.timeline__tape{position:absolute;top:2.6rem;left:0;right:0;height:10px;
  background:repeating-linear-gradient(90deg,#3a2c1c 0 10px,#241a10 10px 20px);border-radius:5px;opacity:.8}
.timeline__list{position:relative;display:flex;justify-content:space-between;list-style:none;
  flex-wrap:wrap;gap:1.5rem 0}
.timeline__list li{display:flex;flex-direction:column;align-items:center;text-align:center;
  flex:1;min-width:90px;position:relative;padding-top:1.4rem}
.timeline__list li::before{content:'';position:absolute;top:0;width:13px;height:13px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 12px var(--yellow)}
.timeline__list b{font-family:var(--font-display);font-size:1.8rem;color:var(--cream)}
.timeline__list span{font-size:.78rem;color:var(--muted)}

/* =================================================================
   3. ALBUMS
   ================================================================= */
.albums{background:#070707;transition:background .8s var(--ease)}
.albums.mood-warm{background:#1a0f06}
.albums.mood-red{background:#160606}
.albums.mood-cold{background:#05101a}
.albums.mood-yellow{background:#15120a}
.albums__rewind{text-align:center;padding:16vh 1rem 4vh}
.rewind-word{font-family:var(--font-mono);letter-spacing:.5em;color:var(--red);
  font-size:.9rem;animation:rew 1.2s steps(6) infinite}
@keyframes rew{0%,100%{opacity:1}50%{opacity:.3}}
.albums__title{margin:1rem 0}

/* sticky horizontal scroller */
.albums__scroller{height:620vh;position:relative}
.albums__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;overflow:hidden;padding-bottom:8vh}
.albums__track{display:flex;gap:5vw;align-items:center;will-change:transform;padding-inline:50vw}
.album{flex:none;width:min(360px,74vw);display:grid;grid-template-columns:1fr;gap:1rem;
  transform:scale(.68);opacity:.32;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.album.is-center{transform:scale(1);opacity:1}
.album__cover{position:relative;aspect-ratio:1;max-width:250px;width:100%;justify-self:center}
.album__art{position:absolute;inset:0;border-radius:4px;z-index:2;overflow:hidden;
  background:linear-gradient(150deg,var(--cv1),var(--cv2));
  display:grid;place-items:center;box-shadow:0 30px 60px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08)}
.album__art::after{content:'';position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px);opacity:.5}
.album__art-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);line-height:.9;
  text-align:center;color:rgba(255,255,255,.92);text-transform:uppercase}
.album__vinyl{position:absolute;top:5%;left:55%;width:88%;height:90%;border-radius:50%;z-index:1;
  background:repeating-radial-gradient(circle,#0c0c0c 0 2px,#181818 2px 4px);
  box-shadow:0 20px 40px rgba(0,0,0,.6);transition:left .7s var(--ease),transform .7s var(--ease)}
.album__vinyl::after{content:'';position:absolute;inset:39%;border-radius:50%;
  background:radial-gradient(circle,var(--cv1),var(--cv2));border:2px solid #000}
.album.is-center .album__vinyl{left:74%}
.album.is-center .album__vinyl{animation:vinylspin 8s linear infinite}
@keyframes vinylspin{to{transform:rotate(360deg)}}
.album__info{display:flex;flex-direction:column}
.album__info h3{font-family:var(--font-display);font-size:1.9rem;line-height:.95;text-transform:uppercase}
.album__year{font-family:var(--font-mono);color:var(--yellow);letter-spacing:.2em;font-size:.8rem;margin:.15rem 0 .5rem}
.album__desc{color:var(--cream);font-style:italic;font-size:.92rem;margin-bottom:.4rem}
.album__phrase{color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.album__stat{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.8rem}
.album__stat b{font-size:1.7rem;color:var(--yellow);font-family:var(--font-display)}
.album__open{padding:.7em 1.3em;font-size:.7rem;align-self:start}
.albums__title{font-size:clamp(2.2rem,6vw,4.2rem)}
.albums__hint{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.28em;color:var(--muted);text-transform:uppercase;white-space:nowrap}

/* =================================================================
   4. TOURS
   ================================================================= */
.tours{padding:16vh 0 12vh;background:linear-gradient(180deg,#05080d,#070707)}
.tours__head{text-align:center;margin-bottom:6vh}
.map{position:relative;width:min(940px,92vw);margin:0 auto;aspect-ratio:1000/652;
  border-radius:12px;border:1px solid #16202c;overflow:hidden;
  background:
    radial-gradient(80% 90% at 55% 45%,rgba(20,40,70,.45),transparent 75%),
    radial-gradient(circle at 82% 78%,rgba(245,197,24,.04),transparent 45%),
    #050a12;
  box-shadow:inset 0 0 90px rgba(0,0,0,.85)}
.map::before{content:'';position:absolute;inset:0;z-index:0;opacity:.35;
  background-image:linear-gradient(rgba(80,130,180,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(80,130,180,.07) 1px,transparent 1px);
  background-size:54px 54px}
.map__geo{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.map__land{fill:rgba(130,160,130,.16);stroke:rgba(245,197,24,.5);stroke-width:1.2;
  stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(245,197,24,.22))}
.route{fill:none;stroke:var(--yellow);stroke-width:2;opacity:.75;
  stroke-dasharray:7 12;filter:drop-shadow(0 0 5px var(--yellow));animation:dash 6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-220}}
.map__legend{position:absolute;top:.9rem;left:1.1rem;z-index:3;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.city{position:absolute;transform:translate(-50%,-6px);background:none;border:none;z-index:4;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:transparent;
  padding-top:18px;white-space:nowrap;transition:color .25s var(--ease)}   /* label hidden until hover → no clutter on a dense map */
.city:hover,.city:focus-visible{z-index:7;text-shadow:0 1px 6px #000,0 0 3px #000}
.city::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 0 rgba(245,197,24,.6);animation:cityPulse 2.6s ease-out infinite}
@keyframes cityPulse{0%{box-shadow:0 0 0 0 rgba(245,197,24,.55)}100%{box-shadow:0 0 0 16px rgba(245,197,24,0)}}
.city:hover,.city:focus-visible{color:var(--yellow)}
.city:hover::before{background:#fff}
/* home city (Львів) — red accent pin */
.city--home:hover,.city--home:focus-visible{color:#ffd2cd}
.city--home::before{background:var(--red);animation:cityPulseRed 2.4s ease-out infinite}
@keyframes cityPulseRed{0%{box-shadow:0 0 0 0 rgba(226,59,46,.6)}100%{box-shadow:0 0 0 18px rgba(226,59,46,0)}}

.map__card{position:absolute;z-index:6;pointer-events:none;width:230px;
  background:rgba(10,10,10,.95);border:1px solid var(--yellow);border-radius:8px;padding:.7rem;
  opacity:0;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease);
  backdrop-filter:blur(4px);box-shadow:0 18px 40px rgba(0,0,0,.7)}
.map__card.show{opacity:1;transform:none}
.map__card-media{position:relative;width:100%;height:118px;border-radius:5px;overflow:hidden;
  margin-bottom:.55rem;background:#15130f}
.map__card-img,.map__card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map__card-media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(8,8,8,.55))}
.map__card-body{padding:0 .25rem .15rem}
.map__card-pin{font-family:var(--font-display);font-size:1.5rem;line-height:1}
.map__card-year{font-family:var(--font-mono);color:var(--yellow);font-size:.72rem;letter-spacing:.18em;margin-top:.15rem}
.map__card-venue{margin-top:.3rem}
.map__card-guests{color:var(--muted);font-size:.82rem;margin-bottom:.7rem}

/* posters */
.posters{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;margin-top:10vh}
.poster{position:relative;padding:2.4rem 1.6rem;border:1px solid #2a2724;border-radius:4px;text-align:center;
  background:linear-gradient(170deg,#14110d,#0a0908);overflow:hidden;transition:.4s var(--ease)}
.poster::before{content:'';position:absolute;inset:0;opacity:.12;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 2px,transparent 2px 22px)}
.poster:hover{transform:translateY(-6px);border-color:var(--yellow);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.poster__city{font-family:var(--font-display);font-size:2.6rem;line-height:.9}
.poster__date{font-family:var(--font-mono);color:var(--yellow);letter-spacing:.2em;margin:.4rem 0}
.poster__venue{color:var(--muted);letter-spacing:.18em;font-size:.8rem;margin-bottom:1.6rem;text-transform:uppercase}

/* ДРОНОТУР'26 — full tour date list */
.tourlist{margin-top:8vh}
.tourlist__head{text-align:center;margin-bottom:3vh}
.tourlist__head h3{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:.02em}
.tourlist__rows{list-style:none}
.tourdate{display:grid;grid-template-columns:96px 1.4fr 1.6fr 1fr auto;align-items:center;gap:1.2rem;
  padding:1.05rem 1.2rem;border-bottom:1px solid #211e1a;transition:background .3s var(--ease),border-color .3s var(--ease)}
.tourdate:hover{background:rgba(245,197,24,.06);border-color:rgba(245,197,24,.3)}
.tourdate__d{font-family:var(--font-mono);color:var(--yellow);font-size:.92rem;letter-spacing:.06em;white-space:nowrap}
.tourdate__c{font-family:var(--font-display);font-size:1.4rem;line-height:1;text-transform:uppercase}
.tourdate__v{color:var(--cream)}
.tourdate__co{color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.tourdate--home{background:rgba(226,59,46,.07)}
.tourdate--home .tourdate__d{color:var(--red)}
.tourdate .btn--ticket{padding:.55em 1.3em;font-size:.7rem;min-height:0;justify-self:end}
.tourlist__src{text-align:center;margin-top:2rem;font-size:.82rem}
.tourlist__src a{color:var(--yellow);border-bottom:1px solid rgba(245,197,24,.4)}
@media (max-width:720px){
  .tourdate{grid-template-columns:64px 1fr auto;grid-template-areas:'d c t' 'd v t' 'd co t';gap:.2rem .8rem;padding:.9rem .4rem}
  .tourdate__d{grid-area:d;align-self:center;font-size:.82rem}
  .tourdate__c{grid-area:c;font-size:1.15rem}
  .tourdate__v{grid-area:v;font-size:.86rem}
  .tourdate__co{grid-area:co}
  .tourdate .btn--ticket{grid-area:t;align-self:center}
}

/* =================================================================
   5. MERCH
   ================================================================= */
.merch{padding:16vh 0 12vh;background:linear-gradient(180deg,#0a0807,#171009 55%,#0d0a08)}
.merch__head{text-align:center;margin-bottom:4vh}

/* =================================================================
   MERCH — editorial band-shop cards + filter tabs + donation card
   ================================================================= */
.merch__filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:4.5vh}
.mtab{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,255,255,.02);border:1px solid #2c2824;border-radius:40px;padding:.65em 1.25em;min-height:42px;
  cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.mtab:hover{color:var(--cream);border-color:rgba(245,197,24,.45)}
.mtab.is-active{color:#1a1407;background:var(--yellow);border-color:var(--yellow);font-weight:600}
.mtab--ua{border-color:rgba(43,108,255,.5)}
.mtab--ua.is-active{background:linear-gradient(90deg,#2b6cff,#ffd400);border-color:transparent;color:#0a0a0a}

.merch__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1.5rem;
  align-items:start;perspective:1400px}

.mcard{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1rem;border-radius:14px;
  background:linear-gradient(160deg,#1b1714,#0c0b0a);border:1px solid #2a2520;isolation:isolate;
  box-shadow:0 20px 46px rgba(0,0,0,.5);transform-style:preserve-3d;will-change:transform;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
/* paper / grain texture */
.mcard::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:14px;opacity:.06;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.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mcard:hover,.mcard:focus-visible{border-color:rgba(245,197,24,.5);box-shadow:0 30px 72px rgba(0,0,0,.65),0 0 42px rgba(245,197,24,.16)}

/* layered background behind the product photo */
.mcard__media{position:relative;border-radius:10px;overflow:hidden;padding:18px 14px;border:1px solid #322c25;
  background:radial-gradient(120% 95% at 28% 0,rgba(245,197,24,.12),transparent 55%),linear-gradient(160deg,#221e19,#0c0b0a)}
.mcard__media::before{content:'';position:absolute;inset:0;z-index:1;opacity:.4;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(245,197,24,.05) 0 2px,transparent 2px 13px)}

.mcard__photo{position:relative;z-index:2;width:100%;max-width:212px;margin:0 auto;aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px rgba(0,0,0,.55);transition:transform .5s var(--ease)}
.mcard__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.03)}
.mcard:hover .mcard__photo,.mcard:focus-visible .mcard__photo{transform:translateY(-8px)}   /* image lift */

/* graphic (print) cards for apparel without a photo */
.mcard__photo--graphic{display:grid;place-items:center;text-align:center;gap:.3rem;
  background:radial-gradient(120% 90% at 50% 0,#2a2520,#0b0a08);border-color:#3a342c}
.mcard__photo--graphic.mcard__photo--alt{background:radial-gradient(120% 90% at 50% 100%,#241a10,#0b0a08)}
.mcard__print{font-family:var(--font-display);font-size:2.3rem;line-height:.82;letter-spacing:.02em;color:transparent;
  -webkit-text-stroke:1.2px rgba(239,231,214,.6);text-shadow:0 0 26px rgba(245,197,24,.18)}
.mcard__print-sub{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);opacity:.8}

/* editorial details: product code, category tag, sticker */
.mcard__code{position:absolute;top:10px;left:12px;z-index:4;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;color:var(--yellow);opacity:.85}
.mcard__tag{position:absolute;top:9px;right:11px;z-index:4;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,8,8,.6);border:1px solid rgba(245,197,24,.4);border-radius:3px;padding:.32em .6em;transition:transform .35s var(--ease)}
.mcard:hover .mcard__tag,.mcard:focus-visible .mcard__tag{transform:translateY(-3px)}   /* label movement */
.mcard__sticker{position:absolute;bottom:12px;left:12px;z-index:4;font-family:var(--font-mono);font-size:.54rem;font-weight:700;letter-spacing:.08em;
  color:#fff;background:var(--red);padding:.32em .55em;border-radius:2px;transform:rotate(-7deg)}
.mcard__sticker--y{background:var(--yellow);color:#1a1407}

.mcard__foot{display:flex;flex-direction:column;gap:.5rem;padding:0 .35rem .25rem}
.mcard__name{font-family:var(--font-display);font-size:1.45rem;line-height:.95;text-transform:uppercase}
.mcard__line{width:34px;height:2px;background:var(--yellow);box-shadow:0 0 10px rgba(245,197,24,.6)}
.mcard__meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* asymmetry — vary accents so the grid isn't a flat row of identical tiles */
.mcard:nth-child(3n) .mcard__sticker{transform:rotate(6deg)}
.mcard:nth-child(2n) .mcard__media{padding-top:26px}
.mcard:nth-child(4n) .mcard__photo{margin-left:auto;margin-right:8%}
.mcard:nth-child(3n+1) .mcard__photo{margin-left:8%;margin-right:auto}
.mcard:nth-child(2n) .mcard__line{align-self:flex-end}

/* hover tilt (JS sets the transform on desktop) */
.merch__grid .mcard{backface-visibility:hidden}

/* filtered-out cards */
.mcard.is-hidden{display:none}

/* special donation card — emotional, blue/yellow, stronger hierarchy */
.mcard--donate{grid-column:span 2;justify-content:center;gap:1.1rem;padding:2.2rem 2rem;
  background:linear-gradient(140deg,rgba(43,108,255,.18),#0c0b0a 58%);border:1px solid rgba(43,108,255,.45)}
.mcard--donate:hover,.mcard--donate:focus-visible{border-color:rgba(91,157,255,.7);box-shadow:0 30px 72px rgba(0,0,0,.65),0 0 50px rgba(43,108,255,.28)}
.donate__glow{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:14px;
  background:radial-gradient(70% 95% at 100% 0,rgba(43,108,255,.3),transparent 60%),radial-gradient(70% 95% at 0 100%,rgba(245,197,24,.22),transparent 60%)}
.mcard--donate>*{position:relative;z-index:1}
.mcard__code--ua{color:#7fb0ff}
.mcard__tag--ua{position:static;align-self:flex-start;border-color:rgba(91,157,255,.6);color:#dbe7ff;background:rgba(43,108,255,.18)}
.donate__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.1rem);line-height:.95;text-transform:uppercase;
  background:linear-gradient(90deg,#6aa6ff,#ffd400);-webkit-background-clip:text;background-clip:text;color:transparent}
.donate__text{max-width:52ch;color:var(--cream);line-height:1.65;font-size:1.02rem}
.donate__btn{align-self:flex-start;background:linear-gradient(90deg,#2b6cff,#ffd400);border:none;color:#0a0a0a;font-weight:700}
.donate__btn:hover{box-shadow:0 0 34px rgba(91,157,255,.5);transform:translateY(-2px)}
@media (max-width:720px){.mcard--donate{grid-column:1/-1}}

.merch__table{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;
  perspective:1200px;padding:1rem;border-radius:10px;
  background:radial-gradient(60% 80% at 50% 0,rgba(217,122,52,.14),transparent 70%)}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding-bottom:.4rem;transition:transform .4s var(--ease);transform-style:preserve-3d}
.item>span,.item__ticket{transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.6))}
.item:hover{transform:translateZ(30px)}
.item:hover>span,.item:focus>span,.item:hover .item__ticket{transform:translateY(-14px) rotateX(8deg)}
.item__name{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;color:var(--cream);text-transform:uppercase}

/* real product photos — the items are the accent */
.item--photo{gap:1.1rem}
.item__photo{position:relative;width:100%;aspect-ratio:4/5;border-radius:10px;overflow:hidden;
  border:1px solid #2a2724;background:linear-gradient(160deg,#1c1814,#0c0a08);
  box-shadow:0 22px 48px rgba(0,0,0,.6);transition:box-shadow .45s var(--ease),transform .45s var(--ease)}
.item__photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);filter:saturate(1.02)}
.item--photo:hover .item__photo,.item--photo:focus .item__photo{box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 46px rgba(245,197,24,.22)}
.item--photo:hover .item__photo img,.item--photo:focus .item__photo img{transform:scale(1.07)}
.item--photo.img-missing .item__photo{display:grid;place-items:center}
.item--photo.img-missing .item__photo::after{content:attr(data-fallback);color:var(--muted);font-family:var(--font-mono);font-size:.7rem}

/* vinyl */
.item--vinyl{position:relative}
.item__vinyl-disc{width:120px;height:120px;border-radius:50%;
  background:repeating-radial-gradient(circle,#0c0c0c 0 2px,#1c1c1c 2px 4px);position:relative;
  transition:transform .5s var(--ease),left .5s var(--ease)}
.item__vinyl-disc::after{content:'БМБ';display:grid;place-items:center;position:absolute;inset:36%;
  border-radius:50%;background:radial-gradient(circle,var(--orange),#2a1206);
  font-family:var(--font-display);font-size:.7rem;color:#1a0c04}
.item__vinyl-sleeve{width:130px;height:130px;border-radius:4px;margin-top:-130px;margin-left:34px;
  background:linear-gradient(150deg,#2a2520,#13110e);border:1px solid #3a342c}
.item--vinyl:hover .item__vinyl-disc,.item--vinyl:focus .item__vinyl-disc{
  transform:translateX(-46px) rotate(220deg);animation:vinylspin 6s linear infinite}

/* shirt */
.item__shirt{width:130px;height:120px;background:var(--graphite-2);position:relative;
  clip-path:polygon(28% 0,72% 0,100% 22%,86% 38%,86% 100%,14% 100%,14% 38%,0 22%);
  border:1px solid #3a342c}
.item__shirt::after{content:'BUMBOX';position:absolute;top:48%;left:0;right:0;text-align:center;
  font-family:var(--font-display);font-size:1rem;color:var(--cream);letter-spacing:.1em}
.item--shirt:hover .item__shirt{transform:translateY(-14px) scaleX(1.08) rotateX(8deg)}

/* cap */
.item__cap{width:130px;height:64px;background:var(--red);border-radius:64px 64px 0 0;position:relative}
.item__cap::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:150px;height:18px;background:#7a1f18;border-radius:0 0 12px 12px}

/* ticket flip */
.item__ticket{width:150px;height:90px;position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.item--ticket:hover .item__ticket,.item--ticket:focus .item__ticket{transform:rotateY(180deg) translateY(-10px)}
.item__ticket-front,.item__ticket-back{position:absolute;inset:0;border-radius:6px;display:grid;place-items:center;
  text-align:center;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;padding:.6rem;
  backface-visibility:hidden;border:1px dashed #4a443d}
.item__ticket-front{background:linear-gradient(135deg,#f5c518,#d99a1e);color:#241a05}
.item__ticket-front b{font-family:var(--font-display);font-size:1rem}
.item__ticket-back{background:linear-gradient(135deg,#241c14,#0a0908);color:var(--cream);transform:rotateY(180deg)}

/* sticks */
.item--sticks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.6rem}
.item__stick{width:12px;height:120px;border-radius:6px;background:linear-gradient(180deg,#c8a06a,#6e4f2a);
  transform:rotate(-12deg);transform-origin:bottom}
.item__stick--2{transform:rotate(12deg)}
.item--sticks:hover .item__stick{animation:tap .5s ease}
@keyframes tap{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-22deg)}}
.item--sticks .item__name{flex-basis:100%;text-align:center}

/* backstage pass */
.item__pass{width:110px;height:140px;border-radius:6px;display:grid;place-items:center;text-align:center;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--cream);
  background:linear-gradient(160deg,#2a2520,#0e0c0a);border:1px solid var(--yellow);position:relative}
.item__pass::before{content:'';position:absolute;top:-10px;width:34px;height:10px;background:#3a342c;border-radius:3px}

.merch__note{text-align:center;font-style:italic;color:var(--cream);margin:6vh 0 4vh;font-size:1.2rem}

/* archive strip */
.archive{overflow:hidden;width:100%;padding:1rem 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.archive__row{display:flex;gap:1.2rem;width:max-content;animation:marquee 28s linear infinite}
.archive__ph{flex:none;width:200px;height:130px;border-radius:4px;display:grid;place-items:end center;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(135deg,#1c1814,#0c0a08);background-size:cover;background-position:center;
  border:1px solid #2a2520;filter:grayscale(.4);position:relative;isolation:isolate;
  padding-bottom:.5rem;text-shadow:0 1px 4px #000}
.archive__ph::after{content:'';position:absolute;inset:0;border-radius:4px;z-index:-1;
  background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72))}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =================================================================
   6. MOMENTS
   ================================================================= */
.moments{position:relative;padding:18vh 0 0;
  background:radial-gradient(125% 80% at 50% -8%,#100e0c 0%,#080706 46%,#020201 100%)}
/* subtle cinematic film grain across the whole section */
.moments::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
.moments>*{position:relative;z-index:1}

.moments__head{text-align:center;margin-bottom:7vh;padding-inline:1.2rem}
.moments__title{display:inline-block;position:relative;font-size:clamp(2.7rem,7vw,5.6rem);line-height:.92;
  letter-spacing:-.015em;margin:.3rem 0 0}
.moments__title::after{content:'';position:absolute;left:50%;bottom:-.32em;transform:translateX(-50%) rotate(-1.4deg);
  width:clamp(64px,8vw,128px);height:5px;border-radius:3px;background:var(--yellow);box-shadow:0 0 20px rgba(245,197,24,.55)}
.moments__sub{max-width:50ch;margin:1.9rem auto 0;color:var(--cream);opacity:.74;
  font-size:clamp(.92rem,1.5vw,1.08rem);line-height:1.6}

/* =========== film camera (vintage SLR, built in CSS) =========== */
.filmstage{display:none;flex-direction:column;align-items:center;gap:1.6rem;margin:1vh auto 7vh;padding-inline:1rem}
.moments--armed .filmstage{display:flex}            /* camera only exists in the interactive (JS) experience */
.filmcam{position:relative;width:clamp(260px,34vw,430px);cursor:pointer;
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.65));transition:transform .5s var(--ease),opacity .5s var(--ease)}
.filmcam__top{position:relative;width:80%;height:clamp(34px,5vw,52px);margin:0 auto -3px;display:flex;
  align-items:flex-end;justify-content:center;gap:9%;z-index:1}
.filmcam__prism{position:relative;width:34%;height:128%;border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#343436,#161617);box-shadow:inset 0 2px 3px rgba(255,255,255,.09)}
.filmcam__dial{width:14%;height:60%;border-radius:50%;
  background:radial-gradient(circle at 40% 32%,#3c3c3e,#0e0e0f);box-shadow:inset 0 -2px 3px rgba(0,0,0,.6),0 1px 1px rgba(255,255,255,.06)}
.filmcam__lever{position:absolute;left:6%;bottom:34%;width:15%;height:5px;border-radius:3px;background:#2c2c2e;transform:rotate(-13deg)}
.filmcam__shutter{position:absolute;right:11%;top:2%;width:10%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffd84a,var(--yellow));box-shadow:0 0 12px rgba(245,197,24,.55),inset 0 -2px 3px rgba(0,0,0,.3)}
.filmcam__body{position:relative;width:100%;aspect-ratio:1.64/1;border-radius:15px;
  background:linear-gradient(180deg,#3c3c3e 0 13%,#1b1b1d 13% 87%,#3c3c3e 87% 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 2px,transparent 2px 5px);
  background-blend-mode:normal,overlay;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.1),inset 0 -7px 16px rgba(0,0,0,.65),0 18px 42px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
.filmcam__lens{position:relative;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0a0d10 0 30%,#161a1f 31% 53%,#2a241b 54% 62%,#0c0c0d 63% 100%);
  box-shadow:0 0 0 6px #111,0 0 0 9px #2c2c2e,inset 0 0 22px rgba(0,0,0,.85),0 8px 18px rgba(0,0,0,.5)}
.filmcam__lens i{position:absolute;inset:25%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(120,185,215,.55),rgba(20,45,65,.6) 45%,#04060a 82%);box-shadow:inset 0 0 16px rgba(0,0,0,.9)}
.filmcam__lens b{position:absolute;left:33%;top:27%;width:15%;height:9%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(1px);transform:rotate(-22deg)}
.filmcam__badge{position:absolute;left:7%;bottom:10%;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.18em;color:var(--yellow);opacity:.8}
.filmcam__brand{position:absolute;right:7%;top:11%;font-family:var(--font-display);font-size:clamp(.7rem,1.1vw,.95rem);letter-spacing:.04em;color:#e7e2d6;opacity:.85}
/* viewfinder eyepiece — the click target */
.filmcam__vf{position:absolute;left:50%;top:-44%;transform:translateX(-50%);width:clamp(40px,5.4vw,62px);aspect-ratio:1;
  border-radius:50%;border:3px solid #3a3a3c;cursor:pointer;z-index:3;padding:0;
  background:radial-gradient(circle at 42% 36%,#1b232a,#06090c 72%);
  box-shadow:inset 0 0 10px rgba(0,0,0,.9),0 0 0 4px rgba(0,0,0,.4);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.filmcam__vf-glint{position:absolute;left:32%;top:26%;width:22%;height:22%;border-radius:50%;background:radial-gradient(circle,rgba(150,210,235,.75),transparent 70%)}
.filmcam:hover .filmcam__vf,.filmcam__vf:hover,.filmcam__vf:focus-visible{border-color:var(--yellow);
  box-shadow:inset 0 0 12px rgba(0,0,0,.8),0 0 24px rgba(245,197,24,.6),0 0 0 4px rgba(245,197,24,.28)}
.filmcam__pulse{position:absolute;left:50%;top:-44%;width:clamp(40px,5.4vw,62px);aspect-ratio:1;border-radius:50%;
  border:2px solid var(--yellow);pointer-events:none;z-index:2;transform:translate(-50%,0);animation:vfPulse 2s ease-out infinite}
@keyframes vfPulse{0%{opacity:.7;transform:translate(-50%,0) scale(1)}70%{opacity:0;transform:translate(-50%,0) scale(2.2)}100%{opacity:0}}
.moments--revealed .filmcam__pulse{display:none}
.filmcam__hint{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);text-align:center}
.filmcam__hint span{position:relative;padding-left:1.5em}
.filmcam__hint span::before{content:'▲';position:absolute;left:0;top:-.05em;color:var(--yellow);animation:bob 1.8s ease-in-out infinite}
.moments--revealed .filmcam{transform:scale(.92) translateY(-8px);opacity:.85}
.moments--revealed .filmcam__hint{opacity:0;transition:opacity .4s;pointer-events:none}

/* ---- developed photos: a controlled pile on a dark table (positioned by JS) ---- */
.scatter{position:relative;width:min(1180px,92vw);min-height:36vh;margin:0 auto;padding:0 0 4vh}
.photo{position:absolute;top:0;left:0;will-change:transform,opacity}
.photo:hover{z-index:40!important}

/* shutter blades + flash (created on <body>; fixed over the viewport during the click) */
.cam-shutter{position:fixed;inset:0;z-index:115;pointer-events:none;display:none}
.cam-shutter__t,.cam-shutter__b{position:absolute;left:0;right:0;height:51%;background:#050403}
.cam-shutter__t{top:0}.cam-shutter__b{bottom:0}
.cam-flash{position:fixed;inset:0;z-index:116;pointer-events:none;display:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 42%,#fff,rgba(255,255,255,.85) 45%,rgba(255,255,255,.5))}

/* polaroid card — cream stock with paper texture on the FRAME only + realistic stacked shadow */
.photo__card{position:relative;display:block;border-radius:4px;padding:7% 7% 18%;cursor:pointer;
  transform:perspective(820px) rotate(var(--rot,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-origin:50% 64%;
  background-color:#f2ead8;background-size:120px 120px,cover,cover;background-blend-mode:multiply,screen,normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.35'/%3E%3C/svg%3E"),
    radial-gradient(130% 120% at 26% 8%,rgba(255,255,255,.5),rgba(255,255,255,0) 50%),
    linear-gradient(150deg,#f6efdd,#e7dcc4);
  box-shadow:0 1px 1px rgba(0,0,0,.4),0 9px 18px rgba(0,0,0,.42),0 24px 44px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.34,1.34,.5,1),box-shadow .45s var(--ease)}
.photo__img{position:relative;z-index:1;display:block}
img.photo__img{width:100%;height:auto;background:#16130f}   /* real <img> → whole photo, never cropped */
.photo__cap{position:absolute;left:7%;right:7%;bottom:5%;z-index:3;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:#2c2820;
  font-family:'Caveat','Segoe Script',cursive;font-size:clamp(.92rem,1.5vw,1.2rem);line-height:1}

/* hover: slight lift, tiny extra tilt, soft glow */
.photo__card:hover{transform:perspective(820px) rotate(var(--rot,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-12px) scale(1.04);z-index:30;
  box-shadow:0 4px 8px rgba(0,0,0,.4),0 22px 40px rgba(0,0,0,.55),0 42px 82px rgba(0,0,0,.5),0 0 38px rgba(245,197,24,.16)}
.photo__card:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}

/* video tiles */
.photo__img--video{aspect-ratio:var(--ar,.56);overflow:hidden;background:#0c0b0a}
.photo__img--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0c0b0a}
.photo__img--video::after{content:'▶';position:absolute;left:8px;bottom:8px;z-index:2;width:1.6em;height:1.6em;
  display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:#1a1510;font-size:.6rem;
  box-shadow:0 2px 6px rgba(0,0,0,.5)}

/* ---- scrapbook decorations: tape, date stamp, label, yellow sticker ---- */
.photo__tape{position:absolute;z-index:4;width:33%;max-width:72px;height:25px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,250,235,.4),rgba(226,216,193,.32));box-shadow:0 2px 5px rgba(0,0,0,.22);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.photo__tape--l{top:-11px;left:5%;transform:rotate(-25deg)}
.photo__tape--r{top:-11px;right:5%;transform:rotate(23deg)}
.photo__tape--b{bottom:13%;right:-9px;width:24%;transform:rotate(-56deg)}
.photo__stamp{position:absolute;z-index:4;right:9%;top:8%;pointer-events:none;transform:rotate(-11deg);
  font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em;color:rgba(176,46,38,.82);
  border:1.5px solid rgba(176,46,38,.66);border-radius:3px;padding:.18em .42em;mix-blend-mode:multiply}
.photo__label{position:absolute;z-index:4;left:7%;bottom:20%;pointer-events:none;transform:rotate(-3deg);
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.16em;color:#3a342a;background:#e6dabd;
  padding:.24em .5em;border-radius:2px;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.photo__sticker{position:absolute;z-index:4;right:-9px;bottom:23%;width:22px;height:22px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle at 35% 30%,#ffd84a,var(--yellow) 70%);
  box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.5)}

/* responsive column counts — clean, no messy overlap on small screens */
@media (max-width:1100px){.scatter{column-count:3}}
@media (max-width:760px){.scatter{column-count:2;column-gap:14px}.photo{margin-bottom:16px}.photo--tuck{margin-top:0}}
@media (max-width:430px){.scatter{column-count:1}.photo__card{padding:6% 6% 16%}}

/* «заставка» video backdrop behind the quote + finale */
.moments__feature{position:relative;isolation:isolate}
.moments__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;filter:saturate(1.06) brightness(1.05)}
.moments__feature::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#050505,rgba(5,5,5,.3) 18%,rgba(5,5,5,.3) 60%,#050505)}
.moments__quote{position:relative;z-index:1;text-align:center;font-family:var(--font-display);
  font-size:clamp(1.6rem,4.5vw,3.4rem);line-height:1.05;color:var(--cream);
  max-width:18ch;margin:0 auto;padding:14vh 1rem;text-transform:uppercase;
  text-shadow:0 2px 26px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.7)}

.moments__finale{position:relative;z-index:1;height:120vh}
.crowd{position:sticky;top:0;height:100vh;display:flex;flex-wrap:wrap;align-content:flex-end;
  justify-content:center;gap:4px 7px;padding:30vh 3vw 0;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 8%,#000 45%);
  mask:linear-gradient(180deg,transparent 8%,#000 45%)}
.crowd__dot{width:7px;height:20px;border-radius:5px 5px 0 0;background:#100e0b;
  position:relative;transform:translateY(40px);opacity:0;transition:.7s var(--ease)}
.crowd__dot::after{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#ffe27a;
  opacity:calc(.85 * var(--lighter,1));
  box-shadow:0 0 9px 2px rgba(245,197,24,.9)}
.crowd.lit .crowd__dot{transform:none;opacity:1}
.crowd.lit .crowd__dot::after{animation:lighterFlicker 3.5s ease-in-out infinite}
@keyframes lighterFlicker{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.moments__thanks{position:absolute;top:32%;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--font-display);font-size:clamp(1.6rem,5vw,3.6rem);text-transform:uppercase;
  color:var(--cream);text-shadow:0 0 40px rgba(245,197,24,.4);
  opacity:0;transform:translateY(20px);transition:1s var(--ease)}
.moments__thanks.in{opacity:1;transform:none}

/* =================================================================
   7. FOOTER
   ================================================================= */
.footer{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12vh 1rem 6vh;background:#040404;position:relative;overflow:hidden}
.footer__beam{position:absolute;top:-10%;left:50%;transform:translateX(-50%);pointer-events:none;
  width:30vw;height:90vh;background:linear-gradient(180deg,rgba(245,197,24,.16),transparent 70%);
  filter:blur(30px);mix-blend-mode:screen}
.footer__logo{font-family:var(--font-display);font-size:clamp(3.5rem,18vw,15rem);line-height:.8;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(245,197,24,.4);
  text-shadow:0 0 60px rgba(245,197,24,.3);animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{text-shadow:0 0 50px rgba(245,197,24,.2)}50%{text-shadow:0 0 90px rgba(245,197,24,.45)}}
.footer__sub{color:var(--muted);font-family:var(--font-mono);letter-spacing:.24em;
  text-transform:uppercase;font-size:.8rem;margin-top:1rem}
.footer__social{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:3rem 0}
.ctrl--social{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.2em;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase}
.ctrl--social span{color:var(--yellow)}
.ctrl--social:hover{transform:translateY(3px);box-shadow:0 0 0 #0e0d0b}
.footer__complete{display:flex;align-items:center;gap:1.2rem;width:min(560px,90vw);margin-bottom:1.6rem}
.footer__rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--muted),transparent)}
.footer__track{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em;color:var(--cream)}
.footer__again{font-family:var(--font-mono);background:transparent;border:1px solid var(--yellow);
  color:var(--yellow);padding:1em 2em;border-radius:3px;letter-spacing:.18em;text-transform:uppercase;
  transition:.3s var(--ease)}
.footer__again:hover{background:var(--yellow);color:#1a1407;box-shadow:0 0 40px rgba(245,197,24,.5)}
.footer__years{margin-top:3rem;font-family:var(--font-mono);letter-spacing:.4em;color:var(--muted);font-size:.8rem}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:860px){
  .doc-scene,.doc-scene--rev{grid-template-columns:1fr;gap:1.6rem}
  .doc-scene--rev .scene__media{order:0}
  .scene__body{max-width:none}
  .album{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero{min-height:100svh}
  .hero__inner{position:static;min-height:100svh}
  .deco-label{display:none}
  .boombox{transform:none;width:90vw}
  .boombox__body{grid-template-columns:1fr 1.2fr 1fr}
  .albums__scroller{height:auto}
  .albums__sticky{position:static;height:auto;padding:4vh 0}
  .albums__track{flex-direction:column;padding-inline:0;gap:8vh;transform:none !important}
  .album{transform:none;opacity:1;width:90vw}
  .album.is-center .album__vinyl{animation:none}
  .album__vinyl{left:62%}
  .albums__hint{display:none}
  .timeline__list li{min-width:70px}
  .scatter{column-count:2;column-gap:14px;padding:1vh 3vw 4vh}
  .photo{margin-bottom:16px}
  .photo--tuck{margin-top:0}
  .doc-stage{height:auto}
  .doc-pin{position:static;height:auto;overflow:visible}
  .doc-track{flex-direction:column;padding-inline:0;gap:8vh;transform:none !important}
  .doc-scene{flex-basis:auto;width:auto}
  .doc-hint,.doc-progress{display:none}
  /* tour map: keep Europe undistorted; finger-friendly city pins */
  .map{width:96vw}
  .city{font-size:.74rem;padding:20px .4em .3em;min-height:44px}
  .city::before{width:15px;height:15px}
  /* compact card so it always fits inside the small mobile map */
  .map__card{width:168px;padding:.5rem}
  .map__card-media{height:66px;margin-bottom:.4rem}
  .map__card-pin{font-size:1.2rem}
  .map__card-year{font-size:.64rem}
  .map__card-venue{font-size:.82rem;margin-top:.2rem}
  .map__card-guests{font-size:.72rem;margin-bottom:.45rem}
  .map__card .btn--mini{padding:.4em .9em;font-size:.64rem}
}

/* reduced motion — no scroll-jacking, stacked static layout */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .hero{min-height:100svh}
  .hero__inner{position:static;min-height:100svh}
  .hero-photo,.hero-intro{display:none}      /* zoom-photo effect is motion-only */
  .deco-label{display:none}
  /* History: unpin the horizontal timeline → vertical list */
  .doc-stage{height:auto}
  .doc-pin{position:static;height:auto;overflow:visible}
  .doc-track{flex-direction:column;padding-inline:0;gap:6vh;transform:none !important}
  .doc-scene{flex-basis:auto;width:auto;grid-template-columns:1fr}
  .doc-scene--rev .scene__media{order:0}
  /* Albums: unpin the carousel → vertical list, all covers visible */
  .albums__scroller{height:auto}
  .albums__sticky{position:static;height:auto;padding:4vh 0}
  .albums__track{flex-direction:column;padding-inline:0;gap:8vh;transform:none !important}
  .album{transform:none;opacity:1;width:min(360px,90vw);margin-inline:auto}
  .albums__hint{display:none}
}

/* =================================================================
   MOTION LAYER — loader, cursor light, premium scroll/hover effects
   Activated only when js-motion is set (graceful fallback otherwise).
   ================================================================= */

/* ---- cinematic page loader ---- */
.loader{position:fixed;inset:0;z-index:200;background:#050505;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}
.loader__logo{font-family:var(--font-display);font-size:clamp(2.6rem,9vw,6rem);letter-spacing:.06em;
  color:transparent;-webkit-text-stroke:1.4px rgba(245,197,24,.85);text-shadow:0 0 44px rgba(245,197,24,.3);opacity:0}
.loader__bar{display:block;width:min(220px,52vw);height:2px;background:rgba(245,197,24,.16);border-radius:2px;overflow:hidden;opacity:0}
.loader__bar i{display:block;height:100%;width:0;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
.loader.is-done{display:none}
.js-motion .intro{display:none}                 /* the new loader replaces the old noise intro */

/* ---- cursor-follow light (desktop only) ---- */
.cursor-light{position:fixed;top:0;left:0;width:520px;height:520px;z-index:1;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(245,197,24,.12),rgba(245,197,24,.04) 36%,transparent 68%)}
.js-motion .cursor-light.is-on{opacity:1}
@media (max-width:1024px),(pointer:coarse){.cursor-light{display:none!important}}

/* ---- hero: GSAP owns the entrance under js-motion (rest state = visible) ---- */
.js-motion .hero__eyebrow,.js-motion .hero__title,.js-motion .hero__lead,
.js-motion .hero__cta,.js-motion .scroll-cue{animation:none;opacity:1}
.hero__char,.hero__word{display:inline-block;will-change:transform,opacity}
.hero__word{white-space:pre}

/* ---- nav: glassmorphism on scroll + sliding indicator ---- */
.topnav__list{position:relative}
.topnav__indicator{position:absolute;z-index:0;top:50%;left:0;height:2.2em;width:0;transform:translateY(-50%);
  border-radius:5px;background:rgba(245,197,24,.16);box-shadow:inset 0 0 0 1px rgba(245,197,24,.28);opacity:0;pointer-events:none}
.js-motion .topnav{transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease)}
.js-motion .topnav.scrolled{background:rgba(10,10,9,.5);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.js-motion .topnav.scrolled .topnav__item.is-active{background:transparent}   /* indicator replaces the tint */
@media (max-width:820px){.topnav__indicator{display:none}}

/* ---- magnetic buttons (GSAP animates x/y transforms) ---- */
.js-motion .album__open,.js-motion .poster .btn--solid,
.js-motion .topnav__cta,.js-motion .ctrl--social{will-change:transform}

/* ---- albums: clip-path reveal + 3D tilt + glow ---- */
.js-motion [data-reveal="album"]{clip-path:inset(0 -60% 100% 0)}  /* right extended so the vinyl is never clipped */
.js-motion .album__cover{transition:transform .45s var(--ease),box-shadow .45s var(--ease);transform-style:preserve-3d}
.js-motion .album.tilt .album__cover{box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 46px rgba(245,197,24,.2)}

/* ---- concerts/tours: poster reveal + bg parallax + glow ticket ---- */
.tours{overflow:hidden}
.tours__parallax{position:absolute;inset:-10% 0 0;z-index:0;pointer-events:none;opacity:.14;
  background:url("../assets/concert-festival.jpg") center/cover;filter:grayscale(.45) blur(1px)}
.tours>*{position:relative;z-index:1}
.js-motion [data-reveal="poster"]{clip-path:inset(0 0 100% 0);transform:translateY(28px)}
.poster .btn--solid{transition:box-shadow .35s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.poster:hover .btn--solid{box-shadow:0 0 28px rgba(245,197,24,.55)}

/* ---- history documentary HUD: active year + progress line ---- */
/* year + index sit at the BOTTOM next to the progress line — never over the card titles */
.doc-hud{position:absolute;left:50%;bottom:calc(6vh + 14px);transform:translateX(-50%);z-index:6;display:flex;
  align-items:baseline;gap:.8rem;font-family:var(--font-mono);pointer-events:none;white-space:nowrap}
.doc-hud__year{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.4rem);color:var(--yellow);line-height:1;
  text-shadow:0 0 22px rgba(245,197,24,.4)}
.doc-hud__count{font-size:.7rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.doc-hud__count b{color:var(--cream)}
.doc-progress{position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);z-index:6;width:min(460px,68vw);height:4px;
  background:rgba(245,197,24,.16);border-radius:3px;overflow:hidden;pointer-events:none}
.doc-progress i{display:block;height:100%;width:8%;background:var(--yellow);box-shadow:0 0 10px var(--yellow);border-radius:3px}
/* page-transition ticks — segment the slider so each scene reads as a page */
.doc-progress__tick{position:absolute;top:-1px;bottom:-1px;width:2px;background:#050505;transform:translateX(-1px)}
/* one-time clip-path reveal of scene media (revealed when the section enters) */
.js-motion .doc-scene .scene__media,.js-motion .doc-scene .scene__video,
.js-motion .doc-scene .scene__videos,.js-motion .doc-scene .scene__stack,.js-motion .doc-scene .bandphoto{
  clip-path:inset(0 0 0 100%);transition:clip-path .9s var(--ease)}
.js-motion .doc-scene.media-in .scene__media,.js-motion .doc-scene.media-in .scene__video,
.js-motion .doc-scene.media-in .scene__videos,.js-motion .doc-scene.media-in .scene__stack,
.js-motion .doc-scene.media-in .bandphoto{clip-path:inset(0 0 0 0%)}

/* ---- gallery (Moments): photos hidden until the shutter fires; GSAP flies them out ---- */
.moments--armed:not(.moments--revealed) .photo{opacity:0}
.moments--armed:not(.moments--revealed) .scatter{height:0!important;min-height:0!important;overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(4,4,4,0);pointer-events:none;transition:background .4s ease}
.lightbox.open{background:rgba(4,4,4,.95);pointer-events:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lightbox__pic{position:fixed;display:none;object-fit:contain;border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.7);will-change:top,left,width,height}
.lightbox__cap{position:fixed;bottom:3.4vh;left:0;right:0;z-index:2;text-align:center;opacity:0;pointer-events:none;
  font-family:'Caveat','Segoe Script',cursive;font-size:1.5rem;color:var(--cream);transition:opacity .3s .2s}
.lightbox.open .lightbox__cap{opacity:.92}
.lightbox__close{position:fixed;top:4vh;right:5vw;z-index:2;background:none;border:1px solid var(--cream);color:var(--cream);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.2em;padding:.6em 1em;border-radius:3px;opacity:0;transition:opacity .3s}
.lightbox.open .lightbox__close{opacity:1;transition-delay:.25s}
.lightbox__nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:54px;height:54px;border-radius:50%;
  background:rgba(20,18,16,.5);border:1px solid rgba(239,231,214,.3);color:var(--cream);font-size:1.5rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .3s,background .3s,border-color .3s;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox__nav--prev{left:max(2vw,16px)}.lightbox__nav--next{right:max(2vw,16px)}
.lightbox.open .lightbox__nav{opacity:.85}
.lightbox__nav:hover,.lightbox__nav:focus-visible{opacity:1;background:rgba(245,197,24,.18);border-color:var(--yellow);outline:none}
@media (max-width:600px){.lightbox__nav{width:44px;height:44px;font-size:1.2rem}}

/* ---- footer: cinematic fade + parallax + social hover ---- */
.js-motion [data-reveal="footer"]{opacity:0;transform:translateY(46px) scale(.98)}
.ctrl--social span{display:inline-block;transition:transform .3s var(--ease)}
.ctrl--social:hover span{transform:translateX(3px) scale(1.18)}

/* ---- mobile: history is stacked (no is-center), so never mask its media ---- */
@media (max-width:720px){
  .js-motion .doc-scene .scene__media,.js-motion .doc-scene .scene__video,.js-motion .doc-scene .scene__videos,
  .js-motion .doc-scene .scene__stack,.js-motion .doc-scene .bandphoto{clip-path:none!important}
  .js-motion .doc-scene .scene__body{transform:none!important}
}

/* ---- reduced motion: neutralise the entire motion layer ---- */
@media (prefers-reduced-motion:reduce){
  .loader,.cursor-light,.tours__parallax,.doc-hud,.doc-progress{display:none!important}
  .js-motion [data-reveal],.js-motion .photo,
  .js-motion .doc-scene .scene__media,.js-motion .doc-scene .scene__video,.js-motion .doc-scene .scene__videos,
  .js-motion .doc-scene .scene__stack,.js-motion .doc-scene .bandphoto{
    clip-path:none!important;opacity:1!important;transform:none!important}
}