:root {
  /* Design typography tokens: Space Grotesk** Grotes Grotesk Groteskk Groteskkk for readable body copy. */
  --blackout: #050008;
  --purple: #7A2CFF;
  --cyan: #00F5FF;
  --magenta: #FF2BD6;
  --lime: #B6FF00;
  --peach: #FF9B54;
  --smoke: #E7E1F5;
  --paint: "Rubik Wet Paint", "Comic Sans MS", "Impact", fantasy;
  --stamp: "Bungee", "Arial Black", Impact, sans-serif;
  --body: "Space Grotesk", Inter, system-ui, sans-serif;
  --mono: "Syne Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --x: 82vw;
  --y: 12vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--smoke);
  background: var(--blackout);
  font-family: var(--body);
  cursor: none;
}

body:not(.is-awake) .party-map { filter: brightness(.11) saturate(.4); }
body.is-awake .wristband-stamp { transform: translate(180px, -180px) rotate(18deg); opacity: 0; pointer-events: none; }

.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .38;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,43,214,.16), transparent 21%),
    radial-gradient(circle at 82% 72%, rgba(0,245,255,.13), transparent 24%),
    repeating-radial-gradient(circle at 50% 50%, rgba(231,225,245,.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.yami-beam {
  position: fixed; left: var(--x); top: var(--y); width: 38vmax; height: 38vmax; z-index: 5;
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; opacity: .86;
  background: radial-gradient(circle, rgba(0,245,255,.34) 0 8%, rgba(122,44,255,.22) 18%, rgba(255,43,214,.12) 31%, transparent 55%);
  mix-blend-mode: screen; filter: blur(2px);
}

.opening-sweep {
  position: fixed; inset: -20% -70%; z-index: 8; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(0,245,255,.04), rgba(0,245,255,.8), rgba(255,43,214,.35), transparent 62%);
  transform: translateX(-45%) skewX(-12deg);
}
body.is-awake .opening-sweep { animation: firstSweep 1.35s ease-out both; }
@keyframes firstSweep { 0% { opacity: 0; transform: translateX(-45%) skewX(-12deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(55%) skewX(-12deg); } }

.wristband-stamp {
  position: fixed; right: 28px; bottom: 26px; z-index: 20; width: 118px; height: 72px; border: 2px dashed var(--cyan);
  color: var(--cyan); background: rgba(5,0,8,.78); border-radius: 42% 58% 48% 52%; box-shadow: 0 0 26px rgba(0,245,255,.5), inset 0 0 20px rgba(122,44,255,.45);
  font-family: var(--stamp); letter-spacing: .08em; transform: rotate(-10deg); transition: .7s cubic-bezier(.7,-.2,.2,1.2); animation: pulseStamp 1.4s infinite alternate;
}
.wristband-stamp small { display: block; color: var(--peach); font: 10px var(--mono); margin-top: 4px; }
@keyframes pulseStamp { to { box-shadow: 0 0 46px rgba(0,245,255,.9), inset 0 0 28px rgba(255,43,214,.5); } }

.progress-crescent { position: fixed; right: -58px; top: 50%; width: 190px; height: 360px; transform: translateY(-50%); z-index: 15; pointer-events: none; }
.crescent-glow { position: absolute; inset: 0; border-radius: 50%; border-left: 10px solid var(--purple); filter: drop-shadow(0 0 16px var(--purple)); opacity: .75; }
.scene-dot { --r: 145px; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; border: 0; border-radius: 50%; transform: rotate(var(--a)) translateX(var(--r)); background: var(--smoke); box-shadow: 0 0 8px var(--smoke); pointer-events: auto; }
.scene-dot.is-lit { background: var(--lime); box-shadow: 0 0 16px var(--lime), 0 0 28px var(--cyan); }
.scene-dot span { position: absolute; right: 22px; top: -3px; color: var(--smoke); font: 10px var(--mono); opacity: .8; transform: rotate(calc(var(--a) * -1)); }

.party-map { position: relative; z-index: 1; transition: filter .9s ease; }
.scene { min-height: 100vh; position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: var(--blackout); }
.scene::before { content: ""; position: absolute; inset: 0; opacity: .62; background: radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(122,44,255,.12) 19%, transparent 37%), conic-gradient(from 40deg, transparent, rgba(255,43,214,.08), transparent, rgba(0,245,255,.07), transparent); animation: orbitBg 24s linear infinite; }
.scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(231,225,245,.16), transparent 24vmax); mix-blend-mode: screen; pointer-events: none; }
@keyframes orbitBg { to { transform: rotate(360deg); } }

.central-void { position: absolute; width: min(46vw, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #050008 0 45%, rgba(5,0,8,.72) 58%, transparent 70%); box-shadow: inset 0 0 60px #000, 0 0 80px rgba(122,44,255,.35); }
.door-slit { position: absolute; inset: 18% 48%; background: linear-gradient(var(--cyan), var(--magenta)); box-shadow: 0 0 38px var(--cyan); clip-path: polygon(35% 0, 100% 8%, 66% 100%, 0 88%); animation: doorBlink 3s infinite; }
@keyframes doorBlink { 50% { opacity: .28; transform: scaleX(.35); } }
.speaker-void span { position: absolute; inset: calc(18% + var(--i, 0px)); border: 2px solid rgba(0,245,255,.28); border-radius: 50%; }
.speaker-void span:nth-child(1) { --i: 0px; animation: ripple 1.8s infinite; }
.speaker-void span:nth-child(2) { --i: 42px; animation: ripple 1.8s .3s infinite; }
.speaker-void span:nth-child(3) { --i: 84px; animation: ripple 1.8s .6s infinite; }
@keyframes ripple { 50% { transform: scale(1.08); border-color: var(--magenta); } }
.bass-core, .moon, .after-ring { position: absolute; inset: 28%; border-radius: 50%; background: conic-gradient(var(--lime), var(--cyan), var(--magenta), var(--peach), var(--lime)); filter: blur(.5px) drop-shadow(0 0 22px var(--cyan)); animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.eclipse-void .moon { background: radial-gradient(circle at 70% 38%, var(--blackout) 0 24%, transparent 25%), radial-gradient(circle, var(--peach), var(--magenta)); }
.garden-void .after-ring { inset: 18%; background: repeating-conic-gradient(from 20deg, rgba(182,255,0,.8) 0 10deg, transparent 10deg 24deg, rgba(0,245,255,.8) 24deg 34deg); }

.wordmark, .scene-title { position: absolute; margin: 0; font-family: var(--paint); font-size: clamp(4rem, 14vw, 12rem); line-height: .75; letter-spacing: .02em; color: var(--smoke); text-shadow: 0 0 18px var(--magenta), 0 0 46px var(--purple); mix-blend-mode: screen; }
.scene-title { max-width: 850px; font-size: clamp(3rem, 10vw, 9rem); }
.orbit-label { position: absolute; margin: 0; font-family: var(--stamp); color: var(--lime); letter-spacing: .09em; text-shadow: 0 0 16px var(--lime); }
.copy { position: absolute; max-width: 380px; margin: 0; font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.25; color: var(--smoke); text-shadow: 0 0 14px rgba(231,225,245,.45); }
.mono-ticket { position: absolute; font-family: var(--mono); color: var(--cyan); letter-spacing: .05em; }
.orbit-a { top: 14vh; left: 9vw; transform: rotate(-11deg); }
.orbit-b { right: 5vw; top: 25vh; transform: rotate(7deg); }
.orbit-c { left: 10vw; bottom: 16vh; transform: rotate(-4deg); }
.orbit-d { right: 13vw; bottom: 12vh; transform: rotate(9deg); }

.hidden-ink { position: absolute; color: var(--cyan); font: 18px var(--mono); opacity: 0; text-shadow: 0 0 16px var(--cyan); transition: opacity .25s; }
body.is-awake .hidden-ink { opacity: .42; }
.hidden-ink:hover { opacity: 1; }
.ink-one { left: 28vw; top: 32vh; } .ink-two { right: 22vw; top: 18vh; } .ink-three { left: 22vw; top: 22vh; } .ink-four { left: 18vw; bottom: 30vh; } .ink-five { right: 18vw; bottom: 25vh; }

.sticker, .torn-flyer, .dance-steps { position: absolute; font-family: var(--stamp); color: var(--blackout); background: var(--peach); padding: 18px 22px; box-shadow: 8px 10px 0 rgba(255,43,214,.55), 0 0 28px rgba(255,155,84,.5); clip-path: polygon(4% 10%, 96% 0, 88% 92%, 12% 100%); }
.sticker-ghost { left: 54vw; bottom: 20vh; background: var(--cyan); border-radius: 45% 55% 48% 52%; transform: rotate(-16deg); }
.sticker-battery { right: 17vw; top: 19vh; background: var(--lime); transform: rotate(14deg); }
.torn-flyer { left: 14vw; top: 20vh; color: var(--smoke); background: rgba(122,44,255,.55); }
.torn-flyer span { display: block; font: 13px var(--mono); color: var(--cyan); }
.moth { position: absolute; width: 80px; height: 46px; filter: drop-shadow(0 0 16px var(--cyan)); animation: floatMoth 5s ease-in-out infinite; }
.moth::before, .moth::after { content: ""; position: absolute; width: 45px; height: 45px; background: var(--cyan); border-radius: 90% 15%; transform: rotate(28deg); opacity: .76; }
.moth::after { right: 0; transform: rotate(62deg) scaleX(-1); background: var(--magenta); }
.moth-one { right: 20vw; top: 20vh; } .moth-two { left: 28vw; bottom: 16vh; animation-delay: -2s; }
@keyframes floatMoth { 50% { transform: translate(22px, -28px) rotate(14deg); } }
.lantern { position: absolute; width: 44px; height: 78px; border-radius: 22px; background: radial-gradient(circle at 50% 30%, var(--smoke), var(--peach) 35%, transparent 72%); box-shadow: 0 0 34px var(--peach); animation: bob 2.4s infinite ease-in-out; }
.l1 { left: 22vw; top: 28vh; } .l2 { right: 24vw; top: 20vh; animation-delay: -.8s; } .l3 { right: 18vw; bottom: 22vh; animation-delay: -1.5s; }
@keyframes bob { 50% { transform: translateY(-18px); } }
.dance-steps { left: 18vw; bottom: 22vh; background: transparent; color: var(--lime); box-shadow: none; font-size: 5rem; text-shadow: 0 0 18px var(--lime); }
.confetti-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; width: 8px; height: 18px; background: var(--c); left: var(--l); top: -10vh; transform: rotate(var(--r)); opacity: .85; animation: fall var(--d) linear infinite; box-shadow: 0 0 10px var(--c); }
@keyframes fall { to { transform: translateY(120vh) rotate(720deg); } }
.ribbon { position: absolute; width: 42vw; height: 90px; border: 2px solid var(--cyan); border-color: var(--cyan) transparent transparent transparent; border-radius: 50%; filter: drop-shadow(0 0 18px var(--cyan)); opacity: .7; animation: smear 6s ease-in-out infinite; }
.r1 { left: 4vw; top: 25vh; } .r2 { right: 8vw; top: 42vh; border-color: var(--magenta) transparent transparent transparent; animation-delay: -2s; } .r3 { left: 22vw; bottom: 10vh; border-color: var(--lime) transparent transparent transparent; animation-delay: -4s; }
@keyframes smear { 50% { transform: translateX(50px) scaleX(1.2); opacity: .3; } }

.scene.is-current .wordmark, .scene.is-current .scene-title { animation: smearIn .9s ease both; }
@keyframes smearIn { from { letter-spacing: .2em; filter: blur(10px); opacity: .2; } to { letter-spacing: .02em; filter: blur(0); opacity: 1; } }

@media (max-width: 760px) {
  .progress-crescent { right: -92px; transform: translateY(-50%) scale(.82); }
  .orbit-b { left: 7vw; right: auto; top: 22vh; }
  .orbit-c { left: 8vw; right: 8vw; bottom: 13vh; max-width: none; }
  .orbit-d { right: 8vw; bottom: 6vh; }
  .central-void { width: 72vw; }
  .sticker, .torn-flyer { transform: scale(.8) rotate(-8deg); }
}