/* ═══════════════════════════════════════════
   BEETUS PARTY — static rebuild
   ═══════════════════════════════════════════ */

@font-face{font-family:"Titan One";src:url("../fonts/titan-one.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cartoonerie";src:url("../fonts/cartoonerie.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  --yellow:#f6c400;
  --pink:#e7277b;
  --mint:#c9e2cf;
  --ink:#1e1b14;
  --white:#fff;

  --display:"Titan One",system-ui,sans-serif;
  --body:"Cartoonerie","Comic Sans MS",system-ui,sans-serif;

  --edge:3px;                     /* black keyline */
  --shadow:6px 6px 0 var(--ink);  /* hard offset shadow */
  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1200px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--mint);color:var(--ink);
  font-family:var(--body);font-size:1.125rem;line-height:1.6667;   /* original: flat 18px/30px */
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ol,ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:860px}
.center{text-align:center}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:.75rem 1rem}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ── display type: outline + hard shadow ───── */
.outline{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;line-height:.95;
  letter-spacing:-.038em;                 /* original: -2.808px @ 74px */
  color:var(--white);
  -webkit-text-stroke:.04em var(--ink);   /* original: 3px @ 74px      */
  paint-order:stroke fill;
  text-shadow:0 .105em 0 var(--ink);      /* section headings: 0 9-12px @ 70-100px */
  margin:0 0 .5em;
}
.outline em{font-style:normal;color:var(--yellow)}

/* fitted per-heading from the original at 375 and 1440 */
.h1{font-size:clamp(3.75rem, 3.5299rem + 0.939vw, 4.375rem);      /* How: 60 -> 70 */
    line-height:clamp(3.75rem, 3.1558rem + 2.535vw, 5.4375rem)}
.h2{font-size:clamp(3.625rem, 2.7007rem + 3.944vw, 6.25rem);      /* Lifestyle: 58 -> 100 */
    line-height:clamp(3.375rem, 2.6488rem + 3.099vw, 5.4375rem)}
.socials .h1{font-size:clamp(4.375rem, 3.7148rem + 2.817vw, 6.25rem);  /* Socials: 70 -> 100 */
    line-height:clamp(2.5625rem, 1.5502rem + 4.319vw, 5.4375rem)}
.h3{font-size:clamp(1.4rem,3.4vw,2.1rem);text-shadow:3px 3px 0 var(--ink)}

/* ── buttons ───────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--body);font-weight:400;text-transform:uppercase;
  text-decoration:none;letter-spacing:.02em;line-height:1;
  padding:.85em 1.6em;border:var(--edge) solid var(--ink);border-radius:999px;
  box-shadow:var(--shadow);
  transition:transform .12s ease,box-shadow .12s ease;
  font-size:clamp(.95rem,1.6vw,1.15rem);
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--pink{background:var(--pink);color:var(--white)}
.btn--sm{
  padding:.6em 1.1em;font-size:clamp(.8rem,1.4vw,.95rem);box-shadow:3px 3px 0 var(--ink);
  /* WCAG 2.5.5 / HIG: 44px minimum touch target */
  min-height:44px;display:inline-flex;align-items:center;justify-content:center;
}
.btn--lg{padding:1em 2.2em;font-size:clamp(1.05rem,2.2vw,1.4rem);margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ── nav ───────────────────────────────────── */
.nav{
  position:fixed;z-index:120;pointer-events:none;
  /* viewport-fit=cover puts us under the notch without these */
  top:calc(.75rem + env(safe-area-inset-top, 0px));
  left:max(.75rem, env(safe-area-inset-left, 0px));
  right:max(.75rem, env(safe-area-inset-right, 0px));
  bottom:auto;
}
.nav__bar{
  pointer-events:auto;
  /* original measures 568px @768 and 840px @1440 */
  max-width:min(100%, calc(16.07rem + 40.48vw));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--white);border-radius:999px;
  padding:.55rem .7rem .55rem .7rem;
  box-shadow:0 6px 22px rgba(0,0,0,.14);
}
.burger{
  appearance:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;display:grid;place-content:center;gap:5px;padding:0;
}
.burger span{display:block;width:26px;height:3px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-content:center}
.menu[hidden]{display:none}
.menu__close{position:absolute;top:calc(1rem + env(safe-area-inset-top, 0px));right:calc(1.25rem + env(safe-area-inset-right, 0px));background:none;border:0;color:#fff;font-size:3rem;line-height:1;cursor:pointer}
.menu__nav{display:grid;gap:.4em;text-align:center}
.menu__nav a{
  font-family:var(--display);text-transform:uppercase;text-decoration:none;color:var(--white);
  font-size:clamp(1.75rem,7vw,3rem);transition:color .15s;
}
.menu__nav a:hover{color:var(--yellow)}

/* ── hero ──────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--mint) url("../img/hero-mobile.webp") center/cover no-repeat;
  padding:calc(var(--nav-h) + 2rem) 0 6rem;
}
/* Image and text layout must switch at the SAME width, or the strapline
   lands on his face. The original indents its hero content by 768px, so
   both move there. */
@media (min-width:768px){
  .hero{background-image:url("../img/hero.webp");background-position:center bottom}
}
.hero__inner{width:100%;max-width:100%;margin-inline:auto;padding-inline:1.25rem}  /* 20px @375, as the original */
.hero__title{
  text-shadow:0 .2em 0 var(--ink);          /* hero is deeper: 0 15px 0 @ 74px */
  font-size:clamp(3rem, 19.73vw, 8.4rem);   /* 74px @375 */
  line-height:1.176;                        /* original: 87px @74px */
  margin-bottom:1.12em;                     /* original: 83px below the line box */
}
.hero__sub{
  font-family:var(--body);text-transform:uppercase;color:var(--pink);
  /* fitted to the original: 25px @375, 50px @1440 */
  font-size:clamp(1.5625rem, 1.0123rem + 2.35vw, 3.125rem);
  line-height:1.1;letter-spacing:normal;
  max-width:22ch;margin:0 0 2.2rem;text-shadow:none;
}
/* desktop: content sits in the right half, character stays clear on the left */
@media (min-width:768px){
  /* original's right inset: 46px @768 -> 139px @1440 */
  .hero__inner{display:flex;justify-content:flex-end;
    max-width:100%;padding-inline:calc(13.84vw - 60.3px)}
  .hero__col{width:fit-content;max-width:100%}
  /* original: 135px @768, 178px @1440 */
  .hero__title{white-space:nowrap;margin-bottom:.3em;
    font-size:clamp(8.4rem, 5.366rem + 6.4vw, 11.125rem)}
  /* original indents the strapline + CTA relative to the wordmark */
  .hero__sub{margin-left:19%;max-width:24ch}
  .hero .btn{margin-left:19%}
  .hero__sub{margin-bottom:2.25rem}
  .hero .btn{padding:.9em 2em;font-size:clamp(1.15rem,1.5vw,1.6rem)}
}
.hero__scroll{position:absolute;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
  animation:bob 2.2s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;   /* tap target, glyph stays put */
}
.hero__scroll svg{fill:var(--ink)}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media (prefers-reduced-motion:reduce){.hero__scroll{animation:none}}

/* ── marquee ───────────────────────────────── */
.marquee{overflow:hidden;border-block:var(--edge) solid var(--ink);padding:.35rem 0}
.marquee--yellow{background:var(--yellow)}
.marquee--mint{background:var(--mint)}
.marquee__track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.marquee__track--rev{animation-direction:reverse}
.marquee__track span{
  font-family:var(--display);text-transform:uppercase;white-space:nowrap;
  font-size:clamp(.9rem,2.2vw,1.4rem);padding-right:.5em;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ── about ─────────────────────────────────── */
.about{background:var(--mint);padding:clamp(3rem,9vw,6rem) 0}
.ca__label{font-size:1.875rem;line-height:3.125rem;text-align:center;color:var(--ink);
  -webkit-text-stroke:0;text-shadow:none}   /* original: flat 30/50 */
.ca{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;
  background:var(--white);border-radius:999px;padding:.9rem 1.4rem;
  max-width:640px;margin:0 auto clamp(2.5rem,7vw,5rem);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.ca code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(.7rem,2.1vw,.95rem);
  word-break:break-all;text-align:center;flex:1 1 auto}
.ca__copy{
  flex:0 0 auto;font-family:var(--display);text-transform:uppercase;font-size:.75rem;
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;
  padding:.45em .9em;cursor:pointer;transition:background .15s;
}
.ca__copy:hover{background:var(--pink);color:#fff}
.ca__copy.is-done{background:var(--ink);color:var(--yellow)}

.about__grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (min-width:900px){.about__grid{grid-template-columns:1fr 1fr}}
.about__media img{
  border-radius:50%;border:clamp(6px,1.4vw,12px) solid var(--yellow);
  box-shadow:var(--shadow);margin-inline:auto;max-width:min(100%,460px);
}
.about__body p{margin:0 0 1.5rem;max-width:52ch}

/* ── how to buy ────────────────────────────── */
.how{background:var(--yellow);padding:clamp(3rem,9vw,6rem) 0;
  border-block:var(--edge) solid var(--ink)}
.how .h1{margin-bottom:clamp(2rem,6vw,4rem)}
.steps{display:grid;gap:clamp(2.5rem,7vw,5rem)}
.step{display:grid;gap:clamp(1rem,3vw,2rem);align-items:center}
@media (min-width:820px){
  .step{grid-template-columns:1fr 1fr}
  .step:nth-child(even) .step__media{order:2}
  .step:nth-child(even) .step__text{text-align:right}
}
.step__media img{
  border:clamp(8px,1.6vw,14px) solid var(--white);
  box-shadow:var(--shadow);width:100%;
}
.step__n{
  font-family:var(--display);text-transform:uppercase;color:var(--pink);
  font-size:1.5rem;line-height:1.5625rem;margin:0 0 .1em;   /* original: flat 24/25 */
}
.step__text p:last-child{margin:.5rem 0 0;max-width:46ch}
.step:nth-child(even) .step__text p:last-child{margin-left:auto}

/* ── sugarnomics ───────────────────────────── */
.sugar{background:var(--pink);color:var(--white);padding:clamp(3.5rem,10vw,7rem) 0}
.sugar p{margin:0 auto;max-width:62ch}

/* ── reviews ───────────────────────────────── */
.reviews{
  position:relative;
  /* the source image already holds a cluster of cherries: show it near full
     width and tile vertically, rather than shrinking it into wallpaper */
  background:var(--white) url("../img/candy-bg.webp") top center/100% auto repeat-y;
  padding:clamp(3rem,9vw,6rem) 0;overflow:hidden;
  border-block:var(--edge) solid var(--ink);
}
@media (max-width:819px){.reviews{background-size:180% auto}}
.reviews__stack{display:grid;gap:clamp(1.25rem,3.5vw,2rem);max-width:900px;margin-inline:auto}
.reviews__card{width:100%;filter:drop-shadow(10px 10px 0 var(--ink));border-radius:4px}
/* desktop: scattered collage, positions measured off the original */
@media (min-width:820px){
  .reviews__stack{
    display:block;position:relative;
    /* break out of the 1200px wrapper so the collage spans like the original */
    width:min(94vw,1800px);max-width:none;
    margin-left:50%;transform:translateX(-50%);
    aspect-ratio:2000/1150;
  }
  .reviews__card{position:absolute;width:auto;max-width:none}
  .reviews__card--1{left:12%;   top:9%;  width:42%}
  .reviews__card--2{left:50.25%;top:23%; width:35.75%}
  .reviews__card--3{left:24.5%; top:45%; width:34.5%}
  .reviews__card--4{left:43.75%;top:68%; width:15.75%}
}
/* one SVG strip = three triangles */
.reviews__warn{
  position:absolute;top:clamp(1rem,3.5vw,3.5rem);right:clamp(1rem,7vw,5rem);
  width:clamp(130px,19vw,380px);height:auto;z-index:3;pointer-events:none;
}

/* ── socials ───────────────────────────────── */
.socials{background:var(--yellow);padding:clamp(3rem,9vw,6rem) 0}
.socials__sub{
  font-family:var(--body);text-transform:uppercase;color:var(--ink);
  font-size:1.625rem;line-height:2.706rem;   /* original: flat 26/43.3 */
  -webkit-text-stroke:0;text-shadow:none;margin:0 0 2rem;
}
/* centred pair, lightly tilted and nudged off each other's baseline */
.socials__icons{
  display:flex;gap:clamp(.6rem,1.4vw,1.25rem);
  justify-content:center;align-items:center;
  margin-bottom:clamp(2.5rem,7vw,4rem);
}
.socials__icons--offset a:first-child{transform:rotate(-5deg) translateY(.35rem)}
.socials__icons--offset a:last-child {transform:rotate(5deg)  translateY(-.35rem)}
.socials__icons--offset a{transition:transform .15s}
.socials__icons--offset a:first-child:hover{transform:rotate(-5deg) translateY(-.2rem)}
.socials__icons--offset a:last-child:hover {transform:rotate(5deg)  translateY(-.9rem)}
.socials__icons img{width:clamp(52px,8vw,76px);height:auto;transition:transform .15s}


.gallery{display:grid;gap:1rem;margin-bottom:clamp(2rem,6vw,3.5rem);overflow:hidden}
.gallery__track{display:flex;gap:1rem;width:max-content;animation:scroll 45s linear infinite}
.gallery__track--rev{animation-direction:reverse}
/* The source PNGs already carry their own rounded corners, keyline and
   drop shadow. Adding any here double-borders them, and a background
   fills the transparent padding around the baked-in shadow. */
.gallery__track img{
  width:clamp(150px,17vw,242px);
  height:auto;display:block;
  border:0;border-radius:0;box-shadow:none;background:none;
}
@media (prefers-reduced-motion:reduce){.gallery__track{animation:none}}

/* ── standalone CTA band ───────────────────── */
.cta{background:var(--yellow);padding:clamp(2.5rem,7vw,4.5rem) 0}
.cta .btn{margin-top:0}

/* ── disclaimer ────────────────────────────── */
.disclaimer{background:var(--pink);color:var(--white);
  padding:clamp(2.5rem,7vw,4.5rem) 0 calc(clamp(2.5rem,7vw,4.5rem) + env(safe-area-inset-bottom, 0px))}
.disclaimer__main{font-family:var(--display);
  font-size:clamp(0.875rem, 0.6989rem + 0.751vw, 1.375rem);   /* original: 14 -> 22 */
  line-height:clamp(1.125rem, 0.8609rem + 1.127vw, 1.875rem);
  margin:0 auto 1.25rem;max-width:70ch}
.disclaimer__sub{color:var(--yellow);margin:0;font-size:clamp(.95rem,2.2vw,1.15rem)}

/* ═══════════════════════════════════════════
   SCROLL REVEALS
   Ported from the original's timeline config:
   Fade In (Circ.easeInOut), Move Up + Fade In (Expo.easeInOut),
   Move Right + Fade In (Power3.easeInOut), Scale (Expo.easeInOut).
   GSAP easings approximated as cubic-beziers.
   ═══════════════════════════════════════════ */
:root{
  --ease-circ:cubic-bezier(.785,.135,.15,.86);   /* Circ.easeInOut   */
  --ease-expo:cubic-bezier(.87,0,.13,1);          /* Expo.easeInOut   */
  --ease-power3:cubic-bezier(.77,0,.175,1);       /* Power3.easeInOut */
}

/* Gated on .js-anim, which JS sets on <html> at startup. If the script
   never runs, nothing is ever hidden and the page renders in full. */
.js-anim [data-anim]{opacity:0}
[data-anim]{
  will-change:opacity,transform;
  transition-property:opacity,transform;
  transition-duration:var(--anim-dur,1000ms);
  transition-delay:var(--anim-delay,0ms);
}
[data-anim="fade"]  {transition-timing-function:var(--ease-circ)}
.js-anim [data-anim="up"]    {transform:translateY(2.5rem); transition-timing-function:var(--ease-expo)}
.js-anim [data-anim="right"] {transform:translateX(-2.5rem);transition-timing-function:var(--ease-power3)}
.js-anim [data-anim="left"]  {transform:translateX(2.5rem); transition-timing-function:var(--ease-power3)}
.js-anim [data-anim="scale"] {transform:scale(.86);         transition-timing-function:var(--ease-expo)}

.js-anim [data-anim].is-in{opacity:1;transform:none}

/* never let a reveal hide content if JS fails */
.no-js [data-anim]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
}

/* pre-launch contract slot — no address to copy yet */
.ca--pending code{font-family:var(--body);font-size:clamp(.9rem,2.2vw,1.1rem);
  letter-spacing:normal;word-break:normal;opacity:.75}
.disclaimer__nfa{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.9rem,2.2vw,1.15rem);margin:0 0 .75rem;color:var(--white)}