/* Why Ozone page: a hero, a scroll story with a sticky stage and one colour world per chapter,
   a product viewer, a trust strip and a CTA.

   Frame budget rules for this file (aim: a steady 60 fps on mid-range phones):
   - Anything that moves animates only transform or opacity, so the compositor runs it without
     repainting. The stage is plain HTML for that reason (SVG content repaints when it animates).
   - Parallax uses CSS scroll timelines where supported, so it runs off the main thread. The meter and
     the product fan play when their chapter arrives (the page snaps chapter to chapter).
     js/ozon.js only drives it for browsers without them.
   - No paint-heavy effects on large areas: no clip-path on the story, no backdrop blur behind the
     header on this page, no animated colours. Colour changes are a scaled circle plus one text swap. */

/* ---------- Theme values per chapter ---------- */
[data-theme="atoms"]    { --t-bg: #2f2f18; --t-ink: #f6f4ea; --t-ink2: #c9c6b0; --t-accent: #e0b53a; --t-line: rgba(246, 244, 234, .16); --t-chip: rgba(246, 244, 234, .08); }
[data-theme="oil"]      { --t-bg: #c99700; --t-ink: #23230f; --t-ink2: #34331b; --t-accent: #23230f; --t-line: rgba(35, 35, 15, .2);    --t-chip: rgba(255, 255, 255, .22); }
[data-theme="skin"]     { --t-bg: #f3ebe0; --t-ink: #2f2f18; --t-ink2: #57563f; --t-accent: #7a5c00; --t-line: rgba(47, 47, 24, .12);    --t-chip: #fbf5e1; }
[data-theme="dose"]     { --t-bg: #4d4c27; --t-ink: #f6f4ea; --t-ink2: #dcd9c4; --t-accent: #e8c04a; --t-line: rgba(246, 244, 234, .18); --t-chip: rgba(246, 244, 234, .09); }
[data-theme="products"] { --t-bg: #ffffff; --t-ink: #2f2f18; --t-ink2: #57563f; --t-accent: #8c6a00; --t-line: #e6e3d8;                --t-chip: #f5f4ef; }
[data-theme] { --s-ink: var(--t-ink); --s-ink2: var(--t-ink2); --s-accent: var(--t-accent); --s-line: var(--t-line); --s-chip: var(--t-chip); }

/* The header blur is a full-width backdrop filter recomputed on every scrolled frame. The header is
   92% white anyway, so on this page it is solid instead. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
html { scrollbar-gutter: stable; }

/* ---------- One segment at a time ----------
   Mandatory snapping: every scroll ends on exactly one segment (the hero, then each chapter) until
   chapter 5; from there the page scrolls freely. Each segment fills the screen under the header,
   so there is no in-between position. The browser runs the snap scroll itself, on the compositor. */
html { scroll-snap-type: y mandatory; scroll-padding-top: var(--header-h); --seg: calc(100vh - var(--header-h)); --seg: calc(100svh - var(--header-h)); }
.oz-hero { scroll-snap-align: start; scroll-margin-top: 38px; } /* lands at the very top, top bar included */
/* From chapter 5 down the page scrolls freely: js/ozon.js switches snapping off there */
html.snap-free { scroll-snap-type: none; }
html.pv-open { overflow: hidden; }

/* ---------- Hero ---------- */
.oz-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(600px, 78svh); display: grid; align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f5 70%, var(--surface) 100%);
}
.oz-drop {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(62vw, 760px); aspect-ratio: 1; right: -8vw; top: -12%;
  border-radius: 52% 48% 60% 40% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--gold-pale) 30%, var(--gold-soft) 72%, rgba(243, 226, 162, 0) 100%);
  opacity: .9; will-change: transform;
  animation: drop-in 1.6s var(--ease) both;
}
.oz-drop-2 {
  width: min(22vw, 260px); right: auto; left: 46%; top: auto; bottom: 10%;
  border-radius: 45% 55% 40% 60% / 50% 40% 60% 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0%, var(--gold-soft) 55%, rgba(201, 151, 0, .35) 100%);
  opacity: .55; animation-delay: .25s;
}
@keyframes drop-in { from { scale: .6; opacity: 0; } }
@keyframes drop-par { to { transform: translate3d(0, 14vh, 0) rotate(8deg); } }
@keyframes drop-par-2 { to { transform: translate3d(0, -30vh, 0) rotate(-24deg); } }
.oz-hero-copy { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(110px, 12vw, 170px); }
.oz-title { max-width: 12ch; margin: 0 0 22px; }
.oz-title .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.oz-title .ln > span { display: inline-block; transform: translateY(105%); animation: ln-up 1.1s var(--ease) var(--d, 0s) forwards; }
@keyframes ln-up { to { transform: none; } }
.oz-in { animation: fade-up .9s var(--ease) var(--d, 0s) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
.oz-hero-copy .lead { max-width: 520px; }
.oz-hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.oz-scroll {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%);
  width: 26px; height: 42px; border-radius: 999px; border: 1.5px solid var(--line);
  display: grid; justify-content: center; padding-top: 7px;
}
.oz-scroll::after { content: ''; position: absolute; inset: -10px; } /* 46px hit area */
.oz-scroll span { width: 4px; height: 8px; border-radius: 999px; background: var(--gold); animation: oz-scroll 1.8s var(--ease) infinite; }
@keyframes oz-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 640px) { .oz-scroll { display: none; } }

/* ---------- Story: a raised sheet over the hero ----------
   The colour sits on a sticky, viewport-sized layer inside the story, so it never shows outside it.
   Two corner pieces give the rounded top edge without clipping the whole section. */
.story { position: relative; z-index: 1; margin-top: -44px; color: var(--s-ink); --corner: 44px;
  /* The sticky colour layer below has a negative bottom margin, which lets it hang one screen past the
     story's end and cover the next sections. A vertical clip (a plain rectangle, cheap, and unlike
     overflow: hidden it keeps sticky working) stops it at the story's edge. */
  overflow-y: clip; }
.story::before, .story::after { content: ''; position: absolute; top: 0; z-index: 3; width: var(--corner); height: var(--corner); pointer-events: none; }
.story::before { left: 0; background: radial-gradient(circle at 100% 100%, rgba(245, 244, 239, 0) calc(var(--corner) - .5px), var(--surface) var(--corner)); }
.story::after { right: 0; background: radial-gradient(circle at 0 100%, rgba(245, 244, 239, 0) calc(var(--corner) - .5px), var(--surface) var(--corner)); }
.story-bg {
  position: sticky; top: 0; z-index: 0; pointer-events: none; overflow: hidden;
  height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh;
}
.bg-base { position: absolute; inset: 0; background: #2f2f18; }
/* A small circle scaled up on the compositor. Its edge softens as it grows, which reads as a feathered wipe. */
.bg-wipe { position: absolute; left: 0; top: 0; width: 256px; height: 256px; border-radius: 50%; background: #2f2f18; transform: scale(0); will-change: transform; }

.story-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start;
  padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px);
}
.stage-wrap {
  position: sticky; top: calc(var(--header-h) + 16px);
  height: calc(100vh - var(--header-h) - 32px); height: calc(100svh - var(--header-h) - 32px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 12px; padding-bottom: 12px;
}
.stage-float { width: min(100%, 560px); max-height: 100%; aspect-ratio: 1; display: grid; animation: float 7s ease-in-out infinite alternate; will-change: transform; }
@keyframes float { from { transform: translateY(-8px); } to { transform: translateY(8px); } }

/* Chapter rail: a neutral pill, so it reads on every colour without changing colour itself */
.rail { display: flex; gap: 2px; justify-self: center; flex-wrap: wrap; justify-content: center; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 20px rgba(35, 35, 15, .12); }
.rail a {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); border-radius: 999px;
}
.rail a .num { font-size: 12px; opacity: .7; }
.rail a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.rail a[aria-current="step"] { color: var(--ink); }
.rail a[aria-current="step"]::after { transform: none; }
.rail a:hover { color: var(--ink); }

.chapters { display: grid; }
.chapter { position: relative; min-height: var(--seg); display: grid; align-content: center; padding: 48px 0; box-sizing: border-box; scroll-snap-align: start; }
.chapter > :not(.ch-num) { position: relative; }

/* Chapter 3 is one segment. On arrival it steps through its three facts by itself (js/ozon.js);
   hovering or tapping a fact shows that one. The active fact is highlighted. */
.chapter-skin .fact { cursor: default; }
.chapter-skin .fact { transition: opacity .5s var(--ease), transform .8s var(--ease); }
.chapter-skin[data-active="skin-1"] .fact.in:not([data-state="skin-1"]),
.chapter-skin[data-active="skin-2"] .fact.in:not([data-state="skin-2"]),
.chapter-skin[data-active="skin-3"] .fact.in:not([data-state="skin-3"]) { opacity: .42; }
.chapter-skin[data-active="skin-1"] .fact[data-state="skin-1"] .fact-n,
.chapter-skin[data-active="skin-2"] .fact[data-state="skin-2"] .fact-n,
.chapter-skin[data-active="skin-3"] .fact[data-state="skin-3"] .fact-n { background: var(--gold); color: var(--ink); }
.fact-n { transition: background-color .3s var(--ease), color .3s var(--ease); }
.chapter .h2 { max-width: 16ch; margin-bottom: 18px; }
.chapter .lead { max-width: 50ch; }
.chapter .link-arrow { margin-top: 28px; justify-self: start; }
.chapter-frame { display: none; }
.story .eyebrow { color: var(--s-accent); }
.story .eyebrow::before { background: var(--s-accent); }
.story .lead { color: var(--s-ink2); }
.chapter .reveal { transition-delay: var(--rd, 0s); }

/* Large outlined chapter numeral. Faint, and faded out on the side where the text sits. */
.ch-num {
  position: absolute; right: -.04em; top: 50%; margin-top: -.62em; z-index: 0; pointer-events: none;
  font-size: clamp(150px, 20vw, 320px); font-weight: 600; line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--s-accent); opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 65%); mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
  will-change: transform;
}
@keyframes num-par { from { transform: translate3d(0, calc(-14vh - 45px), 0); } to { transform: translate3d(0, calc(14vh + 45px), 0); } }
@keyframes num-par-m { from { transform: translate3d(0, -36px, 0); } to { transform: translate3d(0, 36px, 0); } }

.facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 22px; }
.fact { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--s-line); }
.fact:last-child { border-bottom: 1px solid var(--s-line); }
.fact-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--s-chip); color: var(--s-accent); font-weight: 600; font-size: 14px; }
.fact .h3 { margin-bottom: 6px; }
.fact p { margin: 0; color: var(--s-ink2); max-width: 46ch; }

.doses { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.doses li { display: flex; align-items: center; gap: 12px; }
.doses b { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; min-width: 92px; }
.doses li > span:last-child { color: var(--s-ink2); }
.dose-dot { border-radius: 50%; background: var(--gold); flex: none; }
.dose-dot.d1 { width: 8px; height: 8px; opacity: .55; margin: 0 4px; }
.dose-dot.d2 { width: 12px; height: 12px; opacity: .8; margin: 0 2px; }
.dose-dot.d3 { width: 16px; height: 16px; }
.dose-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; max-width: 560px; }
.dose-card {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px; border-radius: var(--radius); background: var(--s-chip);
  transition: transform .4s var(--ease);
}
.dose-card:hover { transform: translateY(-3px); }
.dose-card > span:last-child { display: grid; gap: 2px; }
.dose-card b { font-weight: 500; font-size: 15px; line-height: 1.3; }
.dose-card .muted { color: var(--s-ink2); }
.dose-thumb { width: 64px; height: 76px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.dose-thumb img { width: 48px; height: 62px; object-fit: contain; filter: var(--product-shadow); }

.principles { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.principles li { padding-top: 16px; border-top: 2px solid var(--s-accent); }
.principles h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.principles p { margin: 0; font-size: 14px; color: var(--s-ink2); }
.fan-hint { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 28px 0 0; padding-left: 20px; font-size: 15px; font-weight: 500; }
.fan-hint::before, .fan-hint::after { content: ''; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold); }
/* The ping ring scales and fades, so it never repaints */
.fan-hint::after { opacity: .5; animation: ping 2s var(--ease) infinite; }
@keyframes ping { 70%, 100% { transform: scale(3); opacity: 0; } }

/* ---------- Trust strip ---------- */
.trust { list-style: none; margin: 0; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; background: var(--surface); border-radius: var(--radius-lg); }
.trust li { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.trust svg { width: 24px; height: 24px; flex: none; color: var(--gold-text); }

/* ---------- CTA ---------- */
.oz-cta { border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 72px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.oz-cta .h2 { max-width: 16ch; margin-bottom: 14px; }
.oz-cta .lead { max-width: 44ch; }
.oz-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; justify-self: end; }
.oz-cta .btn-line { background: transparent; color: #f6f4ea; border-color: rgba(246, 244, 234, .6); }
.oz-cta .btn-line:hover { border-color: #f6f4ea; }

/* ---------- Stage ----------
   Laid out in the units of the original 600 x 600 drawing: 1u = var(--u). Each state shows or
   hides whole groups with opacity and moves pieces with transform. Text colours are fixed per
   group, because each group only appears on its own chapter colour. */
.stage {
  position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; --u: calc(100cqw / 600);
  /* Tilts a little toward the mouse (--mx, --my run from -1 to 1, set by js/ozon.js) */
  transform: rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg));
  will-change: transform;
}
/* Depth: each element moves with the mouse by its own --dz, so higher layers travel further and
   separate from lower ones. Each has its own layer, so moving it never repaints the stage. */
.st-glow, .layer, .st-lbl, .lbl-big, .drop-floor, .drop-wrap, .bubbles, .molecule, .m-track, .m-mark, .fan-item {
  translate: calc(var(--mx, 0) * var(--dz, 0) * 1px) calc(var(--my, 0) * var(--dz, 0) * 1px);
  will-change: transform;
}
.st-glow { --dz: -10; }
.l3 { --dz: 4; } .l2 { --dz: 9; } .l1 { --dz: 14; }
.st-lbl, .lbl-big { --dz: 5; }
.drop-floor { --dz: 6; }
.drop-wrap { --dz: 20; }
.bubbles { --dz: 26; }
.molecule { --dz: 22; }
.m-track { --dz: 8; } .m-mark { --dz: 16; }
.fan-item[data-depth="1"] { --dz: 8; } .fan-item[data-depth="2"] { --dz: 18; } .fan-item[data-depth="3"] { --dz: 30; }
.stage > * { position: absolute; }
.st-g { inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); }
.st-lbl { left: 0; right: 0; margin: 0; text-align: center; font-size: calc(var(--u) * 15); line-height: 1.2; position: absolute; }
.st-glow {
  left: calc(var(--u) * 40); top: calc(var(--u) * 40); width: calc(var(--u) * 520); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fbf5e1 0%, rgba(251, 245, 225, 0) 70%); opacity: .1; transition: opacity .9s var(--ease);
}

/* Atoms */
.molecule { position: absolute; left: calc(var(--u) * 188); top: calc(var(--u) * 188); width: calc(var(--u) * 224); height: calc(var(--u) * 190); transition: transform .9s var(--ease); }
.bonds { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .35; }
.bonds line { stroke: #f6f4ea; stroke-width: 2; }
.atom {
  position: absolute; width: calc(var(--u) * 96); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f6dc84 0%, #d9a91a 38%, #a87e00 78%, #7d5d00 100%);
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(0, 0, 0, .32);
}
.atom::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #ffffff 0%, #f4f1e4 50%, #cfc9ad 100%); opacity: 0; transition: opacity .6s var(--ease); }
.a1 { left: 0; top: calc(var(--u) * 94); }
.a2 { left: calc(var(--u) * 128); top: calc(var(--u) * 94); }
.a3 { left: calc(var(--u) * 64); top: 0; }
.lbl-big { position: absolute; left: 0; right: 0; top: calc(var(--u) * 410); margin: 0; text-align: center; font-size: calc(var(--u) * 64); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #f6f4ea; }
.lbl-big span { font-size: .47em; position: relative; top: .3em; }
.lbl-atoms { top: calc(var(--u) * 502); color: #c9c6b0; }

/* Drop: a teardrop made of a rotated square with three rounded corners */
.drop-wrap { position: absolute; left: calc(var(--u) * 180); top: calc(var(--u) * 252); width: calc(var(--u) * 240); aspect-ratio: 1; transition: transform .9s var(--ease); }
.drop {
  position: absolute; inset: 0; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: linear-gradient(135deg, #9a9842 0%, #4d4c27 100%);
  box-shadow: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 18) rgba(35, 35, 15, .22), inset calc(var(--u) * -10) calc(var(--u) * -10) calc(var(--u) * 30) rgba(35, 35, 15, .35);
}
.drop::after { /* gloss */
  content: ''; position: absolute; left: 28%; top: 30%; width: 30%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: rotate(-45deg);
}
.drop-floor {
  position: absolute; left: calc(var(--u) * 190); top: calc(var(--u) * 486); width: calc(var(--u) * 220); height: calc(var(--u) * 34); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(35, 35, 15, .45), rgba(35, 35, 15, 0));
  transition: transform .9s var(--ease), opacity .7s var(--ease);
}
.bubbles { position: absolute; inset: 0; transition: opacity .6s var(--ease); }
.bubbles i {
  position: absolute; border-radius: 50%; background: #fff; opacity: 0;
  left: calc(var(--u) * (var(--x) - var(--r))); top: calc(var(--u) * (var(--y) - var(--r))); width: calc(var(--u) * var(--r) * 2); aspect-ratio: 1;
}
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translateY(-33.3cqw); opacity: 0; } }
.lbl-drop { top: calc(var(--u) * 530); color: #23230f; transition: opacity .6s var(--ease); }

/* Skin */
.layer { position: absolute; left: calc(var(--u) * 90); width: calc(var(--u) * 420); height: calc(var(--u) * 52); border-radius: 999px; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(35, 35, 15, .14), inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .6); }
.layer::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--gold-soft); opacity: 0; transition: opacity .6s var(--ease); }
.l1 { top: calc(var(--u) * 300); background: #fbf5e1; }
.l2 { top: calc(var(--u) * 372); background: #ece0cc; }
.l3 { top: calc(var(--u) * 444); background: #e2d3bb; }
.layer i {
  position: absolute; z-index: 1; left: var(--x); top: 50%; width: calc(var(--u) * 14); aspect-ratio: 1;
  margin: calc(var(--u) * -7) 0 0 calc(var(--u) * -7); border-radius: 50%; background: var(--gold); opacity: .25; transition: opacity .6s var(--ease);
}
.lbl-skin { top: calc(var(--u) * 545); color: #57563f; }

/* Meter. Square ends: the dose marks cover both ends of the bar. */
.m-track { position: absolute; left: calc(var(--u) * 100); top: calc(var(--u) * 330); width: calc(var(--u) * 400); height: calc(var(--u) * 12); background: rgba(246, 244, 234, .18); box-shadow: inset 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0, 0, 0, .35); }
.m-fill { position: absolute; inset: 0; background: var(--gold); transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--ease); }
/* Arriving on the dose chapter fills the bar and lights 40, 80 and 160 in turn */
.stage[data-state="dose"] .m-fill { transform: none; transition: transform 1.3s var(--ease) .25s; }
.m-mark { opacity: .3; transition: opacity .4s var(--ease); }
.stage[data-state="dose"] .m-mark { opacity: 1; transition: opacity .5s var(--ease); }
.stage[data-state="dose"] .m1 { transition-delay: .3s; }
.stage[data-state="dose"] .m2 { transition-delay: .75s; }
.stage[data-state="dose"] .m3 { transition-delay: 1.2s; }
.m-mark { position: absolute; left: calc(var(--u) * var(--x)); top: calc(var(--u) * 336); width: 0; height: 0; color: #f6f4ea; }
.m-mark i { position: absolute; width: calc(var(--u) * var(--r) * 2); aspect-ratio: 1; left: calc(var(--u) * var(--r) * -1); top: calc(var(--u) * var(--r) * -1); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f6dc84, #c99700 60%, #8c6a00); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 12) rgba(0, 0, 0, .35); }
.m-mark b { position: absolute; bottom: calc(var(--u) * 36); left: 0; transform: translateX(-50%); font-size: calc(var(--u) * 40); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.m-mark span { position: absolute; top: calc(var(--u) * 30); left: 0; transform: translateX(-50%); font-size: calc(var(--u) * 14); color: #dcd9c4; }
.lbl-meter { top: calc(var(--u) * 425); color: #dcd9c4; }

/* Product fan: buttons that open the product viewer. These are the final positions;
   they spread out from the centre when the brand chapter arrives. */
.fan-item {
  position: absolute; left: calc(var(--u) * 225); top: calc(var(--u) * 206); width: calc(var(--u) * 150); height: calc(var(--u) * 188);
  border-radius: 16px; cursor: pointer; will-change: transform;
}
/* Elevation: back products sit low, the centre jar sits highest. Higher means lifted further, with a
   wider and fainter shadow on the floor. Shadows are painted once and only moved or faded. */
.fan-item[data-depth="1"] { --lift: 0%; --sy: 0%; --ss: .9; --so: .9; }
.fan-item[data-depth="2"] { --lift: -3%; --sy: 45%; --ss: 1.05; --so: .75; }
.fan-item[data-depth="3"] { --lift: -7%; --sy: 100%; --ss: 1.25; --so: .55; }
.fan-item::before {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(35, 35, 15, .36), rgba(35, 35, 15, 0));
  opacity: var(--so); transform: translateY(var(--sy)) scale(var(--ss));
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.fan-item img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: var(--product-shadow); translate: 0 var(--lift); transition: transform .45s var(--ease); }
.fan-item:hover img, .fan-item:focus-visible img { transform: translateY(-7%) scale(1.08); }
.fan-item:hover::before, .fan-item:focus-visible::before { opacity: calc(var(--so) * .55); transform: translateY(calc(var(--sy) + 30%)) scale(calc(var(--ss) * 1.2)); }
/* Hover tooltip: one element for all seven products. It only fades and moves (transform), and
   slides from product to product, so hovering never repaints the stage. */
.stage-float { position: relative; perspective: 1400px; }
.fan-tip {
  position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: 250px;
  display: grid; gap: 3px; padding: 12px 14px 13px; border-radius: 14px;
  background: #2f2f18; color: #f6f4ea; box-shadow: 0 14px 34px rgba(35, 35, 15, .24);
  pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0px), calc(var(--y, 0px) + 6px), 0) scale(.96);
  transition: opacity .18s var(--ease), transform .3s var(--ease);
  will-change: transform, opacity;
}
.fan-tip.show { opacity: 1; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); }
.fan-tip::after { /* pointer toward the product */
  content: ''; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 12px; height: 12px; margin-left: -6px;
  background: inherit; border-radius: 2px; transform: rotate(45deg);
}
.fan-tip.below::after { bottom: auto; top: -5px; }
.ft-cat { font-size: 12px; font-weight: 500; color: #e0b53a; }
.ft-name { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ft-use { font-size: 13px; line-height: 1.45; color: #c9c6b0; }

/* Collapsed in the centre until the brand chapter arrives, then the products spread out in turn */
.fan-item { transform: scale(.65); opacity: .5; transition: transform .6s var(--ease), opacity .5s var(--ease); }
.fan-item[data-depth="1"] { opacity: .4; }
.f7 { transform: none; opacity: 1; }
.f1 { --i: 0; } .f2 { --i: 1; } .f3 { --i: 2; } .f4 { --i: 3; } .f5 { --i: 4; } .f6 { --i: 5; } .f7 { --i: 6; }
.stage[data-state="products"] .fan-item { transition: transform 1.1s var(--ease) calc(.15s + var(--i) * 70ms), opacity .8s var(--ease) calc(.15s + var(--i) * 70ms); }
.stage[data-state="products"] .f1 { transform: translate(-38.33cqw, -27.5cqw) rotate(-12deg) scale(.9); opacity: .85; }
.stage[data-state="products"] .f2 { transform: translate(38.33cqw, -27.5cqw) rotate(12deg) scale(.9); opacity: .85; }
.stage[data-state="products"] .f3 { transform: translate(-43.67cqw, 7.83cqw) rotate(-9deg); opacity: 1; }
.stage[data-state="products"] .f4 { transform: translate(43.67cqw, 7.83cqw) rotate(9deg); opacity: 1; }
.stage[data-state="products"] .f5 { transform: translate(-22cqw, 34.5cqw) rotate(-6deg); opacity: 1; }
.stage[data-state="products"] .f6 { transform: translate(22cqw, 34.5cqw) rotate(6deg); opacity: 1; }
.stage[data-state="products"] .f7 { transform: translate(0, -1.67cqw) scale(1.2); }

/* ---------- Stage states ---------- */
.stage[data-state="oil"] .st-glow { opacity: .45; }
.stage[data-state^="skin"] .st-glow { opacity: .7; }
.stage[data-state="dose"] .st-glow { opacity: .08; }
.stage[data-state="products"] .st-glow { opacity: .9; }

.stage[data-state="atoms"] .g-atoms { opacity: 1; }
.stage[data-state="atoms"] .a3 { animation: a3-in 1.3s var(--ease) both; }
.stage[data-state="atoms"] .bonds { animation: bond-in 1.3s var(--ease) both; }
.stage[data-state="atoms"] .lbl-big, .stage[data-state="atoms"] .lbl-atoms { animation: fade-in 1.2s var(--ease) .6s both; }
@keyframes a3-in { from { transform: translate(23.3cqw, -25cqw); opacity: 0; } 45% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes bond-in { from { opacity: 0; } 60% { opacity: 0; } to { opacity: .35; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.stage[data-state="oil"] .g-drop, .stage[data-state="oil"] .g-atoms { opacity: 1; }
.stage[data-state="oil"] .molecule { transform: translate(0, calc(var(--u) * 60)) scale(.42); }
.stage[data-state="oil"] .atom::after { opacity: 1; }
.stage[data-state="oil"] .bonds { opacity: .8; }
.stage[data-state="oil"] .lbl-big, .stage[data-state="oil"] .lbl-atoms { opacity: 0; transition: opacity .4s var(--ease); }
.stage[data-state="oil"] .bubbles i { animation: bubble 4s linear var(--d, 0s) infinite; }
.stage[data-state="oil"] .lbl-drop { animation: fade-in 1s var(--ease) .5s both; }

.stage[data-state^="skin"] .g-skin, .stage[data-state^="skin"] .g-drop { opacity: 1; }
.stage[data-state^="skin"] .drop-wrap { transform: translate(0, calc(var(--u) * -118)) scale(.5); }
.stage[data-state^="skin"] .drop-floor { transform: translate(0, calc(var(--u) * -164)) scale(.42); opacity: .8; }
.stage[data-state^="skin"] .bubbles, .stage[data-state^="skin"] .lbl-drop { opacity: 0; }
.stage[data-state="skin-1"] .l1::after, .stage[data-state="skin-2"] .l2::after, .stage[data-state="skin-3"] .l3::after { opacity: 1; }
.stage[data-state="skin-1"] .l1 i, .stage[data-state="skin-2"] .l2 i, .stage[data-state="skin-3"] .l3 i { opacity: 1; animation: pulse 2.4s var(--ease) infinite; }
.stage[data-state="skin-2"] .l1 i, .stage[data-state="skin-3"] .l1 i, .stage[data-state="skin-3"] .l2 i { opacity: .6; }
@keyframes pulse { 50% { transform: scale(1.35); } }

.stage[data-state="dose"] .g-meter { opacity: 1; }
.stage[data-state="products"] .g-fan { opacity: 1; pointer-events: auto; }

/* ---------- Scroll timelines: scroll-linked motion on the compositor ---------- */
@supports (animation-timeline: view()) {
  .oz-hero { view-timeline: --hero block; }
  .oz-drop { animation: drop-in 1.6s var(--ease) both, drop-par linear both; animation-timeline: auto, --hero; animation-range: normal, exit; }
  .oz-drop-2 { animation-name: drop-in, drop-par-2; animation-delay: .25s, 0s; }
  .ch-num { animation: num-par linear both; animation-timeline: view(); animation-range: cover; }
}

/* ---------- Product viewer ---------- */
.pv { position: fixed; inset: 0; z-index: 95; display: grid; overflow-y: auto; overscroll-behavior: contain; color: #f6f4ea; }
.pv[hidden] { display: none; }
.pv-bg { position: fixed; inset: 0; background: #2f2f18; }
.pv-in {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 80px);
  width: min(1180px, 100%); margin: auto; padding: 96px var(--gutter) 116px; touch-action: pan-y;
}
.pv-media { position: relative; width: min(100%, 440px); aspect-ratio: 4 / 5; justify-self: center; }
.pv-glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(224, 181, 58, .32) 0%, rgba(224, 181, 58, 0) 66%); }
.pv-media { perspective: 1000px; }
.pv-tilt { position: absolute; inset: 0; transform: rotateX(calc(var(--my, 0) * -8deg)) rotateY(calc(var(--mx, 0) * 10deg)); will-change: transform; }
.pv-floor {
  position: absolute; left: 14%; right: 14%; bottom: -5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  translate: calc(var(--mx, 0) * -14px) 0; will-change: transform;
}
/* Out of flow, so a tall product photo cannot stretch the 4:5 box */
.pv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.pv-cat { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; font-weight: 500; color: #e0b53a; }
.pv-cat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #e0b53a; }
.pv-title { font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 500; margin: 0 0 16px; max-width: 20ch; }
.pv-lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; margin: 0 0 24px; max-width: 34ch; }
.pv-pts { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.pv-pts li { display: flex; gap: 12px; align-items: baseline; color: #dcd9c4; }
.pv-pts li::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }
.pv-meta { margin: 0 0 24px; color: #c9c6b0; font-size: 15px; }
.pv-meta b { color: #f6f4ea; font-size: 20px; font-weight: 600; margin-left: 6px; }
.pv-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pv-ctas .link-arrow { color: #f6f4ea; }
.pv-close { position: fixed; top: 18px; right: 18px; z-index: 2; color: #f6f4ea; }
.pv-close:hover { background: rgba(246, 244, 234, .1); }
.pv-nav { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 18px; pointer-events: none; }
.pv-nav > * { pointer-events: auto; }
.pv-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(246, 244, 234, .4); display: grid; place-items: center; color: #f6f4ea; background: #2f2f18; transition: border-color .2s var(--ease); }
.pv-btn:hover { border-color: #f6f4ea; }
.pv-btn svg { width: 20px; height: 20px; }
.pv-btn.prev svg { transform: rotate(180deg); }
.pv-count { min-width: 52px; text-align: center; font-size: 14px; color: #c9c6b0; }

/* ---------- Phone ---------- */
@media (max-width: 900px) {
  .story { margin-top: -28px; --corner: 28px; }
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .stage-wrap {
    top: var(--header-h); height: 40vh; height: 40svh; z-index: 2; grid-template-rows: 1fr;
    background: var(--band, #2f2f18); border-bottom: 1px solid var(--s-line);
    margin: 0 calc(-1 * var(--gutter)); padding: 8px 0;
  }
  .stage-float { width: auto; height: calc(40vh - 18px); height: calc(40svh - 18px); max-width: 100%; }
  .rail { display: none; }
  html { scroll-padding-top: calc(var(--header-h) + 40svh); --seg: calc(100vh - var(--header-h) - 40vh); --seg: calc(100svh - var(--header-h) - 40svh); }
  .chapter { min-height: var(--seg); padding: 28px 0; align-content: start; }
  .chapter-skin .fact { padding: 12px 0; }
  .chapter-skin .facts { gap: 0; }
  .chapter .h2 { max-width: none; }
  .ch-num { top: 12px; margin-top: 0; font-size: 34vw; }
  .oz-hero-copy .display { font-size: clamp(36px, 11vw, 56px); }
  .oz-drop-2 { display: none; }
  .principles { grid-template-columns: 1fr; gap: 14px; }
  .trust { grid-template-columns: 1fr 1fr; }
  .oz-cta { grid-template-columns: 1fr; }
  .oz-cta-btns { justify-self: start; }
  .pv-in { grid-template-columns: 1fr; gap: 20px; padding: 76px var(--gutter) 40px; align-content: start; }
  .pv-media { width: min(64vw, 300px); }
  /* On phones the arrows sit in the top bar, opposite the close button, so they never cover the price */
  .pv-nav { top: 14px; bottom: auto; left: 12px; right: auto; gap: 10px; }
  .pv-btn { width: 44px; height: 44px; }
  .pv-close { top: 14px; right: 12px; }
  .pv-bg::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 72px; background: linear-gradient(#2f2f18 70%, rgba(47, 47, 24, 0)); }
  @supports (animation-timeline: view()) { .ch-num { animation-name: num-par-m; } }
}
@media (max-width: 560px) {
  .dose-cards { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-height: 560px) and (min-width: 901px) {
  .stage-float { width: min(100%, 360px); }
}

/* ---------- Reduced motion: no sticky stage, no wipe and no scroll motion. Each chapter is its
   own colour band with a still frame of its final state. ---------- */
body.static-stage .story-bg, body.static-stage .stage-wrap, body.static-stage .story::before, body.static-stage .story::after { display: none; }
body.static-stage .story { margin-top: 0; }
html:has(body.static-stage) { scroll-snap-type: none; }
body.static-stage .story-grid { grid-template-columns: 1fr; padding: 0; }
body.static-stage .chapter {
  min-height: auto; padding: 64px 0; color: var(--s-ink);
  background: var(--t-bg); box-shadow: 0 0 0 100vmax var(--t-bg); clip-path: inset(0 -100vmax);
}
body.static-stage .chapter-frame { display: block; margin-bottom: 20px; max-width: 360px; }
body.static-stage .stage *, body.static-stage .ch-num { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage-float, .ch-num, .oz-drop { animation: none !important; transition: none !important; }
  .oz-title .ln > span { transform: none; }
}