:root {
  --black: #09040D;
  --vanilla: #FFF4D6;
  --blue: #24D9FF;
  --lavender: #C8B7FF;
  --cherry: #E8004C;
  --pink: #FF3FB4;
  --cola: #2A1018;
  --apple: #B7FF2A;
  --mono-neon: "Monoton", "Arial Black", Impact, system-ui, sans-serif;
  --sleek: "Outfit", Inter, ui-sans-serif, system-ui, sans-serif;
  --sticky: "Shrikhand", Georgia, "Cooper Black", serif;
  --receipt: "Space Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  color: var(--vanilla);
  background: var(--black);
  font-family: var(--sleek);
  overflow-x: hidden;
}

button, a { font: inherit; }
.grain, .sparkle-field, .cursor-gloss { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.grain {
  opacity: .19;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 244, 214, .23) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 42%, rgba(36, 217, 255, .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 78%, rgba(255, 63, 180, .2) 0 1px, transparent 1.5px);
  background-size: 34px 42px, 53px 47px, 71px 63px;
}
.cursor-gloss {
  width: 190px;
  height: 190px;
  inset: auto;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(255, 63, 180, .24), rgba(36, 217, 255, .12) 38%, transparent 68%);
  filter: blur(9px);
  opacity: .75;
}
.sparkle {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vanilla);
  box-shadow: 0 0 12px var(--pink), 0 0 22px var(--blue);
  animation: sparkleFade .9s ease-out forwards;
}
@keyframes sparkleFade { to { transform: translateY(-42px) scale(.15) rotate(180deg); opacity: 0; } }

.charm-nav {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 14px;
  padding: 14px 10px;
  border: 1px solid rgba(200, 183, 255, .38);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(42,16,24,.72), rgba(9,4,13,.86));
  box-shadow: inset 0 0 20px rgba(255,255,255,.08), 0 0 30px rgba(255,63,180,.24);
}
.bead {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  background: radial-gradient(circle at 30% 28%, var(--vanilla), var(--pink) 38%, var(--cherry) 70%, var(--cola));
  box-shadow: 0 0 0 2px rgba(255,244,214,.15), 0 0 14px rgba(255,63,180,.55);
  transition: transform .35s ease, filter .35s ease;
}
.bead:nth-child(2n) { background: radial-gradient(circle at 30% 28%, var(--vanilla), var(--blue) 38%, var(--lavender) 70%, var(--cola)); }
.bead:nth-child(3n) { background: radial-gradient(circle at 30% 28%, var(--vanilla), var(--apple) 38%, var(--blue) 70%, var(--cola)); }
.bead.active { transform: scale(1.45); filter: saturate(1.4); box-shadow: 0 0 18px var(--apple), 0 0 34px var(--pink); }
.bead span { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); opacity: 0; white-space: nowrap; font-family: var(--receipt); font-size: 10px; letter-spacing: .12em; color: var(--vanilla); }
.bead:hover span { opacity: 1; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 8vh 7vw;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,63,180,.18), transparent 34%),
    radial-gradient(circle at 80% 72%, rgba(36,217,255,.13), transparent 38%),
    linear-gradient(135deg, var(--black), var(--cola));
}
.scene::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: repeating-linear-gradient(135deg, transparent 0 20px, rgba(255,244,214,.035) 22px 24px), radial-gradient(circle, rgba(255,255,255,.04), transparent 40%);
  transform: rotate(-4deg);
}
.tiny-label {
  margin: 0 0 14px;
  font-family: var(--receipt);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apple);
}
.scene-title, .wordmark {
  font-family: var(--mono-neon);
  letter-spacing: .04em;
  text-shadow: 0 0 6px var(--vanilla), 0 0 18px var(--pink), 0 0 42px var(--blue);
}
h1, h2 { margin: 0; line-height: .95; }
h1 { font-size: clamp(46px, 8vw, 124px); font-family: var(--sticky); color: var(--vanilla); }
h2 { font-size: clamp(38px, 6vw, 88px); font-family: var(--sticky); }
p { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.45; }

.pink-alley { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,63,180,.35), transparent 23% 77%, rgba(255,63,180,.32)), radial-gradient(circle at 50% 50%, transparent 18%, rgba(9,4,13,.78) 56%); }
.vending-door {
  width: min(58vw, 560px);
  height: min(76vh, 760px);
  position: relative;
  border-radius: 34px;
  background: linear-gradient(145deg, #050208, var(--cola) 55%, #120713);
  border: 2px solid rgba(200,183,255,.45);
  box-shadow: inset 0 0 55px rgba(255,63,180,.16), 0 0 80px rgba(232,0,76,.44);
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.2,.9,.18,1), filter 1.2s ease;
}
.door-scene.unlocked .vending-door { transform: rotateY(-16deg) scale(.92); filter: brightness(1.25); }
.door-gloss { position: absolute; inset: 18px; border-radius: 26px; background: linear-gradient(105deg, transparent 0 40%, rgba(255,244,214,.12) 44%, transparent 50%), radial-gradient(circle at 50% 0, rgba(36,217,255,.2), transparent 45%); }
.wordmark { position: absolute; left: 8%; right: 8%; top: 11%; text-align: center; font-size: clamp(34px, 5vw, 70px); color: var(--pink); }
.coin-slot { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); width: 64%; padding: 18px; border-radius: 999px; text-align: center; font-family: var(--receipt); text-transform: uppercase; letter-spacing: .18em; color: var(--blue); background: linear-gradient(90deg, rgba(200,183,255,.18), rgba(255,244,214,.28), rgba(36,217,255,.2)); border: 1px solid rgba(255,244,214,.38); box-shadow: inset 0 3px 8px rgba(255,255,255,.22), 0 0 25px rgba(36,217,255,.32); }
.heart-coin { position: absolute; left: 50%; top: 61%; transform: translateX(-50%) rotate(-45deg); width: 84px; height: 84px; border: 0; color: transparent; background: var(--cherry); border-radius: 20px 20px 8px 20px; cursor: pointer; box-shadow: 0 0 28px var(--pink), inset -8px 8px 18px rgba(255,244,214,.22); transition: top .75s ease, transform .75s ease; }
.heart-coin::before, .heart-coin::after { content:""; position:absolute; width:84px; height:84px; border-radius:50%; background: var(--cherry); }
.heart-coin::before { left: 0; top: -42px; } .heart-coin::after { left: 42px; top: 0; }
.door-scene.unlocked .heart-coin { top: 47%; transform: translateX(-50%) rotate(-45deg) scale(.55); }
.iris-lollipop { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, var(--pink), var(--vanilla), var(--blue), var(--apple), var(--pink)); opacity: .88; transition: width 1s ease, height 1s ease; mix-blend-mode: screen; }
.door-scene.unlocked .iris-lollipop { width: 160vmax; height: 160vmax; }
.vending-code { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--receipt); font-size: 11px; color: var(--lavender); }
.door-copy { position: absolute; max-width: 480px; right: 7vw; bottom: 9vh; padding: 28px; border-radius: 28px; background: rgba(9,4,13,.58); border: 1px solid rgba(255,63,180,.35); backdrop-filter: blur(10px); }

.runway-scene { display: block; padding-top: 10vh; }
.runway-title { font-size: clamp(42px, 8vw, 110px); color: var(--blue); max-width: 900px; transform: rotate(-3deg); }
.lollipop-spotlight { position: absolute; width: 42vmin; height: 42vmin; border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgba(255,244,214,.95), rgba(255,63,180,.48) 18%, rgba(36,217,255,.27) 45%, transparent 70%); filter: blur(.5px); animation: lolliSpin 12s linear infinite; opacity: .75; }
.lolli-one { right: 8vw; top: 8vh; } .lolli-two { left: -6vw; bottom: 6vh; animation-direction: reverse; }
@keyframes lolliSpin { to { transform: rotate(360deg); } }
.horizontal-runway { margin-top: 12vh; display: flex; gap: 28px; overflow-x: auto; padding: 52px 12vw 70px 4vw; scroll-snap-type: x mandatory; transform: rotate(-2deg); }
.horizontal-runway::-webkit-scrollbar { height: 0; }
.candy-model { min-width: min(72vw, 410px); min-height: 300px; scroll-snap-align: center; border-radius: 34px; padding: 28px; display: grid; align-content: end; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.02)), var(--cola); border: 1px solid rgba(255,244,214,.34); box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 30px rgba(255,255,255,.08); }
.candy-model::before { content:""; position:absolute; inset:-30%; background: repeating-linear-gradient(60deg, transparent 0 18px, rgba(255,255,255,.15) 20px 22px), radial-gradient(circle at 35% 30%, rgba(255,244,214,.6), transparent 26%); animation: foilMove 5s ease-in-out infinite alternate; }
@keyframes foilMove { to { transform: translateX(38px) rotate(8deg); } }
.candy-model span, .candy-model strong, .candy-model em { position: relative; }
.candy-model span { font-family: var(--receipt); color: var(--apple); } .candy-model strong { font-family: var(--sticky); font-size: 38px; } .candy-model em { font-style: normal; color: var(--vanilla); }
.hot { --tint: var(--cherry); } .blue { --tint: var(--blue); } .green { --tint: var(--apple); } .lavender { --tint: var(--lavender); } .pink { --tint: var(--pink); }
.candy-model { box-shadow: 0 22px 70px color-mix(in srgb, var(--tint) 35%, transparent), inset 0 0 38px color-mix(in srgb, var(--tint) 28%, transparent); }
.sticky-caption { font-family: var(--sticky); color: var(--pink); font-size: clamp(28px, 4vw, 54px); transform: rotate(2deg); margin-left: 7vw; }

.rail-scene { grid-template-columns: 1fr 1fr; }
.diagonal-rail { position: absolute; width: 150vw; height: 38px; left: -24vw; top: 58%; transform: rotate(-20deg); border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--blue), var(--apple), var(--vanilla)); box-shadow: 0 0 22px var(--pink), 0 0 50px var(--blue), inset 0 -8px 16px rgba(42,16,24,.42); }
.syrup-glass { width: min(43vw, 440px); height: min(56vh, 540px); border-radius: 42% 58% 48% 52%; background: radial-gradient(circle at 28% 24%, var(--vanilla), transparent 11%), radial-gradient(circle at 60% 52%, rgba(255,63,180,.55), rgba(36,217,255,.35) 48%, rgba(9,4,13,.08) 70%); border: 1px solid rgba(255,244,214,.3); box-shadow: inset 0 0 40px rgba(255,255,255,.18), 0 0 70px rgba(36,217,255,.22); animation: syrupBlob 7s ease-in-out infinite alternate; }
@keyframes syrupBlob { to { border-radius: 55% 45% 62% 38%; transform: translateY(-18px) rotate(8deg); } }
.manicure-hand { position: absolute; left: 7vw; bottom: 12vh; width: 300px; height: 140px; filter: drop-shadow(0 0 22px rgba(255,63,180,.55)); transform: rotate(-18deg); }
.finger { position: absolute; bottom: 0; width: 58px; height: 132px; border-radius: 34px 34px 16px 16px; background: linear-gradient(#FFF4D6, #C8B7FF); }
.finger::before { content:""; position:absolute; top:-8px; left:10px; right:10px; height:26px; border-radius:50% 50% 16px 16px; background: var(--pink); box-shadow:0 0 16px var(--pink); }
.f1 { left:0; height:100px; } .f2 { left:58px; } .f3 { left:116px; height:122px; } .f4 { left:174px; height:92px; }
.wrapper-label, .dressing-copy { padding: 34px; border-radius: 30px; background: linear-gradient(135deg, rgba(255,63,180,.16), rgba(36,217,255,.10)); border: 1px solid rgba(255,244,214,.24); transform: rotate(3deg); box-shadow: inset 0 0 28px rgba(255,255,255,.08); }
.flavor-tags { position: absolute; right: 8vw; bottom: 10vh; display: flex; gap: 10px; flex-wrap: wrap; }
.flavor-tags span { font-family: var(--receipt); padding: 9px 13px; border-radius: 999px; color: var(--black); background: var(--apple); }

.booth-scene { grid-template-columns: 1fr 1fr; }
.gumball-machine { width: min(42vw, 440px); display: grid; justify-items: center; }
.glass-dome { width: 390px; max-width: 80vw; height: 390px; max-height: 80vw; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 28%, rgba(255,244,214,.8), rgba(255,63,180,.18) 24%, rgba(36,217,255,.12) 62%, rgba(9,4,13,.38)); border: 2px solid rgba(200,183,255,.45); box-shadow: inset 0 0 50px rgba(255,255,255,.18), 0 0 60px rgba(255,63,180,.3); }
.glass-dome span { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--vanilla), var(--pink) 35%, var(--cherry)); box-shadow: 0 0 18px rgba(255,63,180,.6); transition: transform .7s ease; }
.glass-dome span:nth-child(1){left:18%;top:18%;}.glass-dome span:nth-child(2){left:45%;top:15%;background:radial-gradient(circle at 30% 25%,var(--vanilla),var(--blue),var(--lavender));}.glass-dome span:nth-child(3){left:61%;top:42%;background:radial-gradient(circle at 30% 25%,var(--vanilla),var(--apple),var(--blue));}.glass-dome span:nth-child(4){left:28%;top:48%;}.glass-dome span:nth-child(5){left:48%;top:64%;background:radial-gradient(circle at 30% 25%,var(--vanilla),var(--lavender),var(--pink));}.glass-dome span:nth-child(6){left:13%;top:62%;background:radial-gradient(circle at 30% 25%,var(--vanilla),var(--apple),var(--cherry));}.glass-dome span:nth-child(7){left:68%;top:21%;}
.booth-scene.confessed .glass-dome span { transform: rotate(240deg) translateX(28px); }
.chrome-base { width: 280px; height: 150px; margin-top: -30px; display: grid; place-items: center; border-radius: 24px 24px 44px 44px; background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(200,183,255,.2), rgba(42,16,24,.95)); border: 1px solid rgba(255,244,214,.4); }
.vending-key, .pull-strip { border: 0; cursor: pointer; color: var(--black); background: linear-gradient(90deg, var(--apple), var(--blue)); border-radius: 999px; padding: 13px 22px; font-family: var(--receipt); text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 0 25px rgba(183,255,42,.35); }
.confession-text { max-width: 560px; transform: rotate(-2deg); }
.confession-text h2 { color: var(--blue); text-shadow: 0 0 25px var(--blue); }
.rolling-gumball { position: absolute; left: -90px; bottom: 12vh; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--vanilla), var(--pink) 35%, var(--cherry)); box-shadow: 0 0 24px var(--pink); transition: transform 1.35s cubic-bezier(.2,.8,.18,1); }
.booth-scene.confessed .rolling-gumball { transform: translateX(82vw) rotate(720deg); }

.dressing-scene { grid-template-columns: 1fr 1fr; }
.foil-peel { position: absolute; inset: 0; background: conic-gradient(from 90deg at 20% 20%, rgba(255,244,214,.34), rgba(255,63,180,.22), rgba(36,217,255,.26), rgba(200,183,255,.32), rgba(255,244,214,.34)); clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%); opacity: .8; transition: transform 1s ease; }
.dressing-scene.revealed .foil-peel { transform: translateX(-38%) rotate(-8deg); }
.heart-mirror { position: relative; width: min(42vw, 420px); height: min(42vw, 420px); transform: rotate(-45deg); background: radial-gradient(circle at 30% 30%, rgba(255,244,214,.8), rgba(36,217,255,.28) 30%, rgba(255,63,180,.16) 64%, rgba(9,4,13,.8)); border-radius: 42px 42px 10px 42px; box-shadow: inset 0 0 42px rgba(255,255,255,.22), 0 0 60px rgba(200,183,255,.32); }
.heart-mirror::before, .heart-mirror::after { content:""; position:absolute; width:100%; height:100%; border-radius:50%; background: inherit; }
.heart-mirror::before { top:-50%; left:0; } .heart-mirror::after { left:50%; top:0; }
.ponytail-neon { position: absolute; z-index: 2; width: 210px; height: 160px; border: 12px solid var(--pink); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; transform: rotate(45deg); left: 95px; top: 80px; filter: drop-shadow(0 0 18px var(--pink)); }
.kiss-mark, .receipt-kiss { position: absolute; z-index: 3; width: 118px; height: 54px; background: var(--cherry); border-radius: 50% 45% 50% 45%; transform: rotate(28deg); box-shadow: 0 0 22px rgba(232,0,76,.55); }
.kiss-mark { right: 36px; bottom: 84px; }
.kiss-mark::after, .receipt-kiss::after { content:""; position:absolute; inset: 20px 6px; background: rgba(9,4,13,.45); border-radius: 50%; }
.vanity-strip { position: absolute; bottom: 8vh; left: 9vw; right: 9vw; height: 24px; display: flex; justify-content: space-around; transform: rotate(-3deg); }
.vanity-strip span { width: 18%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--blue), var(--apple)); box-shadow: 0 0 20px var(--pink); }

.receipt-scene { background: radial-gradient(circle at 50% 10%, rgba(255,63,180,.22), transparent 36%), linear-gradient(var(--black), var(--cola)); }
.receipt-curl { position: relative; width: min(84vw, 520px); min-height: 72vh; padding: 42px 36px 120px; color: var(--black); background: linear-gradient(90deg, #f7edcf, var(--vanilla), #eadcb8); border-radius: 12px 12px 80px 80px; box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 -24px 45px rgba(42,16,24,.12); transform: rotate(2deg); overflow: hidden; }
.receipt-curl::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(42,16,24,.07) 19px 20px); }
.receipt-code, .receipt-curl h2, .thermal-lines, .receipt-kiss { position: relative; z-index: 2; }
.receipt-code { font-family: var(--receipt); letter-spacing: .14em; font-size: 12px; }
.receipt-curl h2 { font-family: var(--mono-neon); color: var(--cherry); font-size: clamp(42px, 8vw, 78px); text-shadow: none; }
.thermal-lines { display: grid; gap: 13px; margin-top: 28px; font-family: var(--receipt); text-transform: uppercase; }
.thermal-lines span { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.receipt-scene.printed .thermal-lines span { opacity: 1; transform: translateY(0); }
.thermal-lines span:nth-child(2) { transition-delay: .16s; } .thermal-lines span:nth-child(3) { transition-delay: .32s; } .thermal-lines span:nth-child(4) { transition-delay: .48s; } .thermal-lines span:nth-child(5) { transition-delay: .64s; }
.receipt-kiss { right: 44px; bottom: 38px; }
.pull-strip { position: absolute; bottom: 6vh; right: 9vw; }

@media (max-width: 820px) {
  .scene, .rail-scene, .booth-scene, .dressing-scene { display: block; padding: 9vh 7vw; }
  .vending-door { width: 78vw; height: 66vh; margin: 0 auto; }
  .door-copy { position: relative; right: auto; bottom: auto; margin-top: -8vh; }
  .charm-nav { right: 8px; }
  .syrup-glass, .heart-mirror { width: 70vw; height: 70vw; margin: 8vh auto; }
  .wrapper-label, .dressing-copy, .confession-text { transform: none; }
  .manicure-hand { opacity: .55; }
}