/* ============================================================
   CLUB KRING — IBIZA PARADISE
   Sunset → disco-night immersive one-pager
   ============================================================ */

@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-300.ttf") format("truetype");
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-400.ttf") format("truetype");
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-500.ttf") format("truetype");
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-600.ttf") format("truetype");
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-700.ttf") format("truetype");
}
@font-face{
  font-family:"Syne";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("assets/fonts/syne-600.ttf") format("truetype");
}
@font-face{
  font-family:"Syne";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("assets/fonts/syne-700.ttf") format("truetype");
}
@font-face{
  font-family:"Syne";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("assets/fonts/syne-800.ttf") format("truetype");
}

:root{
  --night:    #0e0512;
  --night-2:  #1a0820;
  --plum:     #2a0d2e;
  --sun:      #ff7a1a;
  --sun-deep: #ff5a1e;
  --gold:     #ffc24d;
  --gold-lt:  #ffe6a8;
  --coral:    #ff4f3c;
  --magenta:  #ff2e88;
  --violet:   #9b5cff;
  --cyan:     #2fe6ff;
  --cream:    #fff3e8;
  --cream-dim:#e9cfc2;

  --ff-display: "Syne", system-ui, sans-serif;
  --ff-text:    "Space Grotesk", system-ui, sans-serif;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  width:100%; max-width:100%; overflow-x:hidden;
}
body{
  margin:0;
  background-color:#0e0512;
  background-image:linear-gradient(180deg,
    #5a1e10 0%,
    #6e1a2e 14%,
    #7a1850 30%,
    #5e1860 46%,
    #3d1566 62%,
    #20103e 78%,
    #0e0512 100%);
  background-attachment:fixed;
  color:var(--cream);
  font-family:var(--ff-text);
  font-size:18px;
  line-height:1.6;
  overflow-x:hidden;
  max-width:100%;
  overscroll-behavior-x:none;
  -webkit-font-smoothing:antialiased;
}
@supports (overflow:clip){
  html,body{ overflow-x:clip; }
}
img{ display:block; max-width:100%; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--magenta); color:#fff; }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:4px;
}
.skip-link{
  position:fixed; left:16px; top:14px; z-index:100;
  padding:11px 16px; border-radius:999px;
  color:#061014; background:var(--cyan);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- Animated background ---------- */
.bg-stage{
  position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 2%, rgba(255,182,80,.55), transparent 60%),
    radial-gradient(70% 55% at 50% 104%, rgba(120,40,160,.45), transparent 70%);
}
.bg-mesh{
  position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(34% 40% at 18% 24%, rgba(255,150,50,.5), transparent 62%),
    radial-gradient(36% 42% at 84% 30%, rgba(255,52,140,.45), transparent 62%),
    radial-gradient(46% 48% at 50% 92%, rgba(150,80,255,.5), transparent 64%),
    radial-gradient(32% 38% at 80% 78%, rgba(47,210,255,.34), transparent 62%);
  filter:blur(40px) saturate(1.25);
  animation:meshDrift 26s ease-in-out infinite alternate;
  opacity:.95;
}
@keyframes meshDrift{
  0%  { transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  50% { transform:translate3d(4%,3%,0)   scale(1.12) rotate(4deg); }
  100%{ transform:translate3d(-2%,4%,0)  scale(1.08) rotate(-3deg); }
}
.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ember canvas */
#embers{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }
.eyebrow{
  font-family:var(--ff-text);
  font-weight:600;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-size:clamp(11px,1.05vw,14px);
  color:var(--gold-lt);
}
.tracked{ letter-spacing:.34em; text-transform:uppercase; }

/* ---------- Top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);
  transform:translateY(-110%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), background .4s;
  background:linear-gradient(180deg, rgba(14,5,18,.9), rgba(14,5,18,0));
  backdrop-filter:blur(8px);
}
.topbar.show{ transform:translateY(0); }
.topbar .mark{
  font-family:var(--ff-display); font-weight:800;
  letter-spacing:.04em; font-size:18px; color:var(--cream);
  display:flex; gap:.5em; align-items:center;
}
.topbar .mark b{ color:var(--gold); }
.topbar-actions{ display:flex; gap:10px; align-items:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-text); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  font-size:14px; line-height:1;
  padding:15px 26px; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s, box-shadow .35s, background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-sun{
  color:#2a0a04;
  background:linear-gradient(135deg,var(--gold) 0%, var(--sun) 55%, var(--coral) 100%);
  box-shadow:0 0 0 0 rgba(255,122,26,.6), 0 10px 34px -10px rgba(255,94,30,.9);
}
.btn-sun:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 0 36px 2px rgba(255,140,40,.6), 0 16px 40px -10px rgba(255,94,30,.9); }
.btn-ghost{
  color:var(--cream); border-color:rgba(255,243,232,.4);
  background:rgba(255,243,232,.04);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); box-shadow:0 0 24px -4px rgba(255,194,77,.5); }
.btn-sm{ padding:11px 18px; font-size:12px; }

/* audio toggle */
.audio-toggle{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-text); font-weight:600; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1.5px solid rgba(255,243,232,.20);
  background:rgba(14,5,18,.34); color:rgba(255,243,232,.52);
  opacity:.72;
  transition:border-color .3s,color .3s,background .3s,opacity .3s;
}
.audio-toggle:hover{ border-color:rgba(255,243,232,.34); color:rgba(255,243,232,.72); opacity:.84; }
.audio-toggle.on{ border-color:var(--cyan); color:var(--cyan); opacity:1; background:rgba(14,5,18,.5); }
.audio-toggle.on:hover{ border-color:var(--cyan); color:var(--cyan); }
.eq{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.eq i{ width:3px; height:4px; background:currentColor; border-radius:1px; }
.audio-toggle:not(.on) .eq i{ animation:none !important; height:4px; }
.audio-toggle.on .eq i{ animation:eq .9s ease-in-out infinite; }
.audio-toggle.on .eq i:nth-child(2){ animation-delay:.18s; }
.audio-toggle.on .eq i:nth-child(3){ animation-delay:.36s; }
.audio-toggle.on .eq i:nth-child(4){ animation-delay:.10s; }
@keyframes eq{ 0%,100%{height:4px;} 50%{height:14px;} }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(52px,7vh,88px) var(--gutter) clamp(78px,11vh,124px);
  text-align:center; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(150vw,1500px); height:min(120vh,1000px); z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,190,90,.7), rgba(255,120,45,.4) 38%, rgba(232,40,110,.22) 60%, transparent 78%);
  filter:blur(6px);
  animation:breathe 7s ease-in-out infinite;
}
.hero > *{ position:relative; z-index:1; }
.hero-eyebrow{ margin-bottom:clamp(20px,4vh,38px); opacity:0; }
.hero-eyebrow .dot{ color:var(--magenta); }

/* portal holding the poster */
.portal{
  position:relative;
  width:auto; flex:0 0 auto;
  display:flex; justify-content:center;
  perspective:1200px;
}
.portal-rays{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:190%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg,
     rgba(255,194,77,0) 0deg, rgba(255,194,77,.30) 10deg, rgba(255,194,77,0) 20deg,
     rgba(255,122,26,0) 40deg, rgba(255,122,26,.22) 50deg, rgba(255,122,26,0) 60deg,
     rgba(255,46,136,0) 90deg, rgba(255,46,136,.18) 100deg, rgba(255,46,136,0) 110deg,
     rgba(255,194,77,0) 140deg, rgba(255,194,77,.26) 150deg, rgba(255,194,77,0) 160deg,
     rgba(255,122,26,0) 200deg, rgba(255,122,26,.2) 210deg, rgba(255,122,26,0) 220deg,
     rgba(255,46,136,0) 260deg, rgba(255,46,136,.16) 270deg, rgba(255,46,136,0) 280deg,
     rgba(255,194,77,0) 320deg, rgba(255,194,77,.24) 330deg, rgba(255,194,77,0) 340deg);
  border-radius:50%;
  filter:blur(2px);
  -webkit-mask-image:radial-gradient(closest-side, #000 35%, transparent 78%);
          mask-image:radial-gradient(closest-side, #000 35%, transparent 78%);
  animation:spin 60s linear infinite;
  opacity:.85;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }
.portal-glow{
  position:absolute; inset:-14% -10%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,140,40,.55), rgba(255,94,30,.18) 55%, transparent 72%);
  filter:blur(10px);
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.65; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
.poster-frame{
  position:relative; z-index:2; border-radius:14px; overflow:hidden;
  width:fit-content; margin-inline:auto;
  box-shadow:
    0 0 0 1px rgba(255,210,150,.25),
    0 0 60px -8px rgba(255,122,26,.65),
    0 30px 80px -24px rgba(0,0,0,.9);
  transition:transform .4s ease;
  will-change:transform;
}
.poster-frame picture{ display:block; }
.poster-frame img{ height:min(50vh, 520px); width:auto; max-width:86vw; display:block; margin-inline:auto; }
.poster-sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 38%, rgba(255,243,200,.28) 50%, transparent 62%);
  transform:translateX(-130%);
  animation:sheen 7s ease-in-out 1.5s infinite;
}
@keyframes sheen{ 0%{ transform:translateX(-130%);} 22%,100%{ transform:translateX(130%);} }

.hero-meta{
  margin-top:clamp(20px,3.2vh,38px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0;
}
.hero-date{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(26px,5.2vw,52px); line-height:1; letter-spacing:.01em;
  color:var(--cream);
  text-shadow:0 2px 30px rgba(255,122,26,.45);
}
.hero-date em{ font-style:normal; color:var(--gold); }
.hero-sub{
  font-family:var(--ff-text); letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(12px,1.5vw,15px); color:var(--cream-dim);
}
.countdown{ display:flex; gap:clamp(10px,2.4vw,22px); align-items:flex-start; }
.cd-cell{ display:flex; flex-direction:column; align-items:center; min-width:clamp(46px,8vw,72px); }
.cd-n{
  font-family:var(--ff-display); font-weight:800; line-height:1;
  font-size:clamp(30px,5.6vw,56px); color:var(--gold);
  text-shadow:0 0 26px rgba(255,194,77,.45);
  font-variant-numeric:tabular-nums;
}
.cd-l{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-dim); margin-top:6px; }
.hero-tags{
  display:flex; flex-wrap:wrap; gap:7px 0; justify-content:center;
  font-size:clamp(11px,1.2vw,13px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-lt);
}
.hero-tags span{ padding:0 .9em; position:relative; }
.hero-tags span+span::before{ content:"·"; position:absolute; left:-.15em; color:var(--magenta); }
.hero-cta{
  display:flex; flex-wrap:nowrap; gap:14px; justify-content:center; align-items:center;
  margin-top:8px; margin-bottom:clamp(18px,4vh,42px);
  position:relative; z-index:6;
}
.hero-cta .btn,.hero-cta .audio-toggle{
  min-height:44px;
}

.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--cream-dim);
  opacity:.8;
}
.scroll-cue .line{ width:1px; height:38px; background:linear-gradient(var(--gold), transparent); animation:cue 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }
@media (max-height:820px){
  .scroll-cue{ display:none; }
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section-pad{ padding-block:clamp(70px,12vh,140px); }
.kicker{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
.kicker .num{
  font-family:var(--ff-text); font-weight:700; font-size:13px;
  letter-spacing:.2em; color:var(--magenta); white-space:nowrap;
}
.kicker .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(255,46,136,.6), transparent); }

.h2{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(34px,7vw,82px); line-height:.96; letter-spacing:-.01em;
  margin:0 0 .35em;
  text-wrap:balance;
}
.h2 .glow{ color:var(--gold); text-shadow:0 0 40px rgba(255,194,77,.5); }

/* glitch heading */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch::before{ color:var(--cyan); transform:translate(-2px,0); mix-blend-mode:screen; opacity:.0; }
.glitch::after{ color:var(--magenta); transform:translate(2px,0); mix-blend-mode:screen; opacity:.0; }
.glitch.go::before{ animation:glB 2.6s steps(2,end) infinite; }
.glitch.go::after{ animation:glA 3.1s steps(2,end) infinite; }
@keyframes glA{ 0%,93%,100%{opacity:0; clip-path:inset(0 0 100% 0);} 94%{opacity:.9; transform:translate(3px,-1px); clip-path:inset(20% 0 40% 0);} 97%{opacity:.7; transform:translate(-2px,1px); clip-path:inset(60% 0 10% 0);} }
@keyframes glB{ 0%,90%,100%{opacity:0; clip-path:inset(0 0 100% 0);} 92%{opacity:.9; transform:translate(-3px,1px); clip-path:inset(10% 0 60% 0);} 95%{opacity:.6; transform:translate(2px,-1px); clip-path:inset(50% 0 20% 0);} }

.lead{ font-size:clamp(18px,2.1vw,23px); line-height:1.55; color:var(--cream); }
.muted{ color:var(--cream-dim); }

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* ============================================================
   STORY (ode)
   ============================================================ */
.story{ text-align:center; }
.story .wrap{ max-width:900px; }
.story-quote{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(26px,4.4vw,50px); line-height:1.08; letter-spacing:-.01em;
  margin:.2em 0 .6em; text-wrap:balance;
}
.story-quote .sun{ color:var(--sun); }
.story-quote .mag{ color:var(--magenta); }
.story-lineage{
  display:flex; gap:10px 18px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin:38px 0 0; font-family:var(--ff-text);
  letter-spacing:.18em; text-transform:uppercase; font-size:clamp(12px,1.5vw,15px);
}
.story-lineage b{ color:var(--gold); font-weight:700; }
.story-lineage s{ text-decoration:none; color:var(--cream-dim); }
.story-lineage .now{
  color:var(--gold); font-weight:800; letter-spacing:.22em;
  text-shadow:0 0 26px rgba(255,194,77,.45);
}

/* ============================================================
   PHOTO MARQUEE
   ============================================================ */
.marquee{
  position:relative; padding-block:clamp(30px,5vh,56px);
  overflow:hidden; --dur:48s;
  width:100%; max-width:100vw;
  contain:paint;
  overscroll-behavior-x:contain;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:14vw; z-index:3; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--night),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--night),transparent); }
.marquee-track{
  display:flex; gap:18px; width:max-content; min-width:max-content;
  animation:scrollX var(--dur) linear infinite;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollX{ to{ transform:translate3d(-50%,0,0);} }
.ph{
  position:relative; flex:0 0 auto;
  width:clamp(220px,26vw,330px); height:clamp(150px,18vw,230px);
  border-radius:12px; overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,210,150,.12);
  transform:rotate(var(--r,0deg));
  contain:paint;
}
.ph img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
  transition:filter .5s, transform .8s;
  transform:scale(1.04);
}
.ph::after{
  content:""; position:absolute; inset:0; mix-blend-mode:color;
  background:linear-gradient(135deg,var(--sun),var(--magenta) 60%, var(--violet));
  opacity:.62; transition:opacity .5s;
}
.ph:hover img{ filter:saturate(1.3) contrast(1.08); transform:scale(1.0); }
.ph:hover::after{ opacity:0; }
.ph .tag{
  position:absolute; left:10px; bottom:9px; z-index:4;
  font-family:var(--ff-text); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.8);
}
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .marquee{
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .marquee::-webkit-scrollbar{ display:none; }
  .ph{ scroll-snap-align:center; }
}

/* ============================================================
   PROGRAMMA — timeline
   ============================================================ */
.programma{ }
.tl{
  margin-top:clamp(30px,5vh,56px);
  display:grid; gap:0; position:relative;
}
.tl::before{
  content:""; position:absolute; left:clamp(56px,8vw,84px); top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--gold), var(--magenta), var(--violet));
  opacity:.45;
}
.tl-row{
  display:grid; grid-template-columns:clamp(56px,8vw,84px) 1fr; gap:clamp(20px,4vw,46px);
  padding:clamp(20px,3.4vh,34px) 0; align-items:start;
}
.tl-time{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(15px,2vw,22px);
  color:var(--gold); text-align:right; line-height:1.1; padding-top:2px;
  position:relative;
}
.tl-dot{
  position:relative; padding-left:clamp(20px,4vw,40px);
}
.tl-dot::before{
  content:""; position:absolute; left:calc(clamp(56px,8vw,84px) * -0.5 - 6px + clamp(20px,4vw,46px) * -0.5);
}
.tl-bullet{
  position:absolute; left:-9px; top:6px; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-lt), var(--sun));
  box-shadow:0 0 0 4px rgba(255,122,26,.18), 0 0 22px 2px rgba(255,140,40,.7);
}
.tl h3{
  font-family:var(--ff-display); font-weight:800; font-size:clamp(20px,2.8vw,30px);
  margin:0 0 .25em; color:var(--cream);
}
.tl p{ margin:0; color:var(--cream-dim); max-width:46ch; }
.tl .by{ color:var(--magenta); font-weight:600; }

/* full-bleed video band */
.band{
  position:relative; min-height:clamp(360px,62vh,640px);
  display:flex; align-items:center; overflow:hidden;
  margin-block:clamp(20px,4vh,40px);
}
.band video, .band .band-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(1.15) contrast(1.04);
}
.band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(14,5,18,.92), rgba(14,5,18,.4) 55%, rgba(26,8,32,.5)),
    radial-gradient(80% 100% at 0% 50%, rgba(255,46,136,.25), transparent 60%);
}
.band .wrap{ position:relative; z-index:2; }
.band h3{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(30px,6vw,72px); line-height:.98; margin:0 0 .3em;
  text-wrap:balance;
}
.band p{ max-width:42ch; color:var(--cream); font-size:clamp(16px,1.9vw,21px); }

/* ============================================================
   PRAKTISCH
   ============================================================ */
.prak-grid{
  margin-top:clamp(30px,5vh,52px);
  display:grid; gap:18px;
  grid-template-columns:repeat(12,1fr);
}
.card{
  position:relative; border-radius:18px; padding:clamp(22px,3vw,34px);
  background:linear-gradient(160deg, rgba(255,243,232,.07), rgba(255,243,232,.02));
  border:1px solid rgba(255,210,150,.16);
  overflow:hidden;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,194,77,.45); box-shadow:0 24px 50px -28px rgba(255,94,30,.7); }
.card .ic{ font-family:var(--ff-display); font-weight:800; color:var(--magenta); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px; }
.card h3{ font-family:var(--ff-display); font-weight:800; font-size:clamp(20px,2.6vw,27px); margin:0 0 .4em; }
.card p{ margin:0; color:var(--cream-dim); font-size:16px; }
.card a.inl{ color:var(--gold); border-bottom:1px solid rgba(255,194,77,.5); }
.card a.inl:hover{ color:var(--gold-lt); }

.col-7{ grid-column:span 7; } .col-5{ grid-column:span 5; }
.col-6{ grid-column:span 6; } .col-4{ grid-column:span 4; } .col-8{ grid-column:span 8; }
.col-12{ grid-column:span 12; }

/* ticket tiers */
.tiers{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.tier{
  flex:1 1 120px; border-radius:14px; padding:18px 16px;
  background:rgba(14,5,18,.45); border:1px solid rgba(255,210,150,.16);
}
.tier .price{ font-family:var(--ff-display); font-weight:800; font-size:clamp(26px,4vw,38px); line-height:1; color:var(--gold); }
.tier .lbl{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-dim); margin-top:8px; }
.tier.free .price{ color:var(--cyan); }
.tier.hot{ border-color:rgba(255,46,136,.5); box-shadow:0 0 30px -10px rgba(255,46,136,.7); }

.kroost{
  grid-column:span 12;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  border-radius:18px; padding:clamp(20px,3vw,30px);
  background:linear-gradient(120deg, rgba(47,230,255,.10), rgba(155,92,255,.10));
  border:1px solid rgba(47,230,255,.28);
}
.kroost .big{ font-family:var(--ff-display); font-weight:800; font-size:clamp(22px,3vw,32px); color:var(--cyan); line-height:1; }
.kroost p{ margin:0; color:var(--cream); max-width:52ch; }
.kroost .note{ display:block; margin-top:8px; color:var(--cream-dim); font-size:.92em; }

/* dresscode strip */
.dress{
  grid-column:span 12; text-align:center; padding:clamp(24px,4vw,40px) 18px;
  border-radius:18px;
  background:image-set(url("assets/leopard-trio.webp") type("image/webp"), url("assets/leopard-trio.jpg") type("image/jpeg")) center/cover;
  position:relative; overflow:hidden; isolation:isolate;
}
.dress::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(14,5,18,.62),rgba(42,13,46,.72)); }
.dress .lbl{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-lt); }
.dress .big{ font-family:var(--ff-display); font-weight:800; font-size:clamp(26px,5vw,52px); margin:.15em 0 0; text-shadow:0 2px 30px rgba(0,0,0,.7); }
.dress .big em{ font-style:italic; color:var(--gold); }

/* ============================================================
   OVER / TEAM
   ============================================================ */
.team-grid{
  margin-top:clamp(30px,5vh,52px);
  display:grid; gap:12px; grid-template-columns:repeat(2,minmax(220px,1fr));
}
.team-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:16px 18px; min-width:0; border-radius:14px;
  overflow:visible;
}
.team-card .ic{
  margin:0; min-width:0;
  overflow-wrap:normal; word-break:normal; hyphens:none;
  letter-spacing:.14em; line-height:1.25;
}
.team-card h3{
  font-size:clamp(20px,2.6vw,24px); line-height:1; margin:0; color:var(--cream);
  text-align:right; white-space:nowrap;
}
@media (max-width:900px){
  .team-grid{ grid-template-columns:1fr; }
  .team-card{ grid-template-columns:minmax(0,1fr) auto; width:100%; }
  .over-layout{ grid-template-columns:1fr !important; }
  .over-layout > *{ min-width:0; }
}
@media (max-width:420px){
  .team-card{ grid-template-columns:1fr; align-items:start; gap:6px; padding:16px; }
  .team-card h3{ text-align:left; white-space:normal; }
}
.member{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5;
  border:1px solid rgba(255,210,150,.16);
  background:#1a0820;
}
.member img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05); transition:transform .7s, filter .5s; }
.member:hover img{ transform:scale(1.06); }
.member .grad{ position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(14,5,18,.92)); }
.member .info{ position:absolute; left:0; right:0; bottom:0; padding:16px 16px 18px; }
.member .role{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.member .name{ font-family:var(--ff-display); font-weight:800; font-size:clamp(18px,2.2vw,24px); line-height:1.05; margin-top:3px; }
.member .alias{ color:var(--magenta); font-weight:600; font-size:14px; }
.team-note{ margin-top:22px; color:var(--cream-dim); font-size:15px; }
.team-note b{ color:var(--gold); font-weight:600; }

/* ============================================================
   SAVE THE DATES 2027
   ============================================================ */
.dates{ text-align:center; }
.dates-grid{
  margin-top:clamp(30px,5vh,52px);
  display:grid; gap:14px; grid-template-columns:repeat(4,1fr);
}
.dchip{
  position:relative; border-radius:16px; padding:clamp(20px,2.6vw,32px) 14px;
  border:1px solid rgba(255,210,150,.18);
  background:linear-gradient(165deg, rgba(255,243,232,.06), rgba(255,243,232,.015));
  transition:transform .35s, border-color .35s, box-shadow .35s, background .35s;
}
.dchip:hover{ transform:translateY(-6px) rotate(-1.2deg); border-color:rgba(255,194,77,.5); box-shadow:0 26px 50px -28px rgba(255,94,30,.8); background:linear-gradient(165deg, rgba(255,122,26,.16), rgba(255,46,136,.06)); }
.dchip .day{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--magenta); }
.dchip .num{ font-family:var(--ff-display); font-weight:800; font-size:clamp(40px,6vw,68px); line-height:.95; color:var(--gold); }
.dchip .mon{ font-family:var(--ff-text); letter-spacing:.18em; text-transform:uppercase; font-size:clamp(13px,1.6vw,16px); margin-top:4px; }
.dates-foot{ margin-top:26px; letter-spacing:.24em; text-transform:uppercase; font-size:13px; color:var(--cream-dim); }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final{
  text-align:center; padding-block:clamp(80px,14vh,170px);
  position:relative;
}
.final h2{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(38px,9vw,120px); line-height:.92; margin:0 0 .25em; letter-spacing:-.01em;
}
.final h2 .l1{ color:var(--cream); }
.final h2 .l2{ background:linear-gradient(120deg,var(--gold),var(--sun) 45%, var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.final .tagline{ font-size:clamp(16px,2vw,22px); color:var(--cream-dim); margin:0 auto 34px; max-width:30ch; }
.final .hero-cta{ justify-content:center; }
.final .sun{ font-size:38px; margin-bottom:18px; filter:drop-shadow(0 0 24px rgba(255,140,40,.8)); }

footer{
  border-top:1px solid rgba(255,210,150,.14);
  padding:46px var(--gutter) 56px;
  display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between;
}
.foot-mark{ display:flex; flex-direction:column; gap:6px; }
.foot-logo{
  font-family:var(--ff-display); font-weight:800; font-size:26px; letter-spacing:.02em;
  display:flex; align-items:center; gap:.4em;
}
.foot-logo b{ color:var(--gold); }
.foot-logo .ring{ width:14px; height:14px; border-radius:50%; border:3px solid var(--magenta); display:inline-block; }
.foot-meta{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-dim); }
.foot-meta a{ color:var(--gold); }
.foot-credit{ font-size:12px; color:var(--cream-dim); max-width:40ch; }
.logo-slot-note{ font-size:11px; color:rgba(233,207,194,.55); margin-top:8px; letter-spacing:.04em; }

.mobile-reserve{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:70;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 16px; border-radius:999px;
  background:rgba(14,5,18,.86);
  border:1px solid rgba(255,210,150,.2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95), 0 0 24px -10px rgba(255,122,26,.7);
  backdrop-filter:blur(14px);
}
.mobile-reserve .audio-toggle{
  flex:1 1 auto; justify-content:center;
  min-width:0; padding-inline:12px;
  background:rgba(255,243,232,.05);
}
.mobile-reserve .btn{
  flex:0 0 auto;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .col-7,.col-5,.col-6,.col-4,.col-8{ grid-column:span 12; }
  .dates-grid{ grid-template-columns:repeat(2,1fr); }
  .portal{ width:min(86vw, 340px); }
  .poster-frame img{ max-height:min(46vh, 460px); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  body{ padding-bottom:82px; }
  .tl-row{ grid-template-columns:64px 1fr; gap:16px; }
  .tl::before{ left:64px; }
  .btn{ padding:14px 20px; }
  .topbar .audio-toggle{ display:none; }
  .hero-sub{ letter-spacing:.16em; }
  .hero-cta{ flex-direction:column; align-items:center; gap:10px; }
  .hero-cta .btn,.hero-cta .audio-toggle{ width:min(100%, 280px); justify-content:center; }
  .mobile-reserve{ display:flex; }
  .mobile-reserve .audio-toggle{ display:inline-flex; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .bg-mesh,.portal-rays,.poster-sheen,.scroll-cue .line{ animation:none !important; }
  .marquee-track{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}