/* ============================================================
   ZINZINO CINEMATIC DECK — design system
   Tokens sourced from content/products.json design_system.
   One stylesheet, two shells (present | scroll).
   ============================================================ */

/* ---------- fonts (vendored, offline) ---------- */
@font-face{font-family:"Cormorant";src:url("../assets/fonts/CormorantGaramond-VF.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../assets/fonts/CormorantGaramond-Italic-VF.ttf") format("truetype");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../assets/fonts/DMSans-VF.ttf") format("truetype");font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../assets/fonts/DMMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../assets/fonts/DMMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --bg:#0a0a0a;
  --bg-soft:#111110;
  --gold:#C8A96E;
  --gold-light:#DCC08A;
  --amber:#E5A23C;
  --off-white:#FAFAF7;
  --muted:rgba(250,250,247,.62);
  --faint:rgba(250,250,247,.40);
  --line:rgba(250,250,247,.14);

  /* per-chapter accent (subtle, premium, brand-cohesive) */
  --accent:var(--gold);

  --ff-display:"Cormorant",Georgia,serif;
  --ff-body:"DM Sans",system-ui,sans-serif;
  --ff-mono:"DM Mono",ui-monospace,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:48px; --s6:96px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:1100ms;

  --pad-x:clamp(28px,6vw,120px);
  --maxw:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--off-white);font-family:var(--ff-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow:hidden}                 /* present mode default; scroll mode overrides */
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#0a0a0a}

/* chapter accent classes */
.acc-balanceoil{--accent:#C8A96E}
.acc-viva{--accent:#C7A9CE}
.acc-zinobiotic{--accent:#86B8A6}
.acc-xtend{--accent:#B7C08A}
.acc-gold{--accent:var(--gold)}

/* ============================================================
   SCENE SHELL
   ============================================================ */
#deck{position:relative;width:100%;height:100%}

.scene{
  position:absolute;inset:0;
  display:grid;align-content:center;
  padding:clamp(48px,8vh,120px) var(--pad-x);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 900ms var(--ease),visibility 0s linear 900ms;
  overflow:hidden;
}
.scene.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 900ms var(--ease)}

/* video / poster background */
.scene__bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.scene__bg video,.scene__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);transition:transform 8s linear;
}
.scene.is-active .scene__bg video,.scene.is-active .scene__bg img{transform:scale(1)}
/* nudge the glowing subject toward the right so the left text column stays clear */
.product .scene__bg video,.product .scene__bg img{object-position:72% center}
/* legibility grade — lighter now that the footage is dark cinematic on black */
.scene__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(5,5,6,.90) 0%, rgba(5,5,6,.70) 30%, rgba(5,5,6,.34) 56%, rgba(5,5,6,.10) 82%, transparent 100%),
    radial-gradient(135% 125% at 85% 48%, transparent 48%, rgba(0,0,0,.34) 100%),
    linear-gradient(0deg, rgba(5,5,6,.52) 0%, rgba(5,5,6,0) 32%);
}
/* title + close: dimmed cinematic footage under a dark wash + gold bloom, text centered */
.title .scene__bg,.close .scene__bg{background:#050505}
.is-dim video{opacity:.42;transform:scale(1.04)}
.title .scene__scrim,.close .scene__scrim{background:
  radial-gradient(60% 52% at 50% 42%, rgba(200,169,110,.16), rgba(200,169,110,.03) 58%, transparent 72%),
  linear-gradient(180deg, rgba(5,5,6,.66), rgba(5,5,6,.40) 50%, rgba(5,5,6,.62))}
.scene__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

.scene__inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto}
/* keep all product copy in a left column so the product stays clear on the right */
.product .scene__inner{margin-inline:0;max-width:min(660px,55vw)}
:root{--tsh:0 1px 2px rgba(0,0,0,.62), 0 1px 9px rgba(0,0,0,.34)}

/* ============================================================
   TYPOGRAPHY BLOCKS
   ============================================================ */
.eyebrow{font-family:var(--ff-mono);font-weight:500;font-size:clamp(11px,1vw,14px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}

.headline{font-family:var(--ff-display);font-weight:500;line-height:1.0;letter-spacing:-.01em;
  font-size:clamp(40px,5.4vw,86px);color:var(--off-white);max-width:13ch;text-shadow:var(--tsh)}
.headline .w{display:inline-block}

.subhead{font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(19px,2.1vw,32px);color:var(--gold-light);margin-top:var(--s3);max-width:24ch;line-height:1.15;text-shadow:var(--tsh)}

.explainer{font-family:var(--ff-body);font-weight:400;font-size:clamp(15px,1.2vw,19px);
  line-height:1.5;color:var(--off-white);opacity:.92;max-width:38ch;margin-top:var(--s3);text-shadow:var(--tsh)}

/* hero stat */
.stat{position:absolute;top:clamp(40px,8vh,84px);right:var(--pad-x);z-index:3;text-align:right;max-width:min(34vw,420px);
  padding:var(--s3) 0 var(--s3) var(--s4);
  background:radial-gradient(150% 140% at 92% 22%, rgba(4,4,5,.40), transparent 58%)}
.stat__value{font-family:var(--ff-display);font-weight:600;line-height:.9;color:var(--accent);
  font-size:clamp(64px,8.4vw,148px);letter-spacing:-.02em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 0;
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 0 50px color-mix(in srgb,var(--accent) 32%,transparent)}
.stat__label{font-family:var(--ff-mono);font-size:clamp(11px,.9vw,13px);line-height:1.5;
  color:var(--off-white);opacity:.85;margin-top:var(--s2);letter-spacing:.02em;max-width:30ch;margin-left:auto;text-shadow:var(--tsh)}

/* science tiles */
.science{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);max-width:52ch}
.sci-tile{font-family:var(--ff-mono);font-size:clamp(10px,.82vw,12px);line-height:1.4;
  color:var(--off-white);border:1px solid var(--line);border-left:2px solid var(--accent);
  padding:10px var(--s2);background:rgba(10,10,10,.34);backdrop-filter:blur(6px);
  border-radius:2px;max-width:26ch}

/* usage + certs */
.usage{font-family:var(--ff-body);font-size:clamp(14px,1.1vw,17px);color:var(--off-white);
  margin-top:var(--s3);max-width:44ch;line-height:1.5;text-shadow:var(--tsh)}
.usage b{color:var(--accent);font-weight:600}
.certs{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);margin-top:var(--s3)}
.cert{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:5px 12px}

.disclaimer{font-family:var(--ff-body);font-size:11px;line-height:1.4;color:var(--faint);
  margin-top:var(--s3);max-width:56ch;font-style:italic}

/* ---------- title scene ---------- */
.title{justify-items:center;text-align:center}
.title .logo{width:clamp(150px,16vw,240px);opacity:.95;margin-bottom:var(--s6)}
.title .headline{max-width:20ch;text-align:center}
.title .subhead{text-align:center;color:var(--muted);font-style:normal;font-family:var(--ff-mono);
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.24em;text-transform:uppercase;margin-top:clamp(40px,7vh,88px)}

/* ---------- closing scene ---------- */
.close .scene__bg{background:
  radial-gradient(58% 46% at 50% 44%, rgba(200,169,110,.13), rgba(200,169,110,.04) 55%, transparent 72%),
  #060606}
.close .scene__scrim{background:linear-gradient(0deg, rgba(5,5,6,.5) 0%, transparent 42%)}
.close{justify-items:center;text-align:center}
.close .row{display:flex;gap:clamp(16px,2.6vw,44px);margin-bottom:var(--s6);align-items:flex-start;justify-content:center;flex-wrap:wrap}
.close .row figure{width:clamp(96px,11vw,164px)}
.close .row figure img{background:#f5f3ef;border-radius:14px;padding:12px;
  box-shadow:0 26px 54px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);aspect-ratio:1;object-fit:contain}
.close .row figcaption{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-top:var(--s2);text-align:center}
.close .headline{text-align:center;max-width:18ch}
.close .cta{font-family:var(--ff-body);font-size:clamp(15px,1.3vw,20px);color:var(--muted);margin-top:var(--s4)}
.close .cta b{color:var(--gold);font-weight:600}

/* ============================================================
   REVEAL SYSTEM — beat-driven
   Elements start hidden; JS adds .shown when their beat is reached.
   ============================================================ */
[data-reveal]{opacity:0;will-change:transform,opacity,filter}
[data-reveal="rise"]{transform:translateY(26px);filter:blur(3px);
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out)}
[data-reveal="fade"]{transition:opacity var(--dur) var(--ease)}
[data-reveal="mask"]{clip-path:inset(0 100% 0 0);transition:opacity 400ms var(--ease),clip-path var(--dur) var(--ease-out)}
[data-reveal="stat"]{transform:scale(1.14);filter:blur(10px);letter-spacing:.06em;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out),letter-spacing var(--dur) var(--ease-out)}
[data-reveal].shown{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);letter-spacing:normal}
.stat__value[data-reveal].shown{letter-spacing:-.02em}

/* word-by-word headline stagger */
.headline .w[data-reveal="rise"]{transform:translateY(.5em);filter:blur(4px)}
.headline.shown-cascade .w{opacity:1;transform:none;filter:none}

/* ============================================================
   SCROLL MODE — website shell
   ============================================================ */
body.mode-scroll{overflow:auto;overflow-x:hidden}
body.mode-scroll #deck{height:auto}
body.mode-scroll .scene{position:relative;inset:auto;min-height:100vh;opacity:1;visibility:visible;
  pointer-events:auto;transition:none}
body.mode-scroll .scene__bg video,body.mode-scroll .scene__bg img{transform:none;transition:none}
body.mode-scroll .stat{position:absolute}
/* pinned wrapper handled by JS/GSAP */

/* ============================================================
   PRESENTER CHROME — progress, hint, notes
   ============================================================ */
.chrome{position:fixed;z-index:50;pointer-events:none}
.progress{left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.progress__bar{height:100%;width:0;background:var(--gold);transition:width 600ms var(--ease)}
.dots{bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);transition:all 400ms var(--ease)}
.dot.on{background:var(--gold);width:22px;border-radius:3px}
.hint{bottom:20px;right:26px;font-family:var(--ff-mono);font-size:11px;color:var(--faint);letter-spacing:.1em}
@keyframes fadehint{0%,70%{opacity:.6}100%{opacity:0}}
.hint.auto{animation:fadehint 6s forwards}

/* notes window */
body.notes-view{overflow:auto;background:#141414}
.notes{max-width:900px;margin:0 auto;padding:40px 32px;display:none}
body.notes-view .notes{display:block}
body.notes-view #deck,body.notes-view .chrome{display:none}
.notes h1{font-family:var(--ff-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.note-card{border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:16px;background:#191919}
.note-card.current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.note-card .idx{font-family:var(--ff-mono);font-size:11px;color:var(--faint);letter-spacing:.1em}
.note-card .ttl{font-family:var(--ff-display);font-size:26px;margin:6px 0 12px;color:var(--off-white)}
.note-card .body{font-size:15px;line-height:1.6;color:var(--muted)}
.note-card .beats{font-family:var(--ff-mono);font-size:12px;color:var(--faint);margin-top:12px}

/* ============================================================
   POWERPOINT-STYLE TEMPLATES: hero / why / use  (product = hero)
   ============================================================ */
.hero .scene__inner,.use .scene__inner{margin-inline:0;max-width:min(620px,52vw)}

/* floating product cutout */
.product-figure{z-index:3}
.product-figure img{display:block;height:100%;width:auto;margin:0 auto;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.6));
  -webkit-box-reflect:below 2px linear-gradient(transparent 58%, rgba(0,0,0,.16));
  animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
[data-reveal="product"]{opacity:0;transform:translateY(46px) scale(.965);
  transition:opacity 1200ms var(--ease-out),transform 1200ms var(--ease-out)}
[data-reveal="product"].shown{opacity:1;transform:none}
.hero .product-figure{position:absolute;right:5vw;bottom:5vh;height:82vh;pointer-events:none}
.use  .product-figure{position:absolute;right:6vw;bottom:8vh;height:58vh;pointer-events:none}
/* soft seat-glow behind cutout so white boxes read on dark */
.hero .product-figure::before,.use .product-figure::before{content:"";position:absolute;
  inset:-6% -10% -2% -10%;z-index:-1;
  background:radial-gradient(60% 55% at 50% 45%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 70%);
  filter:blur(20px)}

/* section heading (why / use) */
.h2{font-family:var(--ff-display);font-weight:500;line-height:1.04;color:var(--off-white);
  font-size:clamp(28px,3.4vw,52px);max-width:16ch;text-shadow:var(--tsh)}

/* WHY: split layout, bullets reveal one-by-one */
.why .scene__scrim,.use .scene__scrim{background:
  linear-gradient(90deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.74) 46%, rgba(6,6,7,.30) 78%, rgba(6,6,7,.08) 100%)}
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,72px);
  align-items:center;width:100%;max-width:var(--maxw);margin-inline:auto}
.why .product-figure{height:min(60vh,500px)}
.bullets{list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
.bullet{display:flex;gap:var(--s2);align-items:flex-start;line-height:1.4;color:var(--off-white);
  font-size:clamp(17px,1.5vw,24px);text-shadow:var(--tsh)}
.bullet .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);position:relative;margin-top:2px}
.bullet .tick::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:12px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* USE: dose + numbered steps + certs */
.dose{margin-top:var(--s3)}
.dose__value{display:block;font-family:var(--ff-display);font-weight:600;color:var(--accent);
  font-size:clamp(52px,7vw,110px);line-height:.9;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.85);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 0}
.dose__note{display:block;font-family:var(--ff-mono);font-size:clamp(11px,.95vw,14px);color:var(--muted);margin-top:var(--s2)}
.steps{list-style:none;display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4);max-width:40ch}
.step{display:flex;gap:var(--s2);align-items:center;color:var(--off-white);
  font-size:clamp(15px,1.2vw,19px);text-shadow:var(--tsh)}
.step__n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#0a0a0a;
  font-family:var(--ff-mono);font-weight:500;display:grid;place-items:center;font-size:13px}

/* title inline counter (800,000+) */
.stat--inline{position:static;text-align:center;margin-top:var(--s4);background:none;padding:0;max-width:none}
.stat--inline .stat__value{font-size:clamp(40px,5vw,72px)}
.stat--inline .stat__label{margin:6px auto 0;text-align:center}

/* closing: product cutouts row (transparent, no white cards now) */
.close .row figure img{background:none;box-shadow:none;padding:0;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6))}
.close .close-logo{width:clamp(120px,13vw,180px);margin-top:var(--s4);opacity:.9}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  .scene__bg video,.scene__bg img{transform:none!important}
}

/* ============================================================
   CINEMATIC VIGNETTE — deepens edges, hides panel seams, adds depth
   ============================================================ */
.scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(125% 105% at 50% 44%, transparent 52%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.5) 100%)}

/* ============================================================
   FULLSCREEN BUTTON · CHAPTER TAG · TOUCH NAV ARROWS
   ============================================================ */
.fs-btn{left:22px;bottom:14px;width:42px;height:42px;display:grid;place-items:center;
  background:rgba(10,10,10,.42);border:1px solid var(--line);border-radius:10px;color:var(--off-white);
  pointer-events:auto;cursor:pointer;backdrop-filter:blur(8px);opacity:.5;
  transition:opacity .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.fs-btn:hover{opacity:1;border-color:var(--gold);transform:translateY(-2px)}
.fs-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fs-btn .fs-exit{display:none}
body.is-fs .fs-btn .fs-enter{display:none}
body.is-fs .fs-btn .fs-exit{display:block}

.chapter{top:24px;right:var(--pad-x);text-align:right;font-family:var(--ff-mono);opacity:0;
  transition:opacity .6s var(--ease)}
.chapter.on{opacity:.9}
.chapter__idx{display:block;font-size:12px;letter-spacing:.2em;color:var(--gold)}
.chapter__idx b{color:var(--off-white);font-weight:500}
.chapter__name{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:4px}

.navarrow{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(10,10,10,.32);border:1px solid var(--line);color:var(--off-white);
  font-family:var(--ff-display);font-size:30px;line-height:0;display:grid;place-items:center;
  pointer-events:auto;cursor:pointer;opacity:0;backdrop-filter:blur(6px);
  transition:opacity .35s var(--ease),border-color .3s var(--ease)}
body:hover .navarrow{opacity:.32}
.navarrow:hover{opacity:1;border-color:var(--gold)}
.navarrow--prev{left:18px}
.navarrow--next{right:18px}

/* presenter-only chrome hidden on the website scroll build */
body.mode-scroll .fs-btn,body.mode-scroll .navarrow,body.mode-scroll .chapter,
body.mode-scroll .dots,body.mode-scroll .hint,body.mode-scroll .progress{display:none}
body.notes-view .fs-btn,body.notes-view .navarrow,body.notes-view .chapter{display:none}

/* small screens (web) */
@media (max-width:760px){
  .stat{position:relative;top:auto;right:auto;text-align:left;max-width:100%;margin-top:var(--s4)}
  .headline{font-size:clamp(38px,11vw,64px)}
  .science{max-width:100%}
  .navarrow{display:none}
  .fs-btn{left:14px;bottom:12px}
}