:root {
  --blacklight-plum: #160B2E;
  --deep-grape-outline: #4B1578;
  --uv-punch-pink: #FF2BD6;
  --electric-lime: #B8FF2C;
  --pool-blue-flash: #00D7FF;
  --mandarin-fizz: #FF8A1F;
  --foil-lavender: #C9A7FF;
  --frosted-paper: #FFF1D2;
  --glitch: "Rubik Glitch", Impact, fantasy;
  --round: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --stamp: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--blacklight-plum); }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--frosted-paper);
  font-family: var(--round);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 43, 214, .25), transparent 18rem),
    radial-gradient(circle at 82% 22%, rgba(0, 215, 255, .18), transparent 22rem),
    radial-gradient(circle at 45% 80%, rgba(184, 255, 44, .12), transparent 26rem),
    var(--blacklight-plum);
}

.blacklight { position: relative; isolation: isolate; }

.halftone {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255, 241, 210, .18) 1px, transparent 1.8px),
    linear-gradient(115deg, rgba(75, 21, 120, .7), transparent 38%, rgba(201, 167, 255, .11) 41%, transparent 48%);
  background-size: 18px 18px, 100% 100%;
}

.confetti-rails {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.rail-bit {
  position: absolute;
  width: .56rem;
  height: 1.14rem;
  border-radius: .18rem;
  background: var(--uv-punch-pink);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transition: transform 620ms cubic-bezier(.2, 1.45, .25, 1), opacity 620ms ease, border-radius 300ms ease;
  opacity: .82;
}

.tab-ring {
  position: fixed;
  inset: 1rem;
  z-index: 20;
  pointer-events: none;
}

.ring-tab {
  position: absolute;
  left: calc(50% + (min(42vw, 35rem) * cos(var(--angle))));
  top: calc(50% + (min(42vh, 22rem) * sin(var(--angle))));
  width: 5.2rem;
  margin: -1.6rem 0 0 -2.6rem;
  padding: .76rem .42rem;
  text-align: center;
  color: var(--blacklight-plum);
  background: var(--frosted-paper);
  text-decoration: none;
  font: 800 .84rem var(--round);
  text-transform: uppercase;
  pointer-events: auto;
  border: .18rem solid var(--deep-grape-outline);
  box-shadow: .45rem .55rem 0 var(--deep-grape-outline);
  clip-path: polygon(9% 0, 38% 0, 50% 16%, 62% 0, 91% 0, 100% 37%, 86% 50%, 100% 63%, 91% 100%, 62% 100%, 50% 84%, 38% 100%, 9% 100%, 0 63%, 14% 50%, 0 37%);
  transform: rotate(calc(var(--angle) + 90deg)) translateY(var(--snap, 14px));
  transition: transform 420ms cubic-bezier(.18, 1.5, .28, 1), background 250ms ease, color 250ms ease;
}

.ring-tab:nth-child(1) { --angle: -100deg; }
.ring-tab:nth-child(2) { --angle: -42deg; }
.ring-tab:nth-child(3) { --angle: 16deg; }
.ring-tab:nth-child(4) { --angle: 74deg; }
.ring-tab:nth-child(5) { --angle: 132deg; }
.ring-tab:nth-child(6) { --angle: 190deg; }
.ring-tab.active { --snap: 0px; background: var(--uv-punch-pink); color: var(--frosted-paper); }

.room {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 6rem);
  overflow: hidden;
}

.room::before {
  content: "";
  position: absolute;
  inset: 7% 5%;
  border: .18rem dashed rgba(0, 215, 255, .32);
  border-radius: 50%;
  transform: rotate(var(--tilt, -7deg)) scaleX(1.2);
  pointer-events: none;
}

.vertical-marker {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  z-index: 3;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 400 clamp(3rem, 8vw, 8rem)/.8 var(--stamp);
  letter-spacing: .05em;
  color: rgba(201, 167, 255, .18);
  text-shadow: .06em .04em 0 rgba(255, 43, 214, .34);
}

h1, h2 {
  margin: 0;
  font-family: var(--glitch);
  line-height: .82;
  letter-spacing: .03em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(4rem, 12vw, 12.5rem);
  color: var(--uv-punch-pink);
  text-shadow: .045em .045em 0 var(--pool-blue-flash), .08em .08em 0 var(--deep-grape-outline);
}

h2 {
  font-size: clamp(3.2rem, 9vw, 9.5rem);
  color: var(--electric-lime);
  text-shadow: .045em .045em 0 var(--uv-punch-pink), .085em .085em 0 var(--deep-grape-outline);
}

.micro {
  margin: 0 0 1rem;
  font: 900 clamp(.75rem, 1.35vw, 1.05rem) var(--round);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--pool-blue-flash);
}

.prose, .invitation {
  font-family: var(--serif);
  font-size: clamp(1.14rem, 2.1vw, 1.65rem);
  line-height: 1.34;
}

.velvet-queue {
  --tilt: 8deg;
  grid-template-columns: 1fr minmax(18rem, 48rem) 1fr;
}

.p-door {
  position: relative;
  width: min(29vw, 21rem);
  height: min(70vh, 38rem);
  display: grid;
  place-items: center;
  background: var(--deep-grape-outline);
  border: .35rem solid var(--pool-blue-flash);
  box-shadow: 1.1rem 1.3rem 0 rgba(255, 43, 214, .4), inset 0 0 2rem rgba(0, 215, 255, .35);
  clip-path: polygon(0 0, 70% 0, 100% 18%, 88% 31%, 100% 45%, 100% 100%, 0 100%, 14% 58%, 0 47%, 13% 34%, 0 23%);
  transition: transform 800ms cubic-bezier(.15, 1.5, .25, 1), filter 600ms ease;
}

.p-door span { font: 900 min(30vw, 21rem)/1 var(--glitch); color: var(--uv-punch-pink); }
.p-left { justify-self: end; transform: rotate(-7deg) translateX(var(--door-left, 0)); }
.p-right { justify-self: start; transform: scaleX(-1) rotate(-6deg) translateX(var(--door-right, 0)); }
body.entered .p-left { --door-left: -16vw; filter: brightness(1.25); }
body.entered .p-right { --door-right: -16vw; filter: brightness(1.25); }

.frosted-ticket, .rule-ticket, .sticker-sheet, .glow-label, .acetate-card, .circle-core {
  position: relative;
  z-index: 4;
  max-width: 52rem;
  padding: clamp(1.4rem, 4vw, 3.8rem);
  color: var(--blacklight-plum);
  background: var(--frosted-paper);
  border: .22rem solid var(--deep-grape-outline);
  box-shadow: .9rem 1.1rem 0 var(--deep-grape-outline), 0 0 2rem rgba(255, 43, 214, .22);
  clip-path: polygon(0 10%, 8% 0, 38% 0, 45% 8%, 55% 8%, 62% 0, 92% 0, 100% 10%, 94% 48%, 100% 58%, 91% 100%, 61% 96%, 52% 100%, 12% 100%, 0 88%, 6% 56%, 0 46%);
}

.frosted-ticket {
  text-align: center;
  transform: rotate(var(--ticket-tilt, -2deg)) scale(var(--ticket-scale, 1));
  transition: transform 700ms cubic-bezier(.18, 1.48, .25, 1), clip-path 700ms ease;
}
body.entered .frosted-ticket { --ticket-tilt: 3deg; --ticket-scale: .92; clip-path: polygon(0 12%, 13% 0, 28% 9%, 40% 0, 49% 18%, 58% 0, 72% 11%, 91% 0, 100% 13%, 89% 41%, 100% 53%, 87% 100%, 63% 90%, 51% 100%, 31% 91%, 10% 100%, 0 86%, 13% 59%, 0 45%); }
.ticket-number { font: 400 clamp(3rem, 7vw, 7rem)/.8 var(--stamp); color: var(--mandarin-fizz); }
.frosted-ticket .micro { color: var(--deep-grape-outline); }
.tear-tabs { display: flex; justify-content: center; gap: .55rem; margin-top: 1.2rem; }
.tear-tabs span { width: 2.8rem; height: 1.3rem; background: var(--mandarin-fizz); border-radius: 0 0 1rem 1rem; transform: translateY(var(--tear, 0)) rotate(var(--rot, 0deg)); transition: transform 700ms cubic-bezier(.2, 1.5, .25, 1); }
.tear-tabs span:nth-child(2) { --rot: -3deg; background: var(--pool-blue-flash); }
.tear-tabs span:nth-child(3) { --rot: 4deg; background: var(--electric-lime); }
.tear-tabs span:nth-child(4) { --rot: -8deg; background: var(--uv-punch-pink); }
.tear-tabs span:nth-child(5) { --rot: 6deg; background: var(--foil-lavender); }
body.entered .tear-tabs span { --tear: 1.5rem; }

.paired-spotlights { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 12%, rgba(0,215,255,.24), transparent 22rem), radial-gradient(ellipse at 70% 12%, rgba(255,43,214,.22), transparent 22rem); pointer-events: none; }

.wristband-cipher { --tilt: -12deg; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 6rem); }
.wristband-stage { position: relative; z-index: 4; width: min(88vw, 44rem); height: 28rem; }
.wristband {
  position: absolute;
  left: 5%;
  width: 88%;
  height: 6.6rem;
  border: .25rem solid var(--deep-grape-outline);
  border-radius: 999px;
  color: var(--blacklight-plum);
  font: 900 clamp(1.1rem, 2.5vw, 2rem) var(--round);
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: .7rem .9rem 0 var(--deep-grape-outline);
  transition: transform 560ms cubic-bezier(.18, 1.5, .25, 1);
}
.band-a { top: 6rem; background: var(--electric-lime); transform: rotate(-13deg) translateX(var(--band-a, 0)); }
.band-b { top: 13rem; background: var(--pool-blue-flash); transform: rotate(12deg) translateX(var(--band-b, 0)); }
.wristband::before, .wristband::after { content: ""; position: absolute; top: 50%; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--blacklight-plum); transform: translateY(-50%); }
.wristband::before { left: 2rem; } .wristband::after { right: 2rem; }
.wristbands-overlap .band-a { --band-a: 2.2rem; transform: rotate(-4deg) translateX(var(--band-a)); }
.wristbands-overlap .band-b { --band-b: -2.2rem; transform: rotate(4deg) translateX(var(--band-b)); }
.revealed-glyph { position: absolute; left: 16%; bottom: 2rem; padding: 1rem 1.4rem; border: .18rem dashed var(--electric-lime); color: var(--electric-lime); background: rgba(22,11,46,.82); font-weight: 900; opacity: .25; transition: opacity 360ms ease, transform 360ms ease; }
.wristbands-overlap .revealed-glyph { opacity: 1; transform: scale(1.06); }
.mandarin-ticket { background: var(--mandarin-fizz); transform: rotate(3deg); }
.drink-ticket { position: absolute; right: 8%; bottom: 9%; padding: 1rem 4rem; color: var(--blacklight-plum); background: var(--frosted-paper); border: .2rem solid var(--deep-grape-outline); font: 400 2rem var(--stamp); clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); transform: rotate(-9deg); }

.confetti-map { --tilt: 17deg; grid-template-columns: .9fr 1.1fr; gap: 2rem; }
.sticker-sheet { transform: rotate(-4deg); }
.arrow-cloud { position: relative; z-index: 5; width: min(88vw, 45rem); height: 34rem; }
.arrow-cloud span { position: absolute; width: 1.8rem; height: 3.2rem; border-radius: .3rem; background: var(--uv-punch-pink); transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); transition: transform 600ms cubic-bezier(.16, 1.45, .26, 1), background 260ms ease; }
.arrow-cloud span:nth-child(3n) { background: var(--electric-lime); }
.arrow-cloud span:nth-child(4n) { background: var(--pool-blue-flash); }
.arrow-cloud span:nth-child(5n) { background: var(--mandarin-fizz); }
.arrow-cloud.aligned span { transform: translate(var(--ax), var(--ay)) rotate(90deg); }
.paper-crown { position: absolute; left: 8%; bottom: 10%; width: 18rem; height: 9rem; background: var(--foil-lavender); color: var(--blacklight-plum); display: grid; place-items: end center; padding: 1rem; font-weight: 900; clip-path: polygon(0 100%, 0 36%, 20% 58%, 35% 0, 50% 54%, 65% 0, 80% 58%, 100% 36%, 100% 100%, 58% 88%, 50% 100%, 42% 88%); transform: rotate(8deg); }

.tile-swap { --tilt: -4deg; grid-template-columns: 1.1fr .9fr; gap: 3rem; }
.floor-wrap { position: relative; z-index: 4; width: min(90vw, 46rem); aspect-ratio: 1; display: grid; place-items: center; }
.dance-floor { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; transform: rotate(var(--floor-rot, 0deg)); transition: transform 620ms cubic-bezier(.16, 1.35, .26, 1); }
.wedge { position: absolute; inset: 4%; border: .28rem solid var(--deep-grape-outline); color: var(--blacklight-plum); font: 900 1.1rem var(--round); cursor: pointer; clip-path: polygon(50% 50%, 100% 0, 100% 100%); transform-origin: center; filter: drop-shadow(.55rem .7rem 0 var(--deep-grape-outline)); }
.w1 { background: var(--uv-punch-pink); transform: rotate(0deg); }
.w2 { background: var(--electric-lime); transform: rotate(60deg); }
.w3 { background: var(--pool-blue-flash); transform: rotate(120deg); }
.w4 { background: var(--mandarin-fizz); transform: rotate(180deg); }
.w5 { background: var(--foil-lavender); transform: rotate(240deg); }
.w6 { background: var(--frosted-paper); transform: rotate(300deg); }
.socket-ring { position: absolute; inset: 14%; border: .45rem dashed var(--pool-blue-flash); border-radius: 50%; box-shadow: inset 0 0 2rem rgba(0,215,255,.45); pointer-events: none; }
.glow-label { background: rgba(201,167,255,.86); backdrop-filter: blur(3px); transform: rotate(5deg); }

.balloon-lock { --tilt: 10deg; grid-template-columns: .85fr 1.15fr; gap: 2rem; }
.acetate-card { background: rgba(0, 215, 255, .76); transform: rotate(-5deg); }
.balloon-cluster { position: relative; width: min(90vw, 46rem); height: 34rem; z-index: 4; }
.balloon { position: absolute; width: 9rem; height: 11rem; border: .22rem solid var(--deep-grape-outline); border-radius: 52% 48% 48% 52% / 60% 60% 40% 40%; color: var(--blacklight-plum); font: 900 1.5rem var(--round); cursor: pointer; box-shadow: .7rem .8rem 0 var(--deep-grape-outline), inset -.6rem .7rem 0 rgba(255,241,210,.32); transition: transform 650ms cubic-bezier(.16, 1.45, .26, 1); }
.b1 { left: 20%; top: 2rem; background: var(--uv-punch-pink); transform: translate(var(--tug-x, 0), var(--tug-y, 0)) rotate(-8deg); }
.b2 { left: 46%; top: 5rem; background: var(--electric-lime); transform: translate(calc(var(--tug-x, 0) * -1), var(--tug-y, 0)) rotate(7deg); }
.b3 { left: 10%; top: 16rem; background: var(--pool-blue-flash); transform: translate(var(--tug-x, 0), calc(var(--tug-y, 0) * -1)) rotate(10deg); }
.b4 { left: 60%; top: 18rem; background: var(--mandarin-fizz); transform: translate(calc(var(--tug-x, 0) * -1), calc(var(--tug-y, 0) * -1)) rotate(-6deg); }
.balloon::after { content: ""; position: absolute; left: 50%; bottom: -1.1rem; border-left: .7rem solid transparent; border-right: .7rem solid transparent; border-top: 1.2rem solid var(--deep-grape-outline); transform: translateX(-50%); }
.string { position: absolute; width: .16rem; height: 14rem; background: var(--foil-lavender); transform-origin: top; opacity: .85; }
.s1 { left: 29%; top: 12rem; transform: rotate(8deg); } .s2 { left: 55%; top: 15rem; transform: rotate(-10deg); } .s3 { left: 19%; top: 26rem; transform: rotate(-16deg); } .s4 { left: 69%; top: 28rem; transform: rotate(13deg); }
.lock-sockets { position: absolute; right: 8%; bottom: 8%; display: flex; gap: 1rem; }
.lock-sockets span { width: 5rem; height: 5rem; border: .32rem dashed var(--pool-blue-flash); border-radius: 42% 58% 46% 54%; box-shadow: 0 0 1.2rem rgba(0,215,255,.7); }

.final-snap { --tilt: 0deg; min-height: 112vh; }
.snap-circle { position: relative; width: min(92vw, 58rem); aspect-ratio: 1; z-index: 4; transform: scale(var(--circle-scale, .86)); transition: transform 820ms cubic-bezier(.12, 1.45, .24, 1); }
.snap-circle.complete { --circle-scale: 1; }
.fragment { position: absolute; inset: 4%; border: .26rem solid var(--deep-grape-outline); clip-path: polygon(50% 50%, 100% 0, 92% 44%, 100% 55%, 100% 100%); transform-origin: center; filter: drop-shadow(.7rem .85rem 0 rgba(75,21,120,.85)); transition: transform 850ms cubic-bezier(.12, 1.5, .23, 1), opacity 600ms ease; }
.f1 { background: var(--uv-punch-pink); transform: rotate(0deg) translate(-18rem, -10rem); }
.f2 { background: var(--electric-lime); transform: rotate(60deg) translate(16rem, -13rem); }
.f3 { background: var(--pool-blue-flash); transform: rotate(120deg) translate(19rem, 10rem); }
.f4 { background: var(--mandarin-fizz); transform: rotate(180deg) translate(13rem, 16rem); }
.f5 { background: var(--foil-lavender); transform: rotate(240deg) translate(-16rem, 13rem); }
.f6 { background: var(--frosted-paper); transform: rotate(300deg) translate(-20rem, 3rem); }
.snap-circle.complete .f1 { transform: rotate(0deg) translate(0, 0); }
.snap-circle.complete .f2 { transform: rotate(60deg) translate(0, 0); }
.snap-circle.complete .f3 { transform: rotate(120deg) translate(0, 0); }
.snap-circle.complete .f4 { transform: rotate(180deg) translate(0, 0); }
.snap-circle.complete .f5 { transform: rotate(240deg) translate(0, 0); }
.snap-circle.complete .f6 { transform: rotate(300deg) translate(0, 0); }
.circle-core { position: absolute; inset: 23%; display: grid; place-content: center; text-align: center; border-radius: 50%; clip-path: none; background: var(--blacklight-plum); color: var(--frosted-paper); box-shadow: inset 0 0 0 .7rem var(--deep-grape-outline), 0 0 2rem var(--uv-punch-pink); }
.circle-core h2 { font-size: clamp(2.4rem, 5.6vw, 5.5rem); }

.bounce { animation: bounceSnap 430ms cubic-bezier(.18, 1.5, .25, 1); }

@keyframes bounceSnap {
  0%, 100% { scale: 1; }
  42% { scale: 1.08; rotate: 3deg; }
  70% { scale: .97; rotate: -2deg; }
}

@media (max-width: 880px) {
  .velvet-queue, .wristband-cipher, .confetti-map, .tile-swap, .balloon-lock { grid-template-columns: 1fr; }
  .p-door { position: absolute; width: 11rem; height: 18rem; opacity: .55; }
  .p-left { left: -2rem; } .p-right { right: -2rem; }
  .tab-ring { inset: auto .5rem .5rem .5rem; display: flex; justify-content: center; gap: .25rem; pointer-events: auto; }
  .ring-tab { position: static; margin: 0; width: auto; min-width: 3.7rem; padding: .6rem .25rem; transform: translateY(var(--snap, 8px)); font-size: .65rem; }
  .vertical-marker { opacity: .35; }
  .drink-ticket, .paper-crown { display: none; }
  .circle-core { inset: 15%; }
}