/* ==========================================================================
   MissPookie — one stylesheet, no build step.
   Fonts are self-hosted from assets/fonts/ so nothing loads from Google.
   ========================================================================== */

@font-face {
  font-family: 'Bagel Fat One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bagel-fat-one.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/titan-one.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/outfit.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   MissPookie — chaotic comfy
   1. tokens      5. nav        9.  streams    13. palace
   2. base        6. hero       10. tiktok     14. contact
   3. helpers     7. ticker     11. emotes     15. footer / modal
   4. buttons     8. about      12. shop       16. responsive
   ========================================================================== */

/* ------------------------------- 1. tokens ------------------------------- */
:root{
  /* her palette, pulled from the art + the old site */
  --pink:    #FF2E96;
  --candy:   #FBB1DE;
  --lilac:   #C19EE9;
  --violet:  #B482C9;
  --cyan:    #A5EBF6;
  --cream:   #FFF3FA;

  --ink:     #09050F;
  --ink-2:   #120A1C;
  --ink-3:   #1B1028;

  --txt:     #F6ECFB;
  --txt-dim: #BCA8CE;
  --line:    rgba(255,255,255,.10);
  --glass:   rgba(255,255,255,.045);

  --grad-fox:   linear-gradient(100deg, var(--pink) 0%, var(--candy) 30%, var(--lilac) 62%, var(--cyan) 100%);
  --grad-hot:   linear-gradient(100deg, var(--pink), var(--lilac));
  --grad-cool:  linear-gradient(100deg, var(--lilac), var(--cyan));

  --shadow:     0 24px 60px -18px rgba(0,0,0,.75);
  --glow-pink:  0 0 40px -6px rgba(255,46,150,.55);
  --glow-lilac: 0 0 46px -8px rgba(193,158,233,.55);

  --r:   18px;
  --r-lg: 28px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
  --pop:  cubic-bezier(.34,1.56,.64,1);

  --f-display: 'Bagel Fat One', system-ui, sans-serif;
  --f-brand:   'Titan One', system-ui, sans-serif;
  --f-body:    'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* -------------------------------- 2. base -------------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
html.is-locked{ overflow:hidden }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  color:var(--txt);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* layered background: deep plum with drifting candy light */
body::before{
  content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(70% 55% at 12% 4%,  rgba(255,46,150,.22), transparent 62%),
    radial-gradient(60% 50% at 88% 12%, rgba(165,235,246,.14), transparent 62%),
    radial-gradient(80% 60% at 50% 100%,rgba(193,158,233,.20), transparent 68%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 45%, var(--ink) 100%);
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button,input,textarea{ font:inherit; color:inherit }
h1,h2,h3{ margin:0; line-height:1.02; letter-spacing:-.01em }
p{ margin:0 0 1em }
ul,ol,dl{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:8px }

.sprite{ position:absolute; width:0; height:0 }
.ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none }

.skip{
  position:fixed; top:-100px; left:16px; z-index:200; padding:.7rem 1.1rem;
  background:var(--pink); color:#fff; border-radius:0 0 12px 12px; font-weight:700;
  transition:top .25s var(--ease);
}
.skip:focus{ top:0 }

.noscript-note{
  display:none; margin:0; padding:5.5rem 1.5rem 1.2rem; text-align:center;
  background:rgba(255,46,150,.12); border-bottom:1px solid var(--line); font-size:.95rem;
}
.noscript-note a{ color:var(--candy); font-weight:700; text-decoration:underline }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }

/* ------------------------------ 3. helpers ------------------------------- */
.sec{ position:relative; padding:clamp(5rem,9vw,9rem) 0 }
.sec__head{ margin-bottom:clamp(2.2rem,4vw,3.4rem) }
.sec__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap }
.sec__lede{ color:var(--txt-dim); max-width:46ch; margin-top:.9rem }

.sec__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.7rem,7.5vw,5.6rem);
  line-height:.95; letter-spacing:-.02em;
}
.sec__title em{
  font-style:normal;
  background:var(--grad-fox); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.kicker{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 .85rem;
  font-family:var(--f-brand); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--candy);
}
.kicker__dot{
  width:.55rem; height:.55rem; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 4px rgba(255,46,150,.18); animation:pulse 2.4s infinite
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 9px rgba(255,46,150,0) } }

.sub{
  font-family:var(--f-brand); font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.06em; text-transform:uppercase; margin:3.2rem 0 1.3rem; color:var(--cream);
}
.sub__note{ color:var(--candy) }

.link-arrow{
  font-weight:600; color:var(--candy); border-bottom:2px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover{ color:var(--cyan); border-color:var(--cyan) }
.link-arrow span{ display:inline-block; transition:transform .3s var(--pop) }
.link-arrow:hover span{ transform:translateX(5px) }

.card{
  position:relative; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--r); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .75s var(--ease), transform .85s var(--ease); transition-delay:calc(var(--d,0) * 85ms) }

/* ambient layers */
.aurora{ position:fixed; inset:0; z-index:-2; pointer-events:none; filter:blur(70px); opacity:.5 }
.aurora i{ position:absolute; border-radius:50%; display:block; mix-blend-mode:screen }
.aurora i:nth-child(1){ width:44vw; height:44vw; left:-10vw; top:5vh;  background:rgba(255,46,150,.30); animation:float1 22s ease-in-out infinite }
.aurora i:nth-child(2){ width:38vw; height:38vw; right:-8vw; top:38vh; background:rgba(165,235,246,.22); animation:float2 26s ease-in-out infinite }
.aurora i:nth-child(3){ width:50vw; height:50vw; left:22vw; bottom:-18vh; background:rgba(193,158,233,.26); animation:float3 30s ease-in-out infinite }
@keyframes float1{ 50%{ transform:translate(12vw,10vh) scale(1.15) } }
@keyframes float2{ 50%{ transform:translate(-10vw,-8vh) scale(1.2) } }
@keyframes float3{ 50%{ transform:translate(8vw,-12vh) scale(.9) } }

.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.petals{ position:fixed; inset:0; z-index:0; pointer-events:none }

.scrollbar{ position:fixed; top:0; left:0; right:0; height:4px; z-index:120; pointer-events:none }
.scrollbar i{ display:block; height:100%; width:0; background:var(--grad-fox); box-shadow:0 0 18px rgba(255,46,150,.8) }

/* custom cursor (pointer devices only) */
.cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; display:none; mix-blend-mode:screen }
.cursor b{
  position:absolute; inset:-19px; display:block; border-radius:50%;
  background:radial-gradient(circle, rgba(255,46,150,.55), rgba(193,158,233,.18) 55%, transparent 70%);
  transition:transform .3s var(--pop);
}
.cursor.is-hot b{ transform:scale(1.9) }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block } }

.toast{
  position:fixed; left:50%; bottom:2rem; z-index:160; transform:translate(-50%,140%);
  background:var(--grad-hot); color:#180a15; font-weight:700; padding:.8rem 1.4rem; border-radius:999px;
  box-shadow:var(--glow-pink); transition:transform .5s var(--pop); white-space:nowrap;
}
.toast.in{ transform:translate(-50%,0) }

/* floaty emote spawned on click */
.spark{
  position:fixed; z-index:140; pointer-events:none; width:46px; height:46px;
  animation:sparkUp 1.5s var(--ease) forwards;
}
@keyframes sparkUp{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(0deg) }
  15%{ opacity:1; transform:translate(-50%,-60%) scale(1.15) rotate(8deg) }
  100%{ opacity:0; transform:translate(-50%,-260%) scale(.7) rotate(-22deg) }
}

/* ------------------------------- 4. buttons ------------------------------ */
.btn{
  --bg:var(--glass);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.6rem; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); font-weight:700; letter-spacing:.01em; cursor:pointer;
  transition:transform .35s var(--pop), box-shadow .35s var(--ease), border-color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px) }
.btn--primary{
  border-color:transparent; color:#26060f;
  background:var(--grad-fox); background-size:200% 100%;
  box-shadow:var(--glow-pink); animation:slide 6s linear infinite;
}
@keyframes slide{ to{ background-position:200% 0 } }
.btn--primary:hover{ box-shadow:0 0 54px -6px rgba(255,46,150,.85) }
.btn--ghost:hover{ border-color:var(--candy); box-shadow:var(--glow-lilac) }
.btn--live{ padding:.6rem 1.15rem; font-size:.92rem }

.dot{
  width:.6rem; height:.6rem; border-radius:50%; background:var(--txt-dim); flex:none;
  transition:background .4s;
}
.is-live .dot, .dot.is-live{ background:#ff3b5c; box-shadow:0 0 0 0 rgba(255,59,92,.7); animation:live 1.8s infinite }
@keyframes live{ 70%{ box-shadow:0 0 0 10px rgba(255,59,92,0) } }

/* --------------------------------- 5. nav -------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; gap:1.4rem;
  padding:.9rem clamp(1rem,3vw,2.2rem);
  transition:background .4s var(--ease), box-shadow .4s, padding .4s var(--ease), backdrop-filter .4s;
}
.nav.is-stuck{
  background:rgba(9,5,15,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000; padding-block:.5rem;
}
.nav__logo img{ width:clamp(78px,7vw,104px); transition:transform .5s var(--pop); }
.nav__logo:hover img{ transform:rotate(-5deg) scale(1.06) }

.nav__links{ position:relative; display:flex; gap:.2rem; margin-left:auto }
.nav__links a{
  position:relative; z-index:1; padding:.55rem .95rem; border-radius:999px;
  font-weight:600; font-size:.95rem; color:var(--txt-dim);
  transition:color .3s var(--ease);
}
.nav__links a:hover, .nav__links a.is-active{ color:#fff }
.nav__blob{
  position:absolute; z-index:0; top:0; left:0; height:100%; width:0; border-radius:999px;
  background:var(--glass); border:1px solid var(--line); opacity:0;
  transition:transform .45s var(--pop), width .45s var(--pop), opacity .3s;
}
.nav__links:hover .nav__blob, .nav__blob.is-on{ opacity:1 }

.burger{ display:none; width:44px; height:38px; background:none; border:0; cursor:pointer; padding:8px }
.burger i{ display:block; height:2.5px; background:var(--txt); border-radius:2px; transition:transform .4s var(--pop), opacity .3s }
.burger i + i{ margin-top:6px }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(8.5px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg) }

/* -------------------------------- 6. hero -------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:8rem 0 4rem; overflow:hidden;
}
.hero__glow{
  position:absolute; width:70vw; height:70vw; max-width:900px; max-height:900px;
  right:-8vw; top:50%; border-radius:50%;
  translate:0 calc(-50% + var(--py,0px));
  background:radial-gradient(circle, rgba(255,46,150,.30), transparent 62%); filter:blur(30px);
}
.hero__grid{
  position:relative; z-index:2;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.5rem,4vw,4rem); align-items:center;
}

.hero__title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3.6rem,13vw,10rem); line-height:.82; letter-spacing:-.03em;
  margin:.1em 0 .28em;
}
.hero__title .split{ display:block; position:relative }
.hero__title .split--alt{
  background:var(--grad-fox); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:slide 8s linear infinite;
  filter:drop-shadow(0 6px 26px rgba(255,46,150,.35));
}
/* NB: no will-change / lingering compositing here — a promoted layer on the
   letters stops the parent's background-clip:text from painting at all. */
.hero__title .ch{ display:inline-block }

.hero__tag{
  font-family:var(--f-brand); font-size:clamp(1.05rem,2.4vw,1.6rem);
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .9rem; color:var(--cream);
}
.hero__tag em{ font-style:normal; color:var(--pink) }
.hero__blurb{ max-width:44ch; color:var(--txt-dim); font-size:1.08em }
.flame{ display:inline-block; animation:flick 1.6s ease-in-out infinite }
@keyframes flick{ 50%{ transform:translateY(-3px) rotate(-8deg) scale(1.12) } }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin:1.8rem 0 2rem }

.hero__socials{ display:flex; flex-wrap:wrap; gap:.55rem }
.hero__socials a{
  --t:var(--candy);
  display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--glass); border:1px solid var(--line); color:var(--txt-dim);
  transition:transform .4s var(--pop), color .3s, border-color .3s, box-shadow .4s;
}
.hero__socials a:hover{
  transform:translateY(-6px) rotate(-6deg); color:var(--t); border-color:var(--t);
  box-shadow:0 12px 30px -12px var(--t);
}
.hero__socials svg{ width:20px; height:20px }

.hero__art{ position:relative; justify-self:center; width:min(100%,460px) }
.hero__ring{
  position:absolute; inset:-6%; border-radius:50%;
  background:conic-gradient(from 0deg, var(--pink), var(--candy), var(--cyan), var(--lilac), var(--pink));
  filter:blur(26px); opacity:.55; animation:spin 16s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.hero__portrait{
  position:relative; border-radius:34px 34px 30px 30px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow), 0 0 80px -20px rgba(255,46,150,.6);
  transform:translateZ(0);
  transition:transform .6s var(--ease);
}
.hero__portrait img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 12%;
  transition:transform 1.1s var(--ease);
}
.hero__portrait:hover img{ transform:scale(1.045) }
.hero__portrait.is-pet{ animation:wiggle .6s var(--pop) }
@keyframes wiggle{ 25%{ transform:rotate(1.6deg) scale(1.02) } 60%{ transform:rotate(-1.4deg) scale(1.01) } }
.hero__pet{
  position:absolute; left:50%; bottom:1.1rem; translate:-50% 0;
  padding:.45rem 1rem; border-radius:999px; font-size:.84rem; font-weight:700;
  background:rgba(9,5,15,.6); backdrop-filter:blur(10px); border:1px solid var(--line);
  opacity:0; transition:opacity .35s, translate .4s var(--pop);
}
.hero__portrait:hover .hero__pet{ opacity:1; translate:-50% -6px }

.hero__badge{
  position:absolute; z-index:3; padding:.5rem 1rem; border-radius:999px;
  font-family:var(--f-brand); font-size:.8rem; letter-spacing:.08em;
  background:rgba(9,5,15,.62); border:1px solid var(--line); backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.hero__badge--1{ top:9%; left:-12%; color:var(--candy); translate:0 var(--py,0px); animation:bob 5s ease-in-out infinite }
.hero__badge--2{ bottom:14%; right:-9%; color:var(--cyan); translate:0 var(--py,0px); animation:bob 6.5s ease-in-out infinite reverse }
@keyframes bob{ 50%{ transform:translateY(-12px) rotate(-3deg) } }

.hero__deco{
  position:absolute; z-index:1; pointer-events:none; opacity:.9;
  filter:drop-shadow(0 10px 28px rgba(0,0,0,.5));
  width:clamp(64px,8vw,130px);
  translate:0 var(--py,0px);
}
/* decorations live in the outer margins so they never fight the copy */
.hero__deco--flame1{ top:14%;   left:1.5%;  animation:bob 7s   ease-in-out infinite }
.hero__deco--flame2{ bottom:8%; left:8%;    animation:bob 8.5s ease-in-out infinite reverse }
.hero__deco--candy1{ top:9%;    right:3%;   animation:bob 9s   ease-in-out infinite }
.hero__deco--candy2{ bottom:10%; right:7%;  animation:bob 10s  ease-in-out infinite reverse }
.hero__deco--boba  { top:62%;   left:.5%;   animation:bob 11s  ease-in-out infinite }
@media (max-width:1500px){ .hero__deco{ opacity:.55 } }

.hero__scroll{
  position:absolute; z-index:3; left:50%; bottom:1.6rem; translate:-50% 0;
  display:grid; justify-items:center; gap:.5rem;
  font-family:var(--f-brand); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--txt-dim);
}
.hero__scroll i{
  width:26px; height:44px; border:2px solid var(--line); border-radius:999px; position:relative;
}
.hero__scroll i::after{
  content:''; position:absolute; left:50%; top:8px; translate:-50% 0;
  width:5px; height:9px; border-radius:3px; background:var(--pink);
  animation:mouse 1.9s var(--ease) infinite;
}
@keyframes mouse{ 60%{ transform:translateY(16px); opacity:.1 } 100%{ opacity:0 } }

/* ------------------------------- 7. ticker ------------------------------- */
/* the tilted band is wider than the screen on purpose — this clips the
   overhang so it never adds horizontal scroll */
.ticker-wrap{ position:relative; z-index:2; overflow:hidden }

.ticker{
  position:relative; z-index:2; overflow:hidden; padding:.9rem 0;
  background:var(--grad-fox); color:#210713;
  border-block:1px solid rgba(0,0,0,.25);
  transform:rotate(-1.4deg) scale(1.04);
  box-shadow:0 20px 60px -30px rgba(255,46,150,.9);
}
.ticker__track{ display:flex; width:max-content; will-change:transform }
.ticker__track span{
  font-family:var(--f-display); font-size:clamp(1rem,2.2vw,1.6rem);
  padding-inline:1.2rem; white-space:nowrap; display:inline-flex; align-items:center; gap:1.2rem;
}

/* -------------------------------- 8. about ------------------------------- */
.about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.8rem,4vw,4rem); align-items:start }
.about__art{ position:relative; margin:0; border-radius:var(--r-lg); overflow:visible }
.about__art img:first-child{
  border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--shadow), var(--glow-lilac);
}
.about__sticker{
  position:absolute; right:-10%; bottom:-10%; width:36%;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)); animation:bob 6s ease-in-out infinite;
}
.about__body p{ color:var(--txt-dim) }
.about__body strong{ color:var(--cream); font-weight:700 }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 }
.chips li{
  padding:.4rem .9rem; border-radius:999px; font-size:.86rem; font-weight:600;
  background:var(--glass); border:1px solid var(--line); color:var(--candy);
  transition:transform .4s var(--pop), background .3s, color .3s;
}
.chips li:hover{ transform:translateY(-4px) rotate(-3deg); background:var(--grad-hot); color:#26060f }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.2rem 1.6rem; margin-top:1.4rem }
.facts div{ padding:.75rem 0; border-top:1px solid var(--line) }
.facts dt{ font-family:var(--f-brand); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lilac) }
.facts dd{ margin:.2rem 0 0; font-weight:600 }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:clamp(2.5rem,5vw,4.5rem);
}
.stats li{ padding:1.6rem 1.2rem; text-align:center; border-radius:var(--r); background:var(--glass); border:1px solid var(--line) }
.stats b{
  display:block; font-family:var(--f-display); font-weight:400; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1;
  background:var(--grad-fox); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats span{ display:block; margin-top:.45rem; font-size:.85rem; color:var(--txt-dim) }

/* ------------------------------- 9. streams ------------------------------ */
.player{ display:grid; grid-template-columns:1.55fr .45fr; gap:1.4rem; align-items:stretch }
.player__frame{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:#000; box-shadow:var(--shadow), var(--glow-pink);
}
.player__frame iframe{ width:100%; height:100%; border:0; display:block }
.player__poster{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; display:block }
.player__poster img{ width:100%; height:100%; object-fit:cover; opacity:.55; transition:opacity .5s, transform 1.2s var(--ease) }
.player__poster:hover img{ opacity:.72; transform:scale(1.04) }
.player__play{
  position:absolute; inset:50% auto auto 50%; translate:-50% -50%;
  display:grid; place-items:center; width:84px; height:84px; border-radius:50%;
  background:var(--grad-fox); color:#26060f; box-shadow:var(--glow-pink);
  transition:transform .45s var(--pop);
}
.player__play .ico{ width:30px; height:30px; margin-left:4px }
.player__poster:hover .player__play{ transform:translate(-50%,-50%) scale(1.12) }
.player__label{
  position:absolute; left:50%; bottom:1.4rem; translate:-50% 0; font-weight:700; font-size:.9rem; color:var(--cream);
}
.player__side{
  display:flex; flex-direction:column; gap:1rem; justify-content:center;
  padding:1.6rem; border-radius:var(--r-lg); background:var(--glass); border:1px solid var(--line);
}
.player__status{ display:flex; align-items:center; gap:.55rem; margin:0; font-weight:700 }
.player__note{ margin:0; color:var(--txt-dim); font-size:.95rem }
.player__side .btn{ align-self:flex-start }

.vods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:1.1rem }
.vods li.is-hidden{ display:none }
.more{ display:grid; place-items:center; margin-top:2rem }

.vcard{
  display:block; height:100%; border-radius:var(--r); overflow:hidden;
  background:var(--glass); border:1px solid var(--line); cursor:pointer; text-align:left; padding:0; width:100%;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.vcard:hover{ transform:translateY(-8px); border-color:var(--candy); box-shadow:0 26px 50px -26px rgba(255,46,150,.7) }
.vcard__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#150c20 }
.vcard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.vcard:hover .vcard__thumb img{ transform:scale(1.08) }
.vcard__thumb::after{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(9,5,15,.85));
}
.vcard__len{
  position:absolute; z-index:2; right:.6rem; bottom:.6rem; padding:.18rem .5rem; border-radius:7px;
  background:rgba(9,5,15,.8); font-size:.76rem; font-weight:700; letter-spacing:.02em;
}
.vcard__tag{
  position:absolute; z-index:2; left:.6rem; top:.6rem; padding:.2rem .6rem; border-radius:999px;
  font-family:var(--f-brand); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--grad-hot); color:#26060f;
}
.vcard__play{
  position:absolute; z-index:2; inset:50% auto auto 50%; translate:-50% -50%;
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.3);
  opacity:0; transition:opacity .35s, transform .45s var(--pop);
}
.vcard:hover .vcard__play{ opacity:1; transform:translate(-50%,-50%) scale(1.08) }
.vcard__play .ico{ width:20px; height:20px; margin-left:3px; fill:#fff }
.vcard__body{ padding:.85rem 1rem 1.1rem }
.vcard__title{
  margin:0 0 .3rem; font-weight:700; font-size:.98rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vcard__meta{ margin:0; font-size:.8rem; color:var(--txt-dim) }

/* horizontal rails — full-bleed, but 100vw includes the scrollbar, so --sbw
   (set from JS) takes it back off and keeps the page from overflowing. */
.rail{
  --bleed:calc(50% - 50vw + var(--sbw,0px) / 2);
  overflow-x:auto; overflow-y:hidden; cursor:grab; scrollbar-width:none;
  margin-inline:var(--bleed);
  padding:.6rem calc(-1 * var(--bleed)) 1.4rem;
}
.rail::-webkit-scrollbar{ display:none }
.rail.is-drag{ cursor:grabbing; scroll-behavior:auto }
.rail__track{ display:flex; gap:1rem; width:max-content }
.rail__track > li{ width:300px; flex:none }
.rail__track--tt > li{ width:230px }

/* ------------------------------ 10. youtube ------------------------------ */
.ytgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.1rem }

/* ------------------------------- 11. tiktok ------------------------------ */
.ttcard{
  display:block; width:100%; padding:0; border:1px solid var(--line); background:var(--glass);
  border-radius:22px; overflow:hidden; cursor:pointer; text-align:left;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.ttcard:hover{ transform:translateY(-8px) rotate(-1.2deg); border-color:var(--cyan); box-shadow:0 26px 50px -26px rgba(165,235,246,.6) }
.ttcard__thumb{ position:relative; aspect-ratio:9/16; overflow:hidden; background:#150c20 }
.ttcard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.ttcard:hover .ttcard__thumb img{ transform:scale(1.07) }
.ttcard__thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(9,5,15,.9)) }
.ttcard__cap{
  position:absolute; z-index:2; inset:auto .8rem .8rem; margin:0; font-size:.85rem; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ttcard__play{
  position:absolute; z-index:2; right:.7rem; top:.7rem; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; background:rgba(9,5,15,.65); border:1px solid var(--line); backdrop-filter:blur(8px);
}
.ttcard__play .ico{ width:15px; height:15px; margin-left:2px; fill:var(--cyan) }

/* ------------------------------- 12. emotes ------------------------------ */
.emotes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:.9rem }
.emotes button{
  aspect-ratio:1; display:grid; place-items:center; padding:.8rem; cursor:pointer;
  border-radius:20px; background:var(--glass); border:1px solid var(--line);
  transition:transform .45s var(--pop), background .35s, border-color .35s, box-shadow .45s;
}
.emotes button:hover{
  transform:translateY(-8px) scale(1.07) rotate(-5deg);
  border-color:var(--candy); box-shadow:0 18px 36px -18px rgba(255,46,150,.8);
  background:rgba(255,46,150,.10);
}
.emotes button:active{ transform:scale(.94) }
.emotes img{ width:100%; image-rendering:auto }

/* -------------------------------- 13. shop ------------------------------- */

/* the "she owns the place" card */
.founder{
  position:relative; display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem); align-items:center; margin-bottom:2.2rem;
  padding:clamp(1.4rem,3vw,2.4rem); border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(255,46,150,.16), rgba(193,158,233,.10) 45%, rgba(165,235,246,.12));
  border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden;
}
.founder::before{
  content:''; position:absolute; inset:-40% -10% auto auto; width:46%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,46,150,.35), transparent 65%); filter:blur(30px); pointer-events:none;
}
.founder__art{
  position:relative; z-index:1; width:100%; max-width:280px; justify-self:center;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55)); animation:bob 7s ease-in-out infinite;
}
.founder__copy{ position:relative; z-index:1 }
.founder__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 .7rem;
  font-family:var(--f-brand); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--candy);
}
.founder__title{
  font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem,3.6vw,2.7rem);
  line-height:1.05; margin-bottom:.8rem;
}
.founder__title em{
  font-style:normal;
  background:var(--grad-fox); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.founder__copy p{ color:var(--txt-dim); max-width:56ch }
.founder__copy strong{ color:var(--cream) }
.founder .hero__cta{ margin:1.4rem 0 0 }

.ilink{
  color:var(--candy); font-weight:700;
  border-bottom:2px solid rgba(255,46,150,.45); transition:color .3s var(--ease), border-color .3s;
}
.ilink:hover{ color:var(--cyan); border-color:var(--cyan) }

.shop{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.1rem }
.pcard{
  position:relative; display:block; height:100%; border-radius:var(--r); overflow:hidden;
  background:var(--glass); border:1px solid var(--line);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.pcard:hover{ transform:translateY(-9px); border-color:var(--lilac); box-shadow:0 28px 54px -26px rgba(193,158,233,.75) }
.pcard__img{ position:relative; aspect-ratio:1; overflow:hidden; background:#150c20 }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.pcard:hover .pcard__img img{ transform:scale(1.07) rotate(1deg) }
.pcard__shine{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-60%); transition:opacity .3s;
}
.pcard:hover .pcard__shine{ opacity:1; animation:shine 1.1s var(--ease) }
@keyframes shine{ to{ transform:translateX(60%) } }
.pcard__body{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem 1.15rem }
.pcard__name{ margin:0; font-family:var(--f-brand); font-size:.92rem; letter-spacing:.04em; text-transform:uppercase }
.pcard__price{
  font-family:var(--f-display); font-size:1.15rem;
  background:var(--grad-fox); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------ 14. support ------------------------------ */
.perks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.1rem; margin-bottom:1.1rem }
.perk{ display:flex; gap:1.1rem; align-items:center; padding:1.3rem; border-radius:var(--r); background:var(--glass); border:1px solid var(--line) }
.perk img{
  width:74px; height:74px; object-fit:contain; flex:none; padding:.5rem;
  border-radius:16px; background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
}
.perk h3{ font-family:var(--f-brand); font-size:1rem; letter-spacing:.04em; margin-bottom:.15rem }
.perk p{ margin:0 0 .6rem; font-size:.9rem; color:var(--txt-dim) }
.code{
  display:inline-flex; align-items:center; gap:.6rem; padding:.35rem .5rem .35rem .9rem;
  border-radius:999px; background:rgba(255,46,150,.12); border:1px dashed var(--pink);
  font-family:var(--f-brand); font-size:.86rem; letter-spacing:.08em; cursor:pointer;
  transition:background .3s, transform .35s var(--pop);
}
.code:hover{ background:rgba(255,46,150,.24); transform:translateY(-2px) }
.code b{ font-weight:400; color:var(--candy) }
.code span{ font-family:var(--f-body); font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:var(--pink); color:#fff }

.support{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem }
.support a{
  display:block; padding:1.4rem; border-radius:var(--r); background:var(--glass); border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s;
}
.support a:hover{ transform:translateY(-7px); border-color:var(--cyan); box-shadow:0 22px 44px -24px rgba(165,235,246,.6) }
.support em{ font-style:normal; font-size:1.7rem; display:block; margin-bottom:.5rem }
.support h3{ font-family:var(--f-brand); font-size:.95rem; letter-spacing:.05em; margin-bottom:.25rem }
.support p{ margin:0; font-size:.88rem; color:var(--txt-dim) }

/* ------------------------------- 15. palace ------------------------------ */
.palace{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center }
.palace__copy p{ color:var(--txt-dim); max-width:52ch }
.palace__copy strong{ color:var(--candy) }
.rules{
  position:relative; padding:1.8rem; border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(255,46,150,.12), rgba(165,235,246,.08));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.rules h3{ font-family:var(--f-brand); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--candy); margin-bottom:1rem }
.rules ol{ counter-reset:r; display:grid; gap:.65rem }
.rules li{ counter-increment:r; display:flex; gap:.8rem; align-items:flex-start; font-weight:600 }
.rules li::before{
  content:counter(r); flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-brand); font-size:.72rem; background:var(--grad-hot); color:#26060f;
}
.rules__chibi{ position:absolute; right:-14px; bottom:-26px; width:110px; animation:bob 5s ease-in-out infinite }

/* ------------------------------ 16. contact ------------------------------ */
.contact{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start }
.contact__copy p{ color:var(--txt-dim) }
/* two plain ways to get in touch — no form, no backend */
.ways{ display:grid; gap:1rem; align-content:start }
.ways a{
  display:block; height:100%; padding:1.6rem; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s, background .35s;
}
.ways a:hover{
  transform:translateY(-6px); border-color:var(--candy); background:rgba(255,46,150,.08);
  box-shadow:0 24px 46px -24px rgba(255,46,150,.6);
}
.ways em{ font-style:normal; font-size:1.7rem; display:block; margin-bottom:.6rem }
.ways h3{ font-family:var(--f-brand); font-size:1rem; letter-spacing:.05em; margin-bottom:.3rem }
.ways p{ margin:0 0 .9rem; color:var(--txt-dim); font-size:.95rem }
.ways__go{ font-weight:700; color:var(--candy) }
.ways__go b{ display:inline-block; font-weight:700; transition:transform .35s var(--pop) }
.ways a:hover .ways__go b{ transform:translateX(5px) }

/* ------------------------------- 17. credits ----------------------------- */
.credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem }
.credits a{
  display:block; padding:1.3rem; border-radius:var(--r); background:var(--glass); border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.credits a:hover{ transform:translateY(-6px) rotate(-1deg); border-color:var(--candy); background:rgba(255,46,150,.08) }
.credits dt{ font-family:var(--f-brand); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lilac) }
.credits dd{ margin:.35rem 0 0; font-size:1.05rem; font-weight:700 }

/* -------------------------------- 18. foot ------------------------------- */
.foot{ padding:3.5rem 0 3rem; border-top:1px solid var(--line); background:rgba(9,5,15,.6) }
.foot__in{ display:grid; justify-items:center; gap:1.3rem; text-align:center }
.foot img{ width:130px }
.foot__legal{ margin:0; font-size:.85rem; color:var(--txt-dim) }

/* ------------------------------- 19. modal ------------------------------- */
.modal{
  position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:1.2rem;
  background:rgba(5,2,9,.86); backdrop-filter:blur(12px); opacity:0; transition:opacity .35s var(--ease);
}
.modal.in{ opacity:1 }
.modal[hidden]{ display:none }
.modal__box{
  width:min(1040px,100%); max-height:86svh; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:#0b0612;
  transform:scale(.94); transition:transform .45s var(--pop);
  display:grid; place-items:center;
}
.modal.in .modal__box{ transform:scale(1) }
.modal__box iframe{ width:100%; aspect-ratio:16/9; border:0; display:block }
.modal__box--tt{ width:min(420px,100%); max-height:86svh; overflow-y:auto; background:#fff }
.modal__close{
  position:absolute; top:1.1rem; right:1.2rem; z-index:2; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:1.7rem; line-height:1; cursor:pointer;
  background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(10px);
  transition:transform .4s var(--pop), background .3s;
}
.modal__close:hover{ transform:rotate(90deg) scale(1.08); background:var(--pink); color:#fff }

/* ------------------------------ 20. loader ------------------------------- */
.loader{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden }
/* belt and braces: if main.js ever fails to run, the curtain still lifts */
.loader{ animation:loaderBail .6s var(--ease) 6s forwards }
@keyframes loaderBail{ to{ opacity:0; visibility:hidden } }
.loader__inner{ display:grid; justify-items:center; gap:1.2rem; text-align:center }
.loader__logo{ width:clamp(140px,22vw,210px); animation:loaderPop 1.4s var(--pop) infinite alternate }
@keyframes loaderPop{ from{ transform:scale(.94) rotate(-2deg) } to{ transform:scale(1.02) rotate(2deg) } }
.loader__bar{ width:min(240px,60vw); height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden }
.loader__bar span{ display:block; height:100%; width:0; background:var(--grad-fox); transition:width .3s var(--ease) }
.loader__tip{ margin:0; font-family:var(--f-brand); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lilac) }

/* ----------------------------- 21. chaos mode ---------------------------- */
body.chaos .sec__title, body.chaos .hero__title{ animation:chaosShake .35s infinite }
body.chaos .emotes button, body.chaos .chips li{ animation:chaosSpin 2.4s linear infinite }
@keyframes chaosShake{ 25%{ transform:rotate(.8deg) } 75%{ transform:rotate(-.8deg) } }
@keyframes chaosSpin{ 50%{ transform:rotate(6deg) scale(1.05) } }

/* ----------------------------- 22. responsive ---------------------------- */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem }
  .hero__art{ order:-1; width:min(100%,340px) }
  .hero__title{ font-size:clamp(3.4rem,15vw,7rem) }
  .hero__deco--boba, .hero__deco--candy2{ display:none }
  .player{ grid-template-columns:1fr }
  .about, .palace, .contact{ grid-template-columns:1fr }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .founder{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .founder__art{ max-width:190px }
  .founder__copy p{ margin-inline:auto }
  .founder .hero__cta{ justify-content:center }
}

@media (max-width:820px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:6rem 1.5rem 2.5rem;
    flex-direction:column; gap:.4rem; margin:0;
    background:rgba(9,5,15,.96); backdrop-filter:blur(20px);
    transform:translateY(-102%); transition:transform .5s var(--ease); height:100svh;
  }
  .nav__links.is-open{ transform:none }
  .nav__links a{ font-size:1.5rem; font-family:var(--f-display); padding:.5rem .4rem; color:var(--txt) }
  .nav__blob{ display:none }
  .nav__cta{ margin-left:auto }
  .burger{ display:block; z-index:2 }
  .sec{ padding:clamp(3.6rem,10vw,6rem) 0 }
  .rail__track > li{ width:262px }
  .rail__track--tt > li{ width:190px }
  .hero{ min-height:0; padding:6.5rem 0 3rem }
  .hero__art{ width:min(78%,300px) }
  .hero__badge{ font-size:.7rem; padding:.4rem .8rem }
  .hero__badge--1{ left:-3% }
  .hero__badge--2{ right:-3% }
  .hero__scroll{ display:none }
}

@media (max-width:520px){
  .stats{ grid-template-columns:1fr 1fr }
  .emotes{ grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) }
  .perk{ flex-direction:column; align-items:flex-start }
  .ticker{ transform:rotate(-2deg) scale(1.08) }
}

/* --------------------------- 23. reduced motion -------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none }
  .petals, .aurora, .cursor{ display:none }
  .ticker{ transform:none }
}