/* ===========================================================
   Miracle Collective — home story (scroll-driven product landing)
   Loaded by index.html only. The bottle film (frames/) plays on a
   sticky canvas while content beats scroll past in the side zones.

   Progressive enhancement: everything below is authored twice —
   a STATIC layout (default: no JS, GSAP failed, or reduced motion)
   where beats stack as a normal page over a poster image, and the
   LIVE experience under `html.story-live`, added by landing.js only
   once GSAP + canvas are confirmed. Content is never hostage to JS.
   =========================================================== */

:root{
  /* Sampled from the film's studio backdrop (frame corners average
     #C1D1DC→#D3D8E9) — the container wears the film's own tone so the
     canvas never reads as a rectangle sitting on a page. It is also a
     close cousin of the water hero's --backdrop, so the two studios
     hand off as one continuous set. */
  --ice:#CBD6E0;
  --ice-deep:#BFCCDA;
  --on-dark:#FBF7F3;
  --story-h:800vh;

  /* Instagram "Deco" equivalent — Fredoka carries the same rounded,
     geometric letterforms; applied to every story beat below. */
  --deco:'Fredoka','General Sans',-apple-system,sans-serif;
}

/* Lenis (per its docs): hand scroll control to the rAF loop */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Story container ---------- */
.story{position:relative;background:var(--ice)}
.story-live .story{height:var(--story-h)}

/* ---------- Sticky stage: canvas + wash + marquees ---------- */
.story-stage{position:relative}
.story-live .story-stage{
  position:sticky;top:0;z-index:1;
  height:100vh;height:100svh;
  overflow:hidden;
}
#storyCanvas{display:none}
.story-live #storyCanvas{display:block;position:absolute;inset:0;width:100%;height:100%}

/* Static fallback shows the film's final frame as a plain figure */
.story-poster{width:min(760px,86%);margin:0 auto;padding:clamp(40px,6vw,72px) 0 0}
.story-poster img{width:100%;border-radius:24px}
.story-live .story-poster{display:none}

/* ---------- Oversized sliding marquees ---------- */
.story-marquee{
  display:none;position:absolute;left:0;width:100%;
  white-space:nowrap;pointer-events:none;z-index:3;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  opacity:0;will-change:transform,opacity;
  /* Fredoka's kern pairs are tuned for mixed-case setting and steal ~0.15em off the
     capital I, collapsing IV pairs — it crushed the "IV" in ACTIVEWEAR (I measured
     13.2px instead of 24.1px at 72px). Scales with type size, so it is far more
     visible here than in the nav. Same opt-out as .wordmark / .footer .mark. */
  font-kerning:none;
}
.story-live .story-marquee{display:block}
.story-marquee span{display:inline-block;padding:0 0.35em}
.story-marquee .spark{color:var(--pink);font-size:0.32em;vertical-align:0.5em}
/* Both marquees share the bottom band, clear of the beats and the
   bottle; their scroll windows never overlap in time. */
.marquee-a{
  bottom:4%;font-size:11vw;letter-spacing:0.02em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(194,73,127,0.34);
  /* Not Fredoka: its R is drawn as a bowl plus a SEPARATE overlapping leg shape. A
     fill hides that seam, but transparent-fill + text-stroke outlines every contour,
     so the leg's full quadrilateral showed straight through the bowl. Nothing about
     kerning or tracking affects it — the R does it standing alone — and paint-order
     isn't honoured for HTML text, so the only fixes are dropping the outline or
     changing the face. General Sans strokes cleanly and already carries the hero
     wordmark, so the outline treatment survives intact.
     Keep this in sync if the outline look is ever swapped for a fill. */
  font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.marquee-b{
  bottom:5%;font-size:7.5vw;letter-spacing:0.10em;line-height:1;
  color:rgba(194,73,127,0.24);
}

/* ---------- Hero handoff wash ----------
   A studio-blue gradient over the film's opening frames, dissolved by
   scroll (landing.js) — the water hero pours into the bottle film
   instead of cutting to it. */
.story-wash{display:none}
.story-live .story-wash{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,var(--backdrop-lit) 0%,rgba(206,221,234,0) 44%);
}

/* ---------- Loading chip (only if the visitor outruns the preload) ---------- */
.story-loading{
  display:none;position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:4;
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);background:rgba(255,255,255,0.72);border:1px solid var(--hairline-soft);
  border-radius:999px;padding:7px 14px;backdrop-filter:blur(6px);
}
.story-live .story-loading.on{display:block}

/* ---------- Content beats ---------- */
/* Static default: beats stack like ordinary sections */
.story-sections{position:relative;z-index:2}

/* Nav-"About" waypoint: in the static stack it sits right above the 001
   beat; in live mode it moves to ~9% of the story's scroll depth, so the
   jump lands with the About statement already on screen (beat window
   4–16%, centred at 10%). scroll-margin keeps it clear of the fixed nav. */
.story-anchor{scroll-margin-top:92px}
.story-live .story-anchor{
  position:absolute;
  top:calc((var(--story-h) - 100vh) * 0.13);
}
.story-section{padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px);max-width:820px;margin:0 auto}
.story-section+.story-section{border-top:1px solid var(--hairline-soft)}

/* Live: beats float in the outer 40% zones while the bottle owns the center */
.story-live .story-sections{position:absolute;inset:0;z-index:2;pointer-events:none}
.story-live .story-section{
  position:absolute;left:0;width:100%;max-width:none;margin:0;
  transform:translateY(-50%);padding:0;border:0;
}
.story-live .story-inner{pointer-events:auto}
/* One fixed composition: text owns the left zone, the film sits
   right-of-centre (FILM_SHIFT in landing.js) */
.story-live .align-left{padding-left:6vw;padding-right:54vw}
.story-live .align-left .story-inner{max-width:40vw}

/* Every beat speaks Deco — labels, headings, body, lists, facts, buttons */
.story-sections{font-family:var(--deco)}
.story-sections .story-heading,
.story-sections .statement,
.story-sections .f-name{font-family:var(--deco);font-weight:600;letter-spacing:0}
.story-sections .story-heading{line-height:1.12}
.story-sections .statement{font-weight:500;line-height:1.36}
.story-sections .story-body,
.story-sections .f-line,
.story-sections .fine{font-weight:400}
.story-sections .btn,
.story-sections .tag,
.story-sections .story-label{font-weight:500}
.story-sections .event-facts dd{font-weight:500}

/* Beat typography — hierarchy from type, not boxes (no cards over the film) */
.story-label{
  font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 16px;
}
.story-label .spark{color:var(--pink)}
.story-heading{
  font-family:var(--display);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-0.01em;
  color:var(--ink);margin:0;text-wrap:balance;
}
.story-body{
  font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.62;color:var(--ink-soft);
  margin:18px 0 0;max-width:44ch;
}
.story-section .btn-row{margin-top:26px}
/* The About statement, retuned for the narrow side zone */
.story-section .statement{
  font-size:clamp(22px,2.2vw,34px);line-height:1.3;max-width:none;margin:0;
}

/* ---------- Formats beat — a vertical editorial list ---------- */
.story-formats{list-style:none;margin:26px 0 0;padding:0}
.story-formats li{border-top:1px solid var(--hairline);padding:16px 0}
.story-formats li:last-child{border-bottom:1px solid var(--hairline)}
.story-formats .f-name{
  font-family:var(--display);font-size:clamp(22px,2.1vw,30px);line-height:1.15;color:var(--ink);
}
.story-formats .f-name .spark{color:var(--pink);font-size:0.55em;vertical-align:0.35em}
.story-formats .f-line{font-size:14.5px;color:var(--ink-soft);margin:6px 0 0}
.story-vendor-line{font-size:14px;color:var(--ink-faint);margin:20px 0 0}

/* ---------- Launch CTA beat ---------- */
.story-cta .tag{margin-bottom:14px}
.story-cta .event-facts{margin-top:22px}
.story-cta .event-facts dd{font-size:16px}
.story-cta .fine{margin-top:18px}

/* ---------- Live beat children start hidden a frame early ----------
   GSAP's from() sets these itself; this rule only kills the flash on
   the very first paint before timelines build. */
.story-live .story-section [data-stagger]{opacity:0}

/* ---------- Mobile: full-bleed portrait film, caption-style beats ----------
   Below 768px the film is its own portrait crop (frames-m/, chosen in
   landing.js) drawn edge-to-edge, and beats sit DIRECTLY on it like reel
   captions — left-aligned bold type over a full-bleed bottom gradient
   (.story-scrim), never boxes, never blur, never inner scrolling. */
@media (max-width:768px){
  :root{--story-h:520vh}
  .story-live .align-left{padding:0 6vw}
  .story-live .align-left .story-inner{max-width:none;text-align:left}
  .story-live .story-inner .btn-row{margin-top:18px}
  .story-live .story-inner .btn-primary{
    width:100%;justify-content:center;padding:16px 26px; /* thumb target */
  }

  /* Caption legibility: a soft light halo instead of a card */
  .story-live .story-inner{
    text-shadow:0 1px 2px rgba(250,246,242,0.85),0 2px 18px rgba(250,246,242,0.6);
  }
  .story-live .story-inner .btn,
  .story-live .story-inner .tag{text-shadow:none}

  /* Type scales UP on mobile — one idea per screen, lockscreen-sized */
  .story-label{margin-bottom:12px;font-size:11.5px}
  .story-heading{font-size:clamp(28px,7.5vw,36px);line-height:1.1}
  .story-body{font-size:15.5px;line-height:1.55;margin-top:12px;max-width:34ch}
  .story-section .statement{font-size:clamp(20px,5.6vw,24px);line-height:1.38}
  .story-formats{margin-top:16px}
  .story-formats li{padding:11px 0}
  .story-formats .f-name{font-size:21px}
  .story-formats .f-line{font-size:13.5px;margin-top:4px}
  .story-vendor-line{font-size:13px;margin-top:14px}
  .story-cta .event-facts{margin-top:14px}
  .story-cta .event-facts>div{grid-template-columns:86px 1fr;gap:12px;padding:10px 0}
  .story-cta .event-facts dd{font-size:15px}
  .story-cta .fine{margin-top:12px;font-size:13px}

  /* Marquees become an ambient band at the top, out of the captions' way */
  .marquee-a{top:9%;bottom:auto;font-size:13vw;-webkit-text-stroke-color:rgba(194,73,127,0.26)}
  .marquee-b{top:9%;bottom:auto;font-size:9vw;color:rgba(194,73,127,0.20)}
}

/* The reel-caption scrim — a full-bleed gradient rising from the bottom
   of the stage so ink text always reads over the film. Mobile-only. */
.story-scrim{display:none}
@media (max-width:768px){
  .story-live .story-scrim{
    display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,
      rgba(203,214,224,0.92) 0%,
      rgba(203,214,224,0.55) 26%,
      rgba(203,214,224,0) 52%);
  }
}

/* Short landscape phones: legibility wins — smaller heading, stronger halo */
@media (max-width:900px) and (max-height:520px){
  .story-heading{font-size:22px}
  .story-body{font-size:14px;max-width:52ch}
}