/* NoZu Glam - swipe-paged product site. Tokens = nozu-site house set.
   Every page sets its own ground, text and accent colour (see PALETTE). */
:root{
  --nz-crimson:#BB261B;
  --nz-pink:#F42D6A;
  --nz-pink-deep:#D50235;
  --nz-blush:#FECFD8;
  --nz-wash:#FCEDF2;
  --nz-cream:#FFF8F5;
  --nz-ink:#1A1114;
  --nz-ink-soft:#5C4A50;
  --nz-line:#F0D6DE;
  --nz-leaf:#2E7D5B;

  --nz-sans:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nz-serif:'Fraunces',Georgia,'Times New Roman',serif;

  --t-title:clamp(2.6rem,6vw,5.4rem);
  --t-body:clamp(.98rem,1.1vw,1.15rem);
  --t-spec:clamp(2.4rem,4.6vw,4.2rem);
  --pad-x:clamp(1.25rem,5.5vw,5.5rem);

  --ground:var(--nz-wash);
  --fg:var(--nz-ink);
  --fg-soft:var(--nz-ink-soft);
  --accent:var(--nz-pink);
  --btn-bg:var(--nz-pink);
  --btn-fg:#fff;
  --pill-bg:rgba(255,255,255,.55);
}

/* ---- PALETTE: one ground + accent per page --------------------------------- */
body[data-page="0"]{--ground:#FCEDF2;--accent:#F42D6A;}
body[data-page="1"]{--ground:#FECFD8;--accent:#BB261B;}
body[data-page="2"]{--ground:#BB261B;--fg:#fff;--fg-soft:rgba(255,255,255,.8);--accent:#FECFD8;--btn-bg:#fff;--btn-fg:#BB261B;--pill-bg:rgba(255,255,255,.14);}
body[data-page="3"]{--ground:#FFF8F5;--accent:#F42D6A;}
body[data-page="4"]{--ground:#FFFFFF;--accent:#BB261B;}
body[data-page="5"]{--ground:#EEF7F1;--accent:#2E7D5B;}
body[data-page="6"]{--ground:#D50235;--fg:#fff;--fg-soft:rgba(255,255,255,.82);--accent:#FECFD8;--btn-bg:#fff;--btn-fg:#D50235;--pill-bg:rgba(255,255,255,.14);}
body[data-page="7"]{--ground:#FCEDF2;--accent:#BB261B;}
body[data-page="8"]{--ground:#FECFD8;--accent:#BB261B;}
body[data-page="9"]{--ground:#EDF0FA;--accent:#1F2D63;}
body[data-page="10"]{--ground:#FFF0E3;--accent:#F07A2B;}
body[data-page="11"]{--ground:#FFF8F5;--accent:#BB261B;}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
html{background:var(--ground);-webkit-text-size-adjust:100%;}
body{
  margin:0;overflow:hidden;overscroll-behavior:none;
  font-family:var(--nz-sans);font-size:var(--t-body);line-height:1.5;
  color:var(--fg);background:var(--ground);
  transition:background-color .9s cubic-bezier(.4,0,.2,1),color .9s ease;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}

/* ---- Nav ---------------------------------------------------------------- */
/* launch mode: only the Pre-order button is live */
.nav__links,.foot__links{display:none!important;}
.nav__logo{pointer-events:none;}
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:clamp(.9rem,2vw,1.4rem) var(--pad-x);pointer-events:none;
}
.nav > *{pointer-events:auto;}
.nav__links{display:flex;gap:clamp(1rem,2.5vw,2.25rem);}
.nav__links a,.nav__cta{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transition:color .9s ease;}
.logo{display:block;width:clamp(96px,8vw,128px);height:auto;overflow:visible;}
.logo__reg,.logo__tag{fill:var(--nz-crimson);font-family:var(--nz-sans);font-weight:700;transition:fill .9s ease;}
.logo__mark{transition:filter .9s ease;}
body[data-page="2"] .logo__mark,body[data-page="6"] .logo__mark{filter:brightness(0) invert(1);}
body[data-page="2"] .logo__reg,body[data-page="2"] .logo__tag,body[data-page="6"] .logo__reg,body[data-page="6"] .logo__tag{fill:#fff;}
.nav__cta{
  justify-self:end;padding:.65rem 1.25rem;border:1.5px solid currentColor;border-radius:999px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ground);}

/* ---- Stage (fixed, behind the copy) ------------------------------------- */
.stage{position:fixed;inset:0;z-index:5;pointer-events:none;}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.stage__flat{display:none;position:absolute;inset:0;}
.flat{
  position:absolute;left:66%;top:50%;height:78vh;width:auto;opacity:0;
  transform:translate(-50%,-50%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .6s ease;
  filter:drop-shadow(0 30px 40px rgba(187,38,27,.22));
}
html.nogl .stage__flat{display:block;}
html.nogl .stage canvas{display:none;}

/* two-chamber callouts (page "portable") */
.callouts{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.callouts.is-on{opacity:1;}
.callouts__lines{position:absolute;inset:0;width:100%;height:100%;}
.callouts__lines line{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4;}
.callouts__lines circle{fill:var(--accent);}
.callout{
  position:absolute;transform:translate(0,-50%);
  padding:.5rem .75rem;border-radius:12px;background:rgba(255,255,255,.82);border:1px solid var(--nz-line);
  font-size:.74rem;line-height:1.3;color:var(--nz-ink-soft);white-space:nowrap;box-shadow:0 10px 30px -18px rgba(187,38,27,.35);
}
.callout b{display:block;color:var(--nz-ink);font-size:.8rem;}

/* ---- Deck + pages -------------------------------------------------------- */
.deck{position:fixed;inset:0;z-index:10;touch-action:none;}
.page{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;column-gap:2rem;
  padding:9vh var(--pad-x) 0;
  will-change:transform;
}
.copy{position:relative;max-width:32rem;}
.copy--left{grid-column:1;}
.copy--wide{max-width:40rem;}
.copy--right{grid-column:2;justify-self:end;text-align:right;}
.copy--center{grid-column:1 / -1;justify-self:center;text-align:center;max-width:40rem;}
/* soft scrim in the page's own ground colour so the moving background never fights the words */
.copy::before{
  content:"";position:absolute;inset:-1.5rem -2rem;z-index:-1;border-radius:2rem;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ground) 88%,transparent) 0%,color-mix(in srgb,var(--ground) 55%,transparent) 55%,transparent 100%);
}

.eyebrow{margin:0 0 1.1rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.title{margin:0 0 1.1rem;line-height:.94;letter-spacing:-.03em;font-size:var(--t-title);}
.title span{display:block;}
.title__sans{font-family:var(--nz-sans);font-weight:900;}
.title__serif{font-family:var(--nz-serif);font-weight:300;font-style:italic;letter-spacing:-.01em;color:var(--accent);}
body[data-page="2"] .title__serif,body[data-page="6"] .title__serif{color:#FECFD8;}
.body{margin:0;max-width:27rem;color:var(--fg-soft);}
.body em{font-style:italic;}
.copy--center .body{margin-inline:auto;}

.spec{display:flex;flex-direction:column;gap:.35rem;}
.spec__label{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);}
.spec__value{font-family:var(--nz-sans);font-weight:900;font-size:var(--t-spec);line-height:1;letter-spacing:-.03em;color:var(--accent);}
.spec__value--sm{font-size:calc(var(--t-spec) * .55);}
.pills{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.1rem 0 0;}
.spec--inline{flex-direction:row;align-items:baseline;justify-content:center;gap:.9rem;margin:1.2rem 0 0;}
.pill{
  padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--accent);color:var(--accent);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--pill-bg);
}

/* what's in: hero ingredients big, the rest small */
.heroes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;}
.heroes li{padding:.9rem .9rem .8rem;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--nz-line);}
.heroes b{display:block;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--accent);}
.heroes b i{font-style:normal;font-size:.5em;letter-spacing:0;margin-left:.1em;}
.heroes span{display:block;margin-top:.35rem;font-size:.76rem;line-height:1.25;color:var(--fg-soft);}
.minor{margin:.9rem 0 0;display:flex;gap:.5rem .9rem;flex-wrap:wrap;font-size:.8rem;color:var(--fg-soft);}
.minor b{color:var(--fg);}
.notin{margin:.6rem 0 0;font-size:.74rem;line-height:1.5;color:var(--fg-soft);}
.notin b{color:var(--accent);}

/* Sweet Flip diagram */
.diagram{max-width:none;width:100%;}
.flip{width:100%;height:auto;overflow:visible;}
.flip__label{font-family:var(--nz-sans);font-weight:800;font-size:22px;letter-spacing:.18em;fill:var(--fg);}
.flip__sub{font-family:var(--nz-sans);font-weight:500;font-size:14px;fill:var(--fg-soft);}
.flip__arrow{stroke:var(--accent);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:10 12;animation:flow 1.4s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-22;}}
.flip__spark{animation:spin 9s linear infinite;transform-origin:320px 120px;}
.flip__tongue{animation:lick 3.2s ease-in-out infinite;transform-origin:320px 132px;}
@keyframes lick{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.06)}}
@keyframes spin{to{transform:rotate(360deg);}}
.flip__glow{animation:pulse 2.6s ease-in-out infinite;transform-origin:320px 120px;}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.flip__sour{animation:nod 3s ease-in-out infinite;transform-origin:90px 120px;}
.flip__sweet{animation:bounce 3s ease-in-out infinite;transform-origin:550px 120px;}
@keyframes nod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.swipehint{
  position:absolute;left:0;right:0;bottom:1.6rem;margin:0;text-align:center;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);
}
.swipehint span{display:inline-block;animation:hint 1.8s ease-in-out infinite;}
@keyframes hint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

.cta{margin:1.5rem 0 0;}
.btn{
  display:inline-block;padding:.95rem 1.6rem;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);font-weight:700;letter-spacing:.02em;
  box-shadow:0 18px 48px -18px rgba(187,38,27,.5);transition:transform .25s ease,filter .25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(.95);}

/* last page: text in the middle, compact footer at the bottom */
.page--last{grid-template-rows:1fr;align-content:center;padding-bottom:9rem;}
.page--last .copy--center{align-self:center;}
.foot{
  position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:0;
  display:grid;grid-template-columns:auto 1fr;gap:.5rem 2rem;align-items:center;
  padding:1rem 0 1.1rem;border-top:1px solid var(--nz-line);font-size:.74rem;color:var(--fg-soft);
}
.foot__logo{width:118px;grid-row:1 / span 2;}
.foot__logo .logo{width:100%;}
.foot__links{display:flex;gap:1.25rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
.foot__legal{margin:0;}

/* ---- Enter / exit motion. Only with JS; without it every word shows. ---- */
html.js .copy{opacity:0;transform:translateY(36px);transition:opacity .55s cubic-bezier(.4,0,.6,1),transform .55s cubic-bezier(.4,0,.6,1);}
html.js .page.is-active .copy{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,1,.3,1) .12s,transform 1s cubic-bezier(.16,1,.3,1) .12s;}
html.js .page.is-past .copy{opacity:0;transform:translateY(-36px);}
html.js .page.is-active .copy--right{transition-delay:.26s;}
html.js .foot{opacity:0;transition:opacity 1s ease .35s;}
html.js .page.is-active .foot{opacity:1;}
html.js .page:not(.is-active) .copy{pointer-events:none;}
html.js .swipehint{opacity:0;transition:opacity .5s ease;}
html.js .page.is-active .swipehint{opacity:1;transition-delay:.6s;}

/* Flat fallback (no WebGL): which picture shows per page */
html.nogl body[data-page="0"] .flat--pouch,html.nogl body[data-page="1"] .flat--pouch{opacity:1;}
html.nogl body[data-page="2"] .flat--stick,html.nogl body[data-page="3"] .flat--stick,html.nogl body[data-page="4"] .flat--stick,
html.nogl body[data-page="5"] .flat--stick,html.nogl body[data-page="6"] .flat--stick,html.nogl body[data-page="8"] .flat--stick{opacity:1;}
html.nogl body[data-page="9"] .flat--gut{opacity:1;}
html.nogl body[data-page="10"] .flat--kids{opacity:1;}
html.nogl body[data-page="3"] .flat--stick{transform:translate(-50%,-50%) rotate(50deg);}
html.nogl .callouts{display:none;}

@media (prefers-reduced-motion:reduce){
  html.js .copy,html.js .page.is-active .copy,html.js .foot{transition-duration:.01s;transition-delay:0s;}
  .swipehint span,.flip__arrow,.flip__spark,.flip__glow,.flip__sour,.flip__sweet{animation:none;}
  .flat{transition:none;}
}

/* ---- Tablet: still split, tighter margins, bigger product ---------------- */
@media (min-width:821px) and (max-width:1180px){
  :root{--pad-x:clamp(1.5rem,4vw,3rem);--t-title:clamp(3rem,6.8vw,5rem);--t-body:1.12rem;--t-spec:clamp(2.8rem,5.5vw,4.4rem);}
  .page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem;}
  .copy{max-width:30rem;}
  .copy--wide{max-width:36rem;}
  .body{max-width:30rem;}
  .heroes{grid-template-columns:repeat(2,1fr);}
  .heroes b{font-size:2.2rem;}
  .pill{font-size:.8rem;padding:.65rem 1.15rem;}
  .callout{font-size:.86rem;}
  .callout b{font-size:.94rem;}
}

/* ---- Mobile: product on top, copy below --------------------------------- */
@media (max-width:820px){
  :root{--t-title:clamp(2.1rem,9.5vw,3.2rem);--t-spec:clamp(1.9rem,8.5vw,2.8rem);--t-body:.92rem;--pad-x:1.25rem;}
  .nav{grid-template-columns:auto 1fr auto;}
  .nav__links{display:none;}
  .nav__logo{grid-column:1;}
  .nav__cta{grid-column:3;padding:.55rem 1rem;}
  .page{
    grid-template-columns:1fr;grid-template-rows:50vh auto auto;grid-template-rows:50dvh auto auto;
    align-items:start;align-content:start;row-gap:.7rem;padding:0 var(--pad-x) clamp(1rem,4vh,2rem);column-gap:0;
  }
  .copy--left,.copy--center{grid-row:2;grid-column:1;text-align:left;justify-self:start;max-width:none;}
  .copy--right{grid-row:3;grid-column:1;justify-self:start;text-align:left;flex-direction:row;align-items:baseline;gap:.7rem;}
  .copy--right .spec__label{order:2;}
  .copy::before{inset:-.8rem -1rem;}
  .eyebrow{margin-bottom:.7rem;}
  .title{margin-bottom:.7rem;}
  .body{max-width:24rem;}
  .heroes{grid-template-columns:repeat(2,1fr);gap:.45rem;}
  .heroes li{padding:.55rem .65rem .5rem;}
  .heroes b{font-size:1.5rem;}
  .heroes span{font-size:.7rem;margin-top:.2rem;}
  .minor{font-size:.72rem;gap:.3rem .7rem;margin-top:.6rem;}
  .notin{font-size:.68rem;margin-top:.4rem;}
  .diagram{grid-row:1;grid-column:1;align-self:center;padding:3.5rem 0 0;}
  .swipehint{bottom:.9rem;}
  .cta{margin-top:1rem;}
  .flat{left:50%;height:44vh;top:29vh;}
  .page--last{grid-template-rows:30vh auto;grid-template-rows:30dvh auto;padding-bottom:7rem;}
  .page--last .copy--center{grid-row:2;}
  .page--last .spec--inline{justify-content:flex-start;}
  .foot{left:var(--pad-x);right:var(--pad-x);grid-template-columns:auto 1fr;gap:.4rem 1rem;padding:.8rem 0 .9rem;}
  .foot__logo{width:88px;}
  .foot__links{flex-wrap:wrap;gap:.4rem .9rem;}
  .foot__legal{font-size:.66rem;}
  .callout{font-size:.66rem;padding:.4rem .55rem;white-space:normal;max-width:44vw;}
  .callout b{font-size:.7rem;}
}
@media (max-width:820px) and (max-height:700px){
  :root{--t-title:clamp(1.9rem,8.5vw,2.5rem);--t-body:.86rem;}
  .page{grid-template-rows:44vh auto auto;grid-template-rows:44dvh auto auto;row-gap:.5rem;}
  .flat{height:38vh;top:25vh;}
  .eyebrow{margin-bottom:.5rem;}
  .title{margin-bottom:.5rem;}
}