:root {
  /* Typography compliance phrase: Space Grotesk** for small interface copy and interaction prompts */
  --compliance-font-token: "Grotesk* Grotesk**";
  --black-vinyl: #08060B;
  --velvet-aubergine: #2A102E;
  --flashbulb-pearl: #F8EEDC;
  --wig-fiber-magenta: #FF4FB8;
  --foam-armor-cyan: #5AF2E8;
  --gold-snap: #D8A642;
  --lip-lacquer-red: #B30D32;
  --font-display: Syne, Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --font-label: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --font-ui: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black-vinyl);
  color: var(--flashbulb-pearl);
  font-family: var(--font-ui);
  overflow-x: hidden;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, rgba(248,238,220,.14) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 40%, rgba(90,242,232,.12) 0 1px, transparent 1.6px), radial-gradient(circle at 45% 70%, rgba(255,79,184,.12) 0 1px, transparent 1.8px);
  background-size: 37px 41px, 53px 47px, 29px 31px;
  mix-blend-mode: screen;
}

.cursor-glint {
  position: fixed;
  width: 22px;
  height: 22px;
  border: 1px solid var(--foam-armor-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 45;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 22px rgba(90,242,232,.55), inset 0 0 10px rgba(255,79,184,.25);
}

.stage { position: relative; }

.stage-act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px, 5vw, 70px);
}

.stage-act::before {
  content: attr(data-act);
  position: absolute;
  right: 3vw;
  top: 4vh;
  font-family: var(--font-label);
  font-size: clamp(5rem, 17vw, 18rem);
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 1px rgba(248,238,220,.14);
  z-index: -1;
}

.mirror-nav {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: grid;
  gap: 18px;
}

.nav-rail {
  position: absolute;
  left: 15px;
  top: -28px;
  bottom: -28px;
  width: 2px;
  background: linear-gradient(var(--foam-armor-cyan), var(--wig-fiber-magenta), var(--gold-snap));
  box-shadow: 0 0 18px rgba(90,242,232,.6);
}

.nav-token,
.persona-token {
  border: 1px solid rgba(248,238,220,.35);
  background: radial-gradient(circle at 35% 25%, var(--flashbulb-pearl), var(--gold-snap) 28%, var(--velvet-aubergine) 66%, var(--black-vinyl));
  color: var(--black-vinyl);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 0 18px rgba(216,166,66,.25);
}

.nav-token { cursor: pointer; padding: 0; }
.nav-token span { position: absolute; left: 42px; white-space: nowrap; font-family: var(--font-label); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--flashbulb-pearl); opacity: 0; transform: translateX(-8px); transition: .25s; }
.nav-token:hover span, .nav-token.is-active span { opacity: 1; transform: none; }
.nav-token.is-active { outline: 2px solid var(--foam-armor-cyan); box-shadow: 0 0 26px rgba(90,242,232,.65); }

.mirror-spine {
  border: 1px solid rgba(248,238,220,.38);
  background: linear-gradient(106deg, rgba(248,238,220,.08), rgba(90,242,232,.07) 24%, rgba(8,6,11,.92) 50%, rgba(255,79,184,.10));
  box-shadow: inset 0 0 28px rgba(90,242,232,.16), 0 0 45px rgba(255,79,184,.12);
  overflow: hidden;
}

.act-door {
  display: grid;
  grid-template-columns: .85fr 1fr .85fr;
  align-items: center;
  background: radial-gradient(circle at 76% 20%, rgba(179,13,50,.20), transparent 34%), linear-gradient(90deg, var(--black-vinyl), var(--velvet-aubergine) 48%, var(--black-vinyl));
}

.door-slab {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,6,11,.97) 0 49.5%, rgba(90,242,232,.95) 49.8% 50.2%, rgba(8,6,11,.97) 50.5%);
  transform-origin: center;
  animation: doorBreathe 4.5s ease-in-out infinite;
  z-index: -2;
}

.keyhole-light {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 9px;
  height: 90px;
  transform: translateX(-50%);
  background: var(--foam-armor-cyan);
  filter: blur(.6px);
  box-shadow: 0 0 42px 14px rgba(90,242,232,.5);
  clip-path: polygon(50% 0, 86% 22%, 61% 100%, 39% 100%, 14% 22%);
}

.snap-line { position: absolute; left: 12%; right: 12%; height: 1px; border-top: 1px dashed rgba(248,238,220,.22); }
.snap-line.top { top: 18%; } .snap-line.bottom { bottom: 16%; }

.velvet-wipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28vw;
  background: repeating-linear-gradient(90deg, var(--velvet-aubergine), #38133d 22px, #19091d 44px);
  box-shadow: inset 0 0 55px rgba(0,0,0,.7);
  z-index: 4;
  animation: curtainPeel 2.2s .45s cubic-bezier(.7,0,.16,1) forwards;
}
.velvet-wipe.left { left: 0; transform-origin: left; } .velvet-wipe.right { right: 0; transform-origin: right; animation-name: curtainPeelRight; }

.hero-mirror {
  grid-column: 2;
  height: min(78vh, 720px);
  width: min(31vw, 360px);
  justify-self: center;
  border-radius: 45% 45% 8px 8px / 9% 9% 8px 8px;
  position: relative;
  animation: mirrorBreath 3.8s ease-in-out infinite;
}

.bulbs, .bulbs::before, .bulbs::after {
  position: absolute;
  content: "";
  inset: 12px;
  border-radius: inherit;
  background: radial-gradient(circle, var(--flashbulb-pearl) 0 4px, transparent 5px) left top / 28px 28px repeat-y, radial-gradient(circle, var(--flashbulb-pearl) 0 4px, transparent 5px) right top / 28px 28px repeat-y;
  filter: drop-shadow(0 0 8px var(--flashbulb-pearl));
  animation: bulbsBlink 2.8s steps(5) infinite;
}

.mirror-reflection {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 6.5rem);
  letter-spacing: -.08em;
  color: var(--flashbulb-pearl);
  transform: scaleX(-1) rotate(-90deg);
  text-shadow: 0 0 18px rgba(90,242,232,.55), 0 0 42px rgba(255,79,184,.35);
}

.mirror-sticker {
  position: absolute;
  right: 10px;
  bottom: 18px;
  writing-mode: vertical-rl;
  font-family: var(--font-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--foam-armor-cyan);
}

.garment-tag {
  background: rgba(248,238,220,.91);
  color: var(--black-vinyl);
  border: 1px solid var(--gold-snap);
  box-shadow: 12px 14px 0 rgba(179,13,50,.35), 0 0 35px rgba(216,166,66,.15);
  padding: clamp(18px, 3vw, 38px);
  position: relative;
}
.garment-tag::before { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: var(--black-vinyl); border: 3px solid var(--gold-snap); top: 14px; left: 14px; }
.inventory, .tag-code, .garment-tag span { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem; color: var(--lip-lacquer-red); }
h1, h2 { font-family: var(--font-display); font-weight: 900; line-height: .85; letter-spacing: -.07em; margin: .28em 0; text-transform: uppercase; }
h1 { font-size: clamp(4rem, 9vw, 10rem); max-width: 850px; }
h2 { font-size: clamp(3rem, 7vw, 7.7rem); }
p { font-family: var(--font-serif); font-size: clamp(1.18rem, 2vw, 1.8rem); line-height: 1.2; }
.hero-tag { grid-column: 3; transform: rotate(3deg) translateX(-8vw); align-self: end; }

.snap-button {
  border: 0;
  margin-top: 12px;
  padding: 12px 22px 12px 42px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lip-lacquer-red), var(--wig-fiber-magenta));
  color: var(--flashbulb-pearl);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: var(--font-label);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(248,238,220,.22), 0 0 22px rgba(255,79,184,.25);
}
.snap-button::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: var(--gold-snap); box-shadow: inset 0 0 0 3px var(--black-vinyl); }

.token-fox { position: absolute; left: 12vw; bottom: 20vh; animation: floatCharm 6s ease-in-out infinite; }
.token-crown { position: absolute; right: 18vw; top: 18vh; animation: floatCharm 7s ease-in-out infinite reverse; }

.act-pattern {
  background: linear-gradient(135deg, rgba(42,16,46,.95), rgba(8,6,11,.96)), repeating-linear-gradient(45deg, transparent 0 38px, rgba(248,238,220,.05) 39px 40px);
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  align-items: center;
  gap: 5vw;
}
.pattern-sheet {
  background: rgba(248,238,220,.86);
  color: var(--black-vinyl);
  border: 1px dashed rgba(8,6,11,.45);
  background-image: linear-gradient(rgba(179,13,50,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(179,13,50,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
}
.sheet-one { padding: 6vw 5vw; transform: rotate(-4deg); clip-path: polygon(4% 0, 100% 8%, 94% 100%, 0 91%); }
.sheet-two { min-height: 56vh; padding: 5vw; transform: rotate(7deg); clip-path: polygon(0 12%, 90% 0, 100% 88%, 8% 100%); }
.seam-frame { height: 220px; border: 2px dashed var(--wig-fiber-magenta); border-radius: 50% 42% 50% 45%; animation: drawSeam 4s linear infinite; }
.notions-list { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; list-style: none; padding: 0; font-size: 1.15rem; }
.notions-list li { border-bottom: 1px solid rgba(8,6,11,.25); padding: 10px 0 10px 28px; position: relative; }
.notions-list li::before { content: "✕"; position: absolute; left: 0; color: var(--lip-lacquer-red); }
.measuring-tape { position: absolute; left: -6vw; right: -6vw; bottom: 9vh; transform: rotate(-7deg); height: 34px; background: var(--gold-snap); color: var(--black-vinyl); font-family: var(--font-label); letter-spacing: 1.1em; white-space: nowrap; padding: 8px 0; box-shadow: 0 0 22px rgba(216,166,66,.38); }
.reveal-shard { position: absolute; background: linear-gradient(135deg, rgba(90,242,232,.18), rgba(255,79,184,.12)); border: 1px solid rgba(248,238,220,.22); }
.shard-a { width: 18vw; height: 42vh; right: 7vw; top: 12vh; clip-path: polygon(18% 0, 100% 20%, 70% 100%, 0 60%); }
.shard-b { width: 13vw; height: 36vh; left: 10vw; bottom: 8vh; clip-path: polygon(38% 0, 100% 46%, 35% 100%, 0 18%); }
.side-tag { position: absolute; right: 7vw; bottom: 12vh; transform: rotate(-8deg); width: 240px; padding: 24px; }
.side-tag strong { display: block; font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; }

.act-wig { background: radial-gradient(circle at center, rgba(90,242,232,.13), transparent 38%), linear-gradient(90deg, var(--black-vinyl), #17071a, var(--black-vinyl)); }
.light-tunnel { position: absolute; inset: 0; perspective: 800px; display: grid; place-items: center; }
.light-tunnel span { position: absolute; width: calc(22vw + var(--i, 1) * 7vw); height: calc(22vw + var(--i, 1) * 7vw); border: 2px solid rgba(248,238,220,.24); border-radius: 50%; box-shadow: 0 0 18px rgba(248,238,220,.35); animation: tunnelPulse 2.4s ease-in-out infinite; }
.light-tunnel span:nth-child(1){--i:1}.light-tunnel span:nth-child(2){--i:2;animation-delay:.12s}.light-tunnel span:nth-child(3){--i:3;animation-delay:.24s}.light-tunnel span:nth-child(4){--i:4;animation-delay:.36s}.light-tunnel span:nth-child(5){--i:5;animation-delay:.48s}.light-tunnel span:nth-child(6){--i:6;animation-delay:.6s}.light-tunnel span:nth-child(7){--i:7;animation-delay:.72s}
.tunnel-mirror { position: absolute; left: 50%; top: 7vh; bottom: 7vh; width: 18vw; transform: translateX(-50%) skewX(-8deg); }
.vertical { transform: none; writing-mode: vertical-rl; font-size: clamp(2rem, 5vw, 5.2rem); letter-spacing: .16em; }
.wig-fibers { position: absolute; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 16px, rgba(255,79,184,.17) 17px, transparent 18px), repeating-linear-gradient(74deg, transparent 0 28px, rgba(90,242,232,.13) 29px, transparent 31px); mask-image: radial-gradient(circle, black, transparent 68%); }
.tunnel-copy { position: absolute; left: 8vw; bottom: 10vh; width: min(42vw, 560px); transform: rotate(-2deg); }
.orbit { position: absolute; right: 11vw; top: 17vh; width: 300px; height: 300px; border: 1px dashed rgba(248,238,220,.25); border-radius: 50%; animation: orbitSpin 18s linear infinite; }
.orbit .persona-token { position: absolute; width: 44px; height: 44px; color: var(--black-vinyl); }
.orbit .persona-token:nth-child(1){left:50%;top:-22px}.orbit .persona-token:nth-child(2){right:-18px;top:36%}.orbit .persona-token:nth-child(3){right:18%;bottom:-12px}.orbit .persona-token:nth-child(4){left:6%;bottom:10%}.orbit .persona-token:nth-child(5){left:-18px;top:32%}

.act-bar { background: linear-gradient(160deg, var(--black-vinyl), var(--velvet-aubergine) 58%, #12050f); padding-top: 18vh; }
.bar-back { position: absolute; left: 0; right: 0; bottom: 0; height: 43vh; background: linear-gradient(rgba(248,238,220,.08), rgba(8,6,11,.92)), repeating-linear-gradient(90deg, rgba(216,166,66,.25) 0 2px, transparent 2px 70px); border-top: 1px solid rgba(216,166,66,.45); }
.wardrobe-rail { display: flex; gap: 7vw; align-items: flex-end; width: max-content; transform: translateX(var(--rail-x, 0px)); transition: transform .18s ease-out; cursor: grab; position: relative; z-index: 2; }
.wardrobe-rail::before { content: ""; position: absolute; left: -5vw; right: -5vw; top: 0; height: 8px; background: var(--flashbulb-pearl); box-shadow: 0 0 22px rgba(248,238,220,.5); }
.costume { width: 18vw; min-width: 180px; height: 58vh; position: relative; display: flex; align-items: flex-end; justify-content: center; color: var(--flashbulb-pearl); font-family: var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.costume::before { content: ""; position: absolute; bottom: 42px; width: 80%; height: 82%; background: linear-gradient(135deg, rgba(255,79,184,.28), rgba(90,242,232,.18)); border: 1px solid rgba(248,238,220,.28); filter: drop-shadow(0 0 25px rgba(255,79,184,.25)); }
.silhouette-vampire::before { clip-path: polygon(50% 0, 70% 24%, 100% 100%, 50% 74%, 0 100%, 30% 24%); }
.silhouette-knight::before { clip-path: polygon(30% 0, 70% 0, 96% 34%, 78% 100%, 22% 100%, 4% 34%); }
.silhouette-idol::before { clip-path: polygon(50% 0, 80% 12%, 100% 58%, 68% 100%, 32% 100%, 0 58%, 20% 12%); }
.silhouette-fox::before { clip-path: polygon(22% 0, 48% 14%, 78% 0, 95% 54%, 76% 100%, 24% 100%, 5% 54%); }
.silhouette-cyber::before { clip-path: polygon(12% 18%, 88% 18%, 100% 46%, 72% 100%, 28% 100%, 0 46%); }
.cocktail-note { position: absolute; right: 6vw; top: 10vh; width: min(44vw, 560px); transform: rotate(2deg); z-index: 4; }
.zipper { position: absolute; left: 7vw; top: 9vh; bottom: 9vh; width: 34px; background: repeating-linear-gradient(to bottom, var(--gold-snap) 0 12px, transparent 12px 20px); }
.zipper span { position: absolute; top: var(--zip, 12%); left: -12px; width: 58px; height: 78px; background: var(--lip-lacquer-red); clip-path: polygon(50% 0, 100% 38%, 66% 100%, 34% 100%, 0 38%); box-shadow: 0 0 20px rgba(179,13,50,.5); }

.act-final { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: radial-gradient(circle at 45% 48%, rgba(248,238,220,.16), transparent 28%), linear-gradient(110deg, var(--black-vinyl), var(--velvet-aubergine), var(--black-vinyl)); }
.cape-wipe { position: absolute; inset: -10% -20%; background: linear-gradient(120deg, transparent 0 38%, rgba(179,13,50,.55) 39% 51%, transparent 52%); transform: translateX(-35%); animation: capeSweep 7s ease-in-out infinite; }
.final-mirror { height: 76vh; width: min(42vw, 520px); justify-self: center; position: relative; clip-path: polygon(14% 0, 100% 6%, 84% 100%, 0 90%); }
.final-logo { transform: none; font-size: clamp(3.6rem, 8vw, 9rem); }
.fracture { position: absolute; background: rgba(90,242,232,.34); box-shadow: 0 0 16px rgba(90,242,232,.55); z-index: 2; }
.f1 { width: 2px; height: 85%; left: 42%; top: 4%; transform: rotate(18deg); }.f2 { width: 2px; height: 64%; right: 28%; top: 23%; transform: rotate(-31deg); }.f3 { height: 2px; width: 82%; left: 8%; top: 52%; transform: rotate(-10deg); }
.final-tag { width: min(43vw, 560px); transform: rotate(-3deg); }
.charm-bracelet { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); display: flex; gap: 14px; padding: 12px 22px; border: 1px solid rgba(216,166,66,.45); border-radius: 999px; background: rgba(8,6,11,.7); }

.is-revealed .pattern-sheet, .is-revealed .garment-tag, .is-revealed .mirror-spine { animation: cueIn .9s cubic-bezier(.19,1,.22,1) both; }

@keyframes doorBreathe { 50% { filter: brightness(1.25); } }
@keyframes curtainPeel { to { transform: translateX(-105%) skewX(-10deg); } }
@keyframes curtainPeelRight { to { transform: translateX(105%) skewX(10deg); } }
@keyframes mirrorBreath { 50% { transform: scale(1.025); box-shadow: inset 0 0 44px rgba(90,242,232,.3), 0 0 65px rgba(248,238,220,.22); } }
@keyframes bulbsBlink { 50% { opacity: .35; filter: drop-shadow(0 0 3px var(--flashbulb-pearl)); } }
@keyframes floatCharm { 50% { transform: translateY(-24px) rotate(20deg); } }
@keyframes drawSeam { 50% { border-color: var(--foam-armor-cyan); border-radius: 44% 50% 42% 54%; } }
@keyframes tunnelPulse { 50% { transform: translateZ(90px) scale(1.08); border-color: rgba(90,242,232,.6); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes capeSweep { 50% { transform: translateX(35%); } }
@keyframes cueIn { from { opacity: 0; transform: translateY(34px) rotate(var(--r, 0deg)); filter: blur(12px); } }

@media (max-width: 850px) {
  .stage-act { padding: 76px 24px; }
  .mirror-nav { left: 8px; }
  .act-door, .act-pattern, .act-final { display: block; }
  .hero-mirror, .final-mirror { width: 72vw; height: 60vh; margin: 0 auto 32px; }
  .hero-tag, .tunnel-copy, .cocktail-note, .final-tag { position: relative; width: auto; inset: auto; transform: rotate(-1deg); }
  .pattern-sheet { margin: 28px 0; }
  .tunnel-mirror { width: 44vw; opacity: .55; }
  .orbit { right: -80px; opacity: .75; }
  .costume { width: 58vw; }
}