/* Layout: a single scroll "flight" — night-sky hero, flavor planets, a dipping lab, then cream sections for parties, crew and FAQ. One look, no theme switch. */
:root{
  --deep:#1E1546; --deep-2:#2A1F5C; --slab:#3A2C7A;
  --pink:#FF6FAE; --pink-text:#B8155F; --pink-soft:#FF8CC0;
  --mint:#5FE0BC; --cream:#FFF4EC; --white:#FFFFFF;
  --ink:#1E1546; --muted:#5B5280; --muted-dark:#C9C1E6; --line:#E6DCEB;
  --choc:#5A3A2E;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --sans:"Figtree","Helvetica Neue",Arial,sans-serif;
  --r-lg:24px; --r-pill:999px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--deep);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--sans);text-decoration:none;padding:16px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn-pink{background:var(--pink);color:var(--deep);box-shadow:0 8px 0 -2px #c2477f}
.btn-ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,244,236,.5)}
.btn-deep{background:var(--deep);color:var(--cream)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--deep)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(30,21,70,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,244,236,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.logo .dot{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb3d4 0 18%,var(--pink) 40%,#d94d8f 100%);position:relative;flex:none}
.logo .dot::after{content:"";position:absolute;left:11px;top:22px;width:4px;height:12px;border-radius:2px;background:var(--cream)}
.links{display:flex;gap:26px;font-weight:600;font-size:15px}
.links a{text-decoration:none;opacity:.85}
.links a:hover{opacity:1;color:var(--pink-soft)}
.nav .btn{padding:12px 20px;font-size:15px}
@media (max-width:820px){.links{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:72px 120px}
#stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(44px,7.4vw,96px);font-weight:700}
.hero h1 .pink{color:var(--pink)}
.hero p.lede{font-size:clamp(18px,2vw,21px);color:var(--muted-dark);max-width:30em;margin:22px 0 32px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero .where{margin-top:28px;font-size:14px;color:var(--muted-dark);display:flex;align-items:center;gap:8px}
.hero .where i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(95,224,188,.2)}
.kosmo-stage{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
.orbit{position:absolute;inset:6%;border:2px dashed rgba(255,244,236,.18);border-radius:50%}
.orbit.o2{inset:20%;border-color:rgba(95,224,188,.25)}
.planet{position:absolute;border-radius:50%}
.p-mint{width:15%;aspect-ratio:1;left:2%;top:58%;background:radial-gradient(circle at 35% 30%,#b9f5e3,var(--mint) 45%,#2fae8c)}
.p-pink{width:9%;aspect-ratio:1;right:6%;top:12%;background:radial-gradient(circle at 35% 30%,#ffd0e5,var(--pink) 50%,#c2477f)}
.p-cream{width:6%;aspect-ratio:1;right:14%;bottom:12%;background:radial-gradient(circle at 35% 30%,#fff,var(--cream) 50%,#e3cfc2)}
#kosmo{position:absolute;left:12%;top:8%;width:76%;animation:bob 6s ease-in-out infinite;will-change:transform}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}

/* marquee */
.ticker{background:var(--pink);color:var(--deep);overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg);margin:-28px -10px 0;position:relative;z-index:2}
.ticker div{display:inline-block;padding:14px 0;font:700 18px/1 var(--display);animation:slide 28s linear infinite}
.ticker span{margin:0 22px}
@keyframes slide{to{transform:translateX(-50%)}}

/* flavors */
.section{padding-block:110px}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.head h2{font-size:clamp(34px,4.6vw,56px)}
.head p{max-width:28em;color:var(--muted-dark);margin:0}
.flavors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.flavors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.flavors{grid-template-columns:minmax(0,1fr)}}
.flavor{position:relative;background:var(--deep-2);border-radius:var(--r-lg);padding:28px 26px 26px;overflow:hidden;display:flex;flex-direction:column;gap:6px;transition:transform .3s ease}
.flavor:hover{transform:translateY(-6px)}
.flavor .orb{width:132px;aspect-ratio:1;border-radius:50%;margin:6px 0 18px;position:relative;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 7%,transparent 22%),var(--c);box-shadow:inset -14px -18px 0 rgba(0,0,0,.16)}
.flavor .orb::before{content:"";position:absolute;left:-18%;right:-18%;top:44%;height:16%;border-radius:50%;border:3px solid var(--ring);transform:rotate(-14deg);opacity:.9}
.flavor .orb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--sprinkle) 0 2px,transparent 3px) 0 0/22px 22px;opacity:.55;mask:radial-gradient(circle at 60% 70%,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle at 60% 70%,#000 30%,transparent 70%)}
.flavor .tag{position:absolute;top:22px;right:22px;background:var(--mint);color:var(--deep);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill)}
.flavor h3{font-size:22px}
.flavor .planet-name{color:var(--pink-soft);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.flavor p{margin:4px 0 18px;color:var(--muted-dark);font-size:15px}
.flavor .btn{margin-top:auto;align-self:flex-start;padding:12px 20px;font-size:15px}

/* dip lab */
.lab{background:radial-gradient(1200px 500px at 80% 0%,rgba(255,111,174,.18),transparent 60%),var(--deep-2);border-radius:40px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:860px){.lab{grid-template-columns:1fr;padding:32px 22px}}
.lab h2{font-size:clamp(32px,4vw,48px)}
.lab p{color:var(--muted-dark)}
.pop-stage{position:relative;display:grid;place-items:center;min-height:380px}
.pop-stage svg{width:min(320px,80%);height:auto;overflow:visible}
#coat{transition:fill .5s ease}
.drip{transition:fill .5s ease, transform .6s cubic-bezier(.2,.9,.3,1.3)}
.dipping .drip{transform:translateY(6px)}
.choices{display:flex;flex-direction:column;gap:22px;margin-top:26px}
.choices fieldset{border:0;padding:0;margin:0}
.choices legend{font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:var(--cream)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches label{cursor:pointer}
.swatches input{position:absolute;opacity:0;pointer-events:none}
.swatches span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 10px;border-radius:var(--r-pill);background:rgba(255,244,236,.08);font-weight:600;font-size:15px;transition:background .2s}
.swatches span i{width:22px;height:22px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.swatches input:checked + span{background:var(--cream);color:var(--deep)}
.swatches input:focus-visible + span{outline:3px solid var(--mint);outline-offset:2px}
.summary{margin-top:6px;font-size:15px;color:var(--muted-dark)}
.summary b{color:var(--cream)}

/* cream sections */
.light{background:var(--cream);color:var(--ink)}
.light .head p,.light p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
@media (max-width:820px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--white);border-radius:var(--r-lg);padding:30px;border:1px solid var(--line)}
.step .n{font-family:var(--display);font-size:15px;font-weight:700;color:var(--pink-text);letter-spacing:.06em}
.step h3{font-size:22px;margin:10px 0 8px}
.step p{margin:0;font-size:16px}
.party-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.party-cta small{color:var(--muted);font-size:14px}

.crew{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
@media (max-width:860px){.crew{grid-template-columns:1fr}}
.crew-art{background:var(--deep);border-radius:40px;aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden}
.crew-art svg{width:70%}
.crew h2{font-size:clamp(32px,4vw,50px);margin-bottom:18px}
.names{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.names span{background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 16px;font-weight:700;font-size:15px}
.names span b{color:var(--pink-text)}

.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:19px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;color:var(--pink-text);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;max-width:40em}

/* final */
.final{text-align:center;position:relative;overflow:hidden}
.final h2{font-size:clamp(40px,7vw,88px)}
.final p{color:var(--muted-dark);max-width:30em;margin:20px auto 34px}
footer{border-top:1px solid rgba(255,244,236,.1);padding-block:36px;font-size:14px;color:var(--muted-dark)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .kosmo-stage{max-width:380px;order:-1}
  .hero{padding-block:32px 96px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.nav .links a[aria-current="page"]{opacity:1;color:var(--pink-soft)}
.page-hero{position:relative;overflow:hidden;padding-block:80px 64px}
.page-hero h1{font-size:clamp(40px,6vw,76px);font-weight:700;position:relative}
.page-hero p.lede{position:relative;font-size:clamp(18px,2vw,21px);color:var(--muted-dark);max-width:32em;margin:20px 0 0}
.page-hero .eyebrow{position:relative}
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.teaser{grid-template-columns:1fr}}
.teaser a{display:block;text-decoration:none;border-radius:32px;padding:40px;min-height:260px;position:relative;overflow:hidden;transition:transform .3s ease}
.teaser a:hover{transform:translateY(-6px)}
.teaser .t-pink{background:var(--pink);color:var(--deep)}
.teaser .t-mint{background:var(--mint);color:var(--deep)}
.teaser h3{font-size:clamp(26px,3vw,36px);max-width:12em}
.teaser p{margin:12px 0 0;max-width:24em;font-weight:600}
.teaser .go{position:absolute;right:32px;bottom:28px;font:700 15px/1 var(--sans)}
.teaser .ring{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:3px dashed rgba(30,21,70,.35)}

/* hero motion */
.hero{min-height:min(860px,100svh)}
.kosmo-stage{transform:translate(calc(var(--mx,0)*14px),calc(var(--my,0)*14px));transition:transform .4s ease-out}
.kosmo-stage .glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(255,111,174,.45),rgba(95,224,188,.12) 55%,transparent 70%);filter:blur(10px);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08);opacity:.8}}
.orbit{position:absolute;border-radius:50%;border:2px dashed rgba(255,244,236,.16);animation:spin 40s linear infinite}
.orbit.o1{inset:4%}
.orbit.o2{inset:18%;border-color:rgba(95,224,188,.28);animation-duration:26s;animation-direction:reverse}
.orbit.o3{inset:-4%;border-color:rgba(255,111,174,.18);animation-duration:70s}
.orbit .planet{position:absolute;left:50%;top:0;translate:-50% -50%}
.orbit .p-pink{width:9%;left:85%;top:14%}
.orbit .p-mint{width:16%;left:2%;top:50%}
.orbit .p-cream{width:5%;left:50%;top:0}
@keyframes spin{to{transform:rotate(360deg)}}
.sprinkle-ring{position:absolute;inset:10%;animation:spin 18s linear infinite reverse}
.sprinkle-ring i{position:absolute;left:50%;top:50%;width:14px;height:5px;border-radius:3px;background:var(--c);transform:rotate(var(--a)) translateX(min(230px,44vw)) rotate(45deg);opacity:.9}
#kosmo{z-index:2}
#kosmo .flame{transform-origin:200px 412px;animation:flicker .18s ease-in-out infinite alternate}
@keyframes flicker{from{transform:scaleY(.82) scaleX(1.06)}to{transform:scaleY(1.12) scaleX(.94)}}
.rise .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.rise .w>span{display:inline-block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.rise .w:nth-of-type(1)>span{animation-delay:.05s}.rise .w:nth-of-type(2)>span{animation-delay:.15s}
.rise .pink .w:nth-of-type(1)>span{animation-delay:.35s}.rise .pink .w:nth-of-type(2)>span{animation-delay:.45s}
@keyframes up{to{transform:none}}
@media (prefers-reduced-motion:reduce){.rise .w>span{transform:none}}