/* ============================================================
   Pura Soda — home v3 (new design, Aug 2026)
   Loads AFTER styles.css and reuses its tokens (--u), nav, menu,
   socials and reveal styles. Everything here is v3-only.
   Design source: Figma "New website" / Pages / Desktop - 11.
   All values are design px at 1440 via calc(N * var(--u)).
   ============================================================ */

.v3 { position: relative; }
html { overflow-anchor: none; }

/* ── head zone: hero + intro + covered + master ribbon ───── */
.headzone { position: relative; }

.hero3 { position: relative; height: calc(1047 * var(--u)); overflow: hidden; /* no z-index: children must layer against the ribbon in the root context */ }
.hero3 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero3__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,45,60,.18), rgba(0,45,60,0) 45%, rgba(0,45,60,.25)); }
.hero3__title { position: absolute; z-index: 3; left: 50%; top: calc(350 * var(--u));
  transform: translateX(-50%); width: calc(900 * var(--u)); text-align: center;
  color: #fff; font-weight: 700; font-size: calc(94 * var(--u)); line-height: .94; margin: 0; }
.hero3__sub { position: absolute; z-index: 3; left: 50%; top: calc(766 * var(--u)); text-transform: capitalize;
  transform: translateX(-50%); width: calc(900 * var(--u)); text-align: center;
  color: #fff; font-weight: 700; font-size: calc(54 * var(--u)); margin: 0; }
.hero3__title, .hero3__sub { opacity: 0; translate: 0 24px;
  animation: v3rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero3__sub { animation-delay: .15s; }
@keyframes v3rise { to { opacity: 1; translate: 0 0; } }

/* gradient ends on a 25% tint of the brand teal (#20b4c2 → #c7ecf0), not
   white — the last line was unreadable (Lee, 14 Sep) */
.intro3 { position: relative; margin-top: calc(-20 * var(--u));
  height: calc(821 * var(--u));
  background: linear-gradient(180deg, #52b7c1 0%, #8cd6dc 45%, #b5e4e9 75%, #c7ecf0 100%); }
/* copy is vertically centred in the band (top/bottom + auto margins; the
   X centring stays on the reveal's translateX) — editors' multi-line copy
   used to hang from a fixed top (Lee, 14 Sep) */
/* the 26u strip between the band and the tiles used to read as part of the
   fade to white; the band now ends on the tint, so the strip carries it
   too (Lee, 14 Sep: "carry the tint into the next section") */
.intro3::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(26 * var(--u)); background: #c7ecf0; }
.intro3 p { position: absolute; z-index: 3; left: 50%; top: 0; bottom: 0; margin: auto 0; height: max-content;
  transform: translateX(-50%); width: calc(1005 * var(--u)); text-align: center;
  color: #fff; font-weight: 700; font-size: calc(52 * var(--u)); line-height: 1.2; }

.covered3 { position: relative; margin-top: calc(-28 * var(--u));
  height: calc(388 * var(--u)); background: #f79650; }
.covered3 p { position: absolute; z-index: 3; left: 50%; top: calc(78 * var(--u));
  transform: translateX(-50%); width: calc(1005 * var(--u)); margin: 0; text-align: center;
  color: #fff; font-weight: 700; font-size: calc(54 * var(--u)); line-height: 1.2; }

/* master ribbon — placed exactly as Group 43 in the frame (no mirror on home) */
.ribbon-host { position: absolute; z-index: 1; pointer-events: none;
  left: calc(-653 * var(--u)); top: calc(-417 * var(--u));
  width: calc(2094 * var(--u)); height: calc(2889 * var(--u));
  /* ribbon-master2 already reads tail-left; no flip (home matrix is identity) */ }
.ribbon-host svg { width: 100%; height: 100%; display: block; }
/* segmented draw: each spine segment covers --a..(--a + 1/--k) of --p */
.ribbon-host .spine { stroke-dasharray: 1 1.1;
  stroke-dashoffset: calc(1.05 * (1 - clamp(0, (var(--p, 0) - var(--a, 0)) * var(--k, 1), 1))); }

/* ── ranges: three-tile row (Desktop - 13) ──────────────── */
.trio { position: relative; height: calc(675 * var(--u)); background: #fff;
  margin-top: calc(26 * var(--u)); display: flex; }
.trio__tile { position: relative; z-index: 2; flex: 1 1 0;
  height: 100%; background: var(--bg); overflow: hidden; }
/* cycling variant slides inside each tile */
.trio__cycle { position: absolute; inset: 0; z-index: 1; }
.trio__slide { position: absolute; inset: 0; z-index: 1; background: var(--bg);
  transform: translateX(100%); }
/* transition only while entering/leaving: the idle reset back to +100%
   must snap invisibly, not animate back across the tile */
.trio__slide.is-on, .trio__slide.is-out {
  transition: transform .7s cubic-bezier(.25,.8,.25,1); }
.trio__slide.is-on { transform: translateX(0); z-index: 2; }
.trio__slide.is-out { transform: translateX(-100%); }
.trio__slide img { position: absolute; z-index: 2;
  left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u));
  width: calc(var(--w) * var(--u));
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); }
/* cans bleed over the tile edges and over the ribbon (z3 > ribbon z2);
   tiles have no z-index so their backgrounds stay under the ribbon */
.trio__can { position: absolute; z-index: 2;
  left: calc(var(--cx) * var(--u)); top: calc(var(--cy) * var(--u));
  width: calc(var(--w) * var(--u));
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); }
.trio__pill { position: absolute; z-index: 4; text-decoration: none; cursor: pointer;
  left: calc(51 * var(--u)); top: calc(45 * var(--u));
  width: calc(163 * var(--u)); height: calc(49 * var(--u));
  background: #00b9c3; border-radius: calc(24.5 * var(--u));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: calc(24 * var(--u)); }
.trio__pill::after { content: ''; position: absolute; inset: calc(4 * var(--u));
  border: 2px solid #fff; border-radius: calc(20 * var(--u)); }

/* generator ribbon: wraps the tile row, sweeps down into the promise section */
.trio .stripes--v3 { position: absolute; z-index: 5; pointer-events: none;
  /* Figma instance is scaled AND rotated: node 1768x1762 at (842, 2090),
     rotated 47.1deg about its own top-left */
  left: calc(842 * var(--u)); top: calc(-134 * var(--u));
  width: calc(1768 * var(--u)); height: calc(1762 * var(--u));
  transform: rotate(47.75deg); transform-origin: top left; }

/* ── tail zone: promise / socials / footer + second ribbon ── */
.tailzone { position: relative; }

/* media runs 70u past the section: the socials wave's right-hand dip reaches
   deeper than the 95u overlap, and the video must sit behind it — clipping at
   the section edge left a white sliver there (QA, 8 Sep) */
.promise3 { position: relative; z-index: 1; height: calc(999 * var(--u)); }
.promise3__media { position: absolute; inset: 0; bottom: calc(-70 * var(--u)); overflow: hidden; }
.promise3__media video { width: 100%; height: 100%; object-fit: cover; }
.promise3__wash { position: absolute; inset: 0; background: rgba(0,45,60,.28); }
.promise3__inner { position: relative; height: 100%; }
/* centered via auto margins, not transform — the .reveal transition owns
   this element's transform (translateY) and would clobber a translateX */
.promise3__title { position: absolute; left: 0; right: 0; width: max-content;
  margin: 0 auto; top: calc(302 * var(--u));
  color: #fff; font-weight: 700; font-size: calc(74 * var(--u)); }
.promise3__row { position: absolute; left: 50%; transform: translateX(-50%); top: calc(440 * var(--u));
  width: calc(1184 * var(--u)); display: flex; justify-content: space-between; }
.promise3__col { width: calc(215 * var(--u)); text-align: center; color: #fff; }
.promise3__col img { display: block; margin: 0 auto; width: auto; height: calc(110 * var(--u)); }
.promise3__col p { font-weight: 700; font-size: calc(28 * var(--u)); line-height: 1.2;
  margin: calc(18 * var(--u)) 0 0; }

/* socials reuses .socials from styles.css unchanged:
   turquoise wave background + margin-top -95u overlapping the promise video */

/* footer — wave top, teal gradient */
.foot3 { position: relative; z-index: 1; height: calc(636 * var(--u)); color: #fff; }
.foot3__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.foot3__inner { position: relative; height: 100%; }
.foot3__brand { position: absolute; left: calc(88 * var(--u)); top: calc(199 * var(--u)); }
.foot3__brand img { width: calc(138 * var(--u)); }
.foot3__tag { margin: calc(24 * var(--u)) 0 0; font-weight: 700;
  font-size: calc(54 * var(--u)); }
.foot3__fine a { color: inherit; opacity: .85; text-decoration: underline; margin-left: calc(6 * var(--u)); }
.foot3__fine a:hover { opacity: 1; }
.foot3__fine { position: absolute; left: calc(88 * var(--u)); bottom: calc(36 * var(--u));
  font-size: calc(18 * var(--u)); opacity: .8; }
.foot3__nav { position: absolute; right: calc(104 * var(--u)); top: calc(189 * var(--u));
  display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.foot3__nav a { color: #f8d45b; text-decoration: none; font-weight: 700;
  font-size: calc(30 * var(--u)); line-height: 1.15; }
.foot3__nav a:hover { color: #fff; }
.foot3__social img { width: 100%; display: block;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .3s cubic-bezier(.2,.7,.2,1); }
.foot3__social > a { position: absolute; top: 0; height: 100%; }
/* hover: tilt 10deg, +5%, white (Lee, 8 Sep); invert filter whitens the orange */
.foot3__social > a:hover img { transform: rotate(10deg) scale(1.05); filter: brightness(0) invert(1); }
.foot3__social { position: absolute; right: calc(93 * var(--u)); bottom: calc(92 * var(--u));
  width: calc(277 * var(--u)); height: calc(47 * var(--u)); }

/* second ribbon (generator art, demo engine) over promise/socials */

@media (prefers-reduced-motion: reduce) {
  .hero3__title, .hero3__sub { animation: none; opacity: 1; translate: 0 0; }
  .pane__panel .slide { transition: none; }
}


/* ── has-wash child overrides ─────────────────────────────
   site.css forces .has-wash children to position:relative/z1 (fine for the
   demo's in-flow tiles); this build positions section content absolutely
   against Figma coordinates, so restore that with higher specificity. */
.v3 .has-wash > .abs { position: absolute; z-index: 3; }
.v3 .intro3 > p, .v3 .covered3 > p { position: absolute; z-index: 3; }
.v3 .pdesc > p { position: absolute; z-index: 3; }
.v3 .pnutri > .pnutri__card, .v3 .pnutri > .pnutri__right { position: absolute; z-index: 3; }
.v3 .trio__tile > .trio__can { position: absolute; z-index: 2; }
.v3 .trio__tile > .trio__pill { position: absolute; z-index: 4; text-decoration: none; cursor: pointer; }
.v3 .has-wash > .cblock { position: absolute; z-index: 3; }
.v3 .has-wash > .storecard { position: absolute; z-index: 3; }

.v3 .socials { margin-top: calc(-64 * var(--u)); }
.menu__flavours a { cursor: pointer !important; }

.v3 .trio__tile > .trio__cycle { position: absolute; z-index: 1; }


/* ── page menu (burger): all pages on the teal->white gradient ── */
.pagemenu { position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(180deg, #00b9c3, #ffffff);
  opacity: 0; visibility: hidden; transition: opacity .45s cubic-bezier(.2,.7,.2,1), visibility 0s .45s; }
.pagemenu.is-open { opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.2,.7,.2,1); }
.pagemenu .menu__logo { position: absolute; left: 50%; top: calc(21 * var(--u));
  transform: translateX(-50%); }
.pagemenu .menu__logo img { width: calc(138 * var(--u)); }
.pagemenu__list { position: absolute; left: calc(92 * var(--u)); top: calc(185 * var(--u));
  /* item pitch trimmed 15% (was lh1.12 + 18u gap — QA, 8 Sep) */
  display: flex; flex-direction: column; gap: calc(13 * var(--u)); }
.pagemenu__list a { color: #fff; text-decoration: none; font-weight: 700;
  font-size: calc(54 * var(--u)); line-height: 1;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s; }
.pagemenu__list a:hover { transform: translateX(calc(20 * var(--u))); color: var(--foot-a); }
body.pagemenu-open { overflow: hidden; }

/* ── floating flavour icons in the products menu ── */
.menu__bubbles { overflow: hidden; }
.menu__icon { position: absolute; bottom: -160px; pointer-events: none;
  animation: navIconFloat var(--dur, 20s) linear infinite; }
@keyframes navIconFloat {
  0%   { transform: translateY(0) rotate(-8deg); }
  50%  { transform: translateY(-60vh) translateX(30px) rotate(10deg); }
  100% { transform: translateY(-120vh) translateX(-20px) rotate(-6deg); }
}

/* screenshot harness: final-state rendering (added by ?noanim=1) */
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  transition-duration: 0s !important; animation-duration: 0s !important;
  transition-delay: 0s !important; animation-delay: 0s !important; }

/* socials links uppercase per design */
.v3 .socials a { text-transform: uppercase; }


/* ============================================================
   Mobile home — Figma "Mobile home" 2218:69829 (400-wide frame).
   --u is 0.25vw here, so N*u = design px.
   ============================================================ */
@media (max-width: 640px) {
  /* nav: logo left + burger only (no Products pill in the design) */
  .v3 ~ * .pill, body:has(.v3) .pill, .nav .pill { display: none; }
  .nav__logo { left: calc(20 * var(--u)); margin-left: 0; transform: none; }
  /* commerce pill sits where the frame's burger circle lives */
  .npill { right: calc(17 * var(--u)); top: calc(33 * var(--u)); }
  .nav__logo img { width: calc(150 * var(--u)); }

  /* hero */
  .hero3 { height: 100vh; height: 100svh; }
  .hero3__title { top: calc(225 * var(--u)); width: calc(289 * var(--u));
    font-size: calc(44 * var(--u)); line-height: 1.14; }
  .hero3__sub { top: calc(478 * var(--u)); width: calc(285 * var(--u));
    font-size: calc(24 * var(--u)); }

  /* intro */
  .intro3 { height: calc(731 * var(--u)); margin-top: 0;
    background: linear-gradient(180deg, #52b7c1 0%, #8cd6dc 55%, #b5e4e9 85%, #c7ecf0 100%); }
  .intro3::after { height: calc(31 * var(--u)); }
  .intro3 p { left: 50%; top: 0; bottom: 0; width: calc(345 * var(--u));
    font-size: calc(32 * var(--u)); line-height: 1.27; }

  /* master ribbon — mobile instance: 639x881 at (-201, -76), unflipped.
     Draws on scroll like desktop (Lee, 8 Sep). The old "2 stray fragments
     before scroll" were round-linecap dots painting at --p:0 — now killed
     by the .art0 class (site.css) instead of freezing the whole draw. */
  .ribbon-host { left: calc(-201 * var(--u)); top: calc(-76 * var(--u));
    width: calc(639 * var(--u)); height: calc(881 * var(--u)); }

  /* trio: stacked full-width tiles, no range pills in the mobile design */
  .trio { flex-direction: column; height: auto; margin-top: calc(31 * var(--u)); }
  /* pills back per Lee (8 Sep): desktop-style button on each stacked tile */
  .trio__tile { flex: none; height: calc(479 * var(--u)); }
  .trio__slide img, .trio__can {
    --cx: 200 !important; --cy: 293 !important; --w: 196 !important; }

  /* wrap ribbon — 909x906 instance at (228.6, 2630) frame = (228.6, 1174) in .trio */
  .trio .stripes--v3 { left: calc(228.6 * var(--u)); top: calc(984 * var(--u));
    width: calc(909 * var(--u)); height: calc(906 * var(--u));
    transform: rotate(44.43deg); }

  /* promise: single centred column */
  .promise3 { height: calc(1568 * var(--u)); }
  /* frame shows the promise photo heavily bleached on mobile */
  .promise3__title { top: calc(125 * var(--u)); font-size: calc(54 * var(--u)); width: max-content; }
  .promise3__row { top: calc(213 * var(--u)); width: 100%;
    flex-direction: column; align-items: center; gap: calc(42 * var(--u)); }
  .promise3__col { width: calc(210 * var(--u)); }
  .promise3__col img { height: calc(110 * var(--u)); }
  .promise3__col p { font-size: calc(28 * var(--u)); }

  /* socials: 2x3 grid of cards (design has no fan on mobile) */
  .v3 .socials { height: calc(955 * var(--u)); margin-top: calc(-42 * var(--u));
    padding: 0; overflow: hidden; }
  /* mobile wave artwork (frame 2218:70020), not the squeezed desktop one */
  .v3 .socials::before { background: url("assets/art/socials-wave-mobile.svg") no-repeat top left /
    calc(1452 * var(--u)) calc(835 * var(--u)); }
  .v3 .socials__inner { position: absolute; left: calc(28 * var(--u));
    top: calc(124 * var(--u)); width: calc(344 * var(--u)); margin: 0; }
  .v3 .socials__title { font-size: calc(44 * var(--u)); }
  .v3 .deck { display: grid; grid-template-columns: repeat(2, calc(160 * var(--u)));
    grid-template-rows: repeat(3, calc(206 * var(--u)));
    gap: calc(23 * var(--u)); width: auto; height: auto; overflow: visible;
    position: absolute; left: 0; top: calc(96 * var(--u)); margin: 0; padding: 0; }
  .v3 .card { position: static; width: calc(160 * var(--u));
    height: calc(206 * var(--u)); flex: none; aspect-ratio: auto; margin: 0;
    overflow: hidden; transform: none !important; border-radius: calc(14 * var(--u)); }
  .v3 .card img { width: 100%; height: 100%; object-fit: cover; }
  .v3 .card:nth-child(7) { display: none; }
  /* frame's third row: S-curve runner left, party right */
  .v3 .card[data-i="5"] { order: 1; }
  .v3 .card[data-i="4"] { order: 2; }
  .v3 .socials__links { position: absolute; left: 0; top: calc(809 * var(--u));
    margin: 0; font-size: calc(24 * var(--u)); justify-content: space-between;
    width: calc(340 * var(--u)); text-transform: uppercase; }

  /* footer: stacked, wave overlapping the socials by 42 as in the frame */
  /* mobile wave artwork (frame 2300:72645) replaces the desktop path */
  /* wave anchored BOTTOM: fractional-vw rounding on real devices left a
     white hairline at the page's bottom edge when anchored top */
  .foot3 { height: calc(981 * var(--u)); margin-top: calc(-42 * var(--u));
    background: url("assets/art/footer-wave-mobile.svg") no-repeat
    calc(-201 * var(--u)) bottom / calc(2223 * var(--u)) calc(982 * var(--u)); }
  .foot3__wave { display: none; }
  .foot3__brand { left: calc(59 * var(--u)); top: calc(188 * var(--u)); }
  .foot3__brand img { width: calc(150 * var(--u)); }
  .foot3__tag { font-size: calc(34 * var(--u)); }
  .foot3__nav { left: calc(59 * var(--u)); right: auto; top: calc(478 * var(--u));
    gap: calc(8 * var(--u)); }
  .foot3__nav a { font-size: calc(20 * var(--u)); }
  .foot3__social { left: calc(59 * var(--u)); right: auto; top: calc(689 * var(--u));
    bottom: auto; width: calc(277 * var(--u)); height: calc(45 * var(--u)); }
  .foot3__fine { left: calc(59 * var(--u)); right: auto; top: calc(815 * var(--u));
    bottom: auto; width: calc(300 * var(--u)); text-align: left;
    font-size: calc(16 * var(--u)); line-height: 1.5; }
  .foot3__tag { width: calc(274 * var(--u)); }
  .pagemenu__list { left: calc(38 * var(--u)); }
  .pagemenu__list a { font-size: calc(44 * var(--u)); }
}

/* whole range tile is the link (Lee, 10 Sep) — invisible stretched anchor
   over the slides (z3), under the pill (z4); stripes above are
   pointer-events:none so clicks pass through */
.trio__tile .trio__link { position: absolute; inset: 0; z-index: 3; }  /* out-ranks the has-wash child rule (relative/z1), which collapsed it */

/* ── footer newsletter (Klaviyo) — sits under the tagline in the brand column;
   rendered only when the Klaviyo key + list are set in src/config/site.ts */
.foot3__signup { margin-top: calc(26 * var(--u)); width: calc(330 * var(--u)); }
.foot3__signup label { display: block; font-weight: 700; font-size: calc(16 * var(--u));
  color: #f8d45b; margin-bottom: calc(10 * var(--u)); }
.foot3__signup-row { display: flex; gap: calc(8 * var(--u)); }
.foot3__signup input { flex: 1 1 0; min-width: 0; height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u)); border: 0; border-radius: calc(22 * var(--u));
  background: rgba(255,255,255,.14); color: #fff; font: inherit; font-size: calc(15 * var(--u)); }
.foot3__signup input::placeholder { color: rgba(255,255,255,.6); }
.foot3__signup input:focus { outline: 2px solid #f8d45b; outline-offset: 1px; }
.foot3__signup button { height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); border: 0;
  border-radius: calc(22 * var(--u)); background: #20b4c2; color: #fff; font: inherit;
  font-weight: 700; font-size: calc(15 * var(--u)); cursor: pointer; }
.foot3__signup button:hover { background: #fff; color: #20b4c2; }
.foot3__signup button[disabled] { opacity: .6; cursor: default; }
.foot3__signup-msg { margin: calc(8 * var(--u)) 0 0; font-size: calc(14 * var(--u)); min-height: 1.2em;
  color: #f8d45b; }
@media (max-width: 640px) {
  .foot3__signup { width: calc(300 * var(--u)); margin-top: calc(16 * var(--u)); }
  /* with the newsletter form present, the stacked mobile footer makes room
     under the tagline (measured 10 Sep: 33/22/80/41u gaps) */
  .foot3--signup .foot3__nav { top: calc(534 * var(--u)); }
  .foot3--signup .foot3__social { top: calc(765 * var(--u)); }
  .foot3--signup .foot3__fine { top: calc(891 * var(--u)); }
  .foot3__signup input, .foot3__signup button { height: calc(46 * var(--u)); font-size: calc(16 * var(--u)); }
}