/* ===========================================================================
   why-huddle-works.css
   The page is one tall vertical journey:

     ┌──────────────┐  ← scroll y = 0
     │   ACT 1      │   Sky · open, headline floats. Ridge hinted at bottom.
     │   landing    │
     ├──────────────┤
     │   ACT 2      │   Climb · onboarding-style ball story plays here,
     │   climb      │   anchored to the mountain face.
     ├──────────────┤
     │   ACT 3      │   Hinge · ridgeline crossover. Day → dusk → night.
     │   hinge      │
     ├──────────────┤
     │   ACT 4      │   Bedrock · dark slab. Science, stat, CTA.
     │   bedrock    │
     └──────────────┘

   Layout:
   - .scene is a tall (≈360svh) container.
   - .scene-stage inside is `position: sticky; top: 0; height: 100svh` so
     the canvas stays pinned to the viewport while the user scrolls past
     the rest of .scene.
   - .slot blocks are absolutely positioned inside .scene at fixed
     `top` offsets (in svh) so each copy block lives over its scene act.
   - All slot vertical positions are kept in svh / dvh so iOS toolbar
     resize doesn't shove copy onto the mountain face.

   Tuning knobs:
   - Total scene height:  --scene-h
   - Hinge position:      --hinge-pct
   ========================================================================= */

:root {
  /* Brand palette (from BRAND.md) */
  --brand-primary:      #6F75FF;
  --brand-primary-dark: #292D91;
  --brand-primary-deep: #0A0F81;
  --brand-primary-light:#CFD1FF;

  /* Day-side sky (matches climb_card.dart blueTone for fidelity) */
  --sky-top-day:    #DCE9FF;
  --sky-mid-day:    #C9DAFA;
  --sky-bot-day:    #B4D2FF;

  /* Night-side bedrock (deep navy + purple family — per user) */
  --bedrock-top:    #0F1340;
  --bedrock-mid:    #090C2A;
  --bedrock-bot:    #050816;

  /* Text */
  --ink-day:        #1C1C1C;
  --ink-day-soft:   #5D5D6E;
  --ink-night:      #FFFFFF;
  --ink-night-soft: rgba(255,255,255,0.72);
  --ink-night-quiet:rgba(255,255,255,0.45);

  /* Scene geometry — held composition with enough scroll room for the
     bedrock copy to settle CLEARLY in the dark area below the mountain.
     The ridge crosses the viewport in the first ~55% of scroll, then
     locks at the payoff frame while bedrock content (headline, stats,
     CTA) scrolls past inside the dark half. */
  --scene-h:    290svh;

  /* Type scale (mobile-first) */
  --t-h1: clamp(34px, 8.5vw, 56px);
  --t-h2: clamp(26px, 6.5vw, 42px);
  --t-body: clamp(15px, 4vw, 18px);
  --t-eyebrow: clamp(11px, 2.8vw, 13px);
  --t-stat: clamp(56px, 16vw, 96px);

  /* Layout */
  --col-max: 560px;
  --pad-x: clamp(20px, 5vw, 40px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--sky-top-day);
  color: var(--ink-day);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Prevent horizontal jitter; keep vertical scrolling natural. */
  overflow-x: clip;
}

/* ───────────────────────── Floating nav ───────────────────────────────── */
/* Hidden on the landing band so the open-sky feel isn't broken. Fades in
   once the user crosses the hinge — toggled via data-visible by JS. */
.why-nav {
  position: fixed;
  top: 12px; left: 12px; right: 12px;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(10, 12, 42, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.why-nav[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.why-nav-logo { display: inline-flex; height: 28px; }
.why-nav-logo svg { height: 100%; width: auto; display: block; }
.why-nav-word { fill: #ECEAFD; }
.why-nav-mark { fill: var(--brand-primary); }

/* Center nav links — mirrors the home page nav pattern. */
.why-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: 14px;
  margin: 0;
  padding: 0;
}
.why-nav-links li { list-style: none; }
.why-nav-links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 500;
}
.why-nav-links a:hover { color: rgba(255, 255, 255, 0.95); }
/* Active page indicator — bright white + bold with a Huddle-blue
   underline below the text. The dark purple alone got lost against the
   dark frosted-glass nav background; this combo reads clearly while
   keeping the brand color as the actual "current page" marker. */
.why-nav-links a.is-current {
  color: #fff;
  font-weight: 600;
  position: relative;
}
.why-nav-links a.is-current::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
}
/* Hide nav links on narrow viewports to keep the nav clean on mobile.
   Logo + CTA still visible. */
@media (max-width: 700px) {
  .why-nav-links { display: none; }
}

.why-nav-cta {
  font-size: 13px; font-weight: 700; color: #fff;
  text-decoration: none;
  padding: 9px 16px;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  transition: background .2s ease;
}
.why-nav-cta:hover { background: rgba(255,255,255,0.12); }

/* ───────────────────────── Scene container ────────────────────────────── */
.scene {
  position: relative;
  height: var(--scene-h);
  width: 100%;
}

/* Sticky stage holds the canvas, pinned to the viewport for the scene's
   entire height. */
.scene-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.scene-hud {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 5;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 8px 10px;
  border-radius: 8px;
  white-space: pre;
  pointer-events: none;
}

/* ───────────────────────── Scroll-down hint ──────────────────────────
   Subtle bouncing chevron at the bottom of the viewport on the landing
   view. Fades out as soon as the user starts scrolling. */
.scroll-hint {
  position: fixed;
  bottom: 6svh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--ink-day-soft);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.scroll-hint.is-hidden { opacity: 0; }
.scroll-hint-inner {
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}
.scroll-hint svg {
  width: 32px;
  height: 32px;
  display: block;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-inner { animation: none; }
}

/* ───────────────────────── Copy overlays ──────────────────────────────
   Two STATIC text overlays pinned to viewport positions via position:
   fixed. They fade in/out at the right scroll moments so the copy is
   always exactly where we want it — top overlay in the sky, bottom
   overlay in the bedrock dark area. Visibility is toggled by JS based
   on scroll progress (see why-scene.js → updateCopyOverlays). */
.copy-overlay {
  position: fixed;
  left: 0; right: 0;
  z-index: 4;
  padding: 0 var(--pad-x);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.copy-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* TOP overlay · surface copy floating in the sky band.
   Positioned to feel vertically balanced in the upper viewport at the
   100% desktop zoom landing view. */
.copy-overlay--top {
  top: 26svh;
  text-align: center;
}
.overlay-h1 {
  font-size: clamp(40px, 11vw, 80px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
  /* Near-black for the top line — matches the home page's
     `--text1: #0a0a18` token used on `.stitle` headers. */
  color: #0a0a18;
  max-width: 720px;
  margin: 0 auto;
}
/* Second line of the landing headline — bright Huddle blue accent. */
.overlay-h1-accent {
  color: var(--brand-primary);
}
.overlay-lede {
  font-size: clamp(16px, 4.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-day-soft);
  max-width: var(--col-max);
  margin: 20px auto 0;
}
/* Inline accent phrase inside the landing lede — BRIGHTER Huddle blue
   so the closing tagline pops as the visual emphasis. */
.overlay-lede-accent {
  color: var(--brand-primary);
  font-weight: 600;
}

/* BOTTOM overlay · underneath copy in the bedrock dark band.
   Anchored to bottom of viewport so the whole block sits firmly in the
   dark area below the locked ridge — never overlapping the mountain.
   Generous gap + bottom padding so the block has breathing room inside
   the now-expanded bedrock area (ridge locks higher at ~35svh). */
.copy-overlay--bottom {
  bottom: 16svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.overlay-h2 {
  font-size: clamp(22px, 5.8vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-night);
  max-width: var(--col-max);
}
.overlay-lede--dark {
  color: var(--ink-night-soft);
  margin-top: 0;
}

/* Stats row — side-by-side at all sizes so the bottom block stays
   compact enough to fit in the bedrock band. */
.stats-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 8vw, 72px);
  margin-top: 6px;
  position: relative;
}
.stats-row .stat {
  text-align: center;
  max-width: 260px;
}
/* "Only" prefix above the lower stat — italic, muted so it qualifies the
   number without competing with it. The slight vertical stagger it
   creates between the two stats is intentional: visually reinforces
   that 76% > 43%. */
.stats-row .stat-prefix {
  font-size: clamp(13px, 3.2vw, 15px);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-night-quiet);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.stats-row .stat-num {
  font-size: clamp(44px, 13vw, 84px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #A09AF5, #6F75FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats-row .stat-num--quiet {
  background: none;
  color: var(--ink-night-quiet);
  -webkit-text-fill-color: var(--ink-night-quiet);
}
.stats-row .stat-label {
  margin-top: 6px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: var(--ink-night-soft);
}
.stats-row .stat--quiet .stat-label { color: var(--ink-night-quiet); }
.stats-row .stat + .stat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 40%;
  width: 1px;
  background: rgba(255,255,255,0.18);
  transform: translateX(-50%);
}

/* Credentials variant — three small-credential stats (e.g. participants,
   studies, year) instead of the two dramatic percentages. The numbers
   stay the visual anchor of the section but step down a tier so three
   fit a single row at every breakpoint; the midline divider that the
   two-stat layout uses is suppressed (it was positioned absolutely at
   left:50% of the row, which only made sense between exactly two
   stats). Tighter per-stat max-width keeps the row from sprawling on
   wide viewports. */
.stats-row--credentials .stat-num {
  font-size: clamp(28px, 9vw, 60px);
}
.stats-row--credentials .stat {
  max-width: 200px;
}
.stats-row--credentials .stat + .stat::before {
  display: none;
}

/* Citation line — plain text by default, with an inline <a> for the
   journal name (linked to the DOI). The base <p> is no longer
   underlined as a whole; the underline + hover lift now live on the
   nested anchor only, so the authors / separator render as plain muted
   text and only the journal name reads as a clickable citation. */
.stats-source {
  font-size: clamp(10px, 2.4vw, 12px);
  color: var(--ink-night-quiet);
  letter-spacing: 0.04em;
}
.stats-source a,
.stats-source a:visited {
  /* Explicit color (not `inherit`) because browsers special-case
     :visited and won't honor inherited color for privacy reasons,
     which is what was bleeding the default purple/indigo into the
     journal name. Both unvisited and visited links sit at the same
     muted quiet that the surrounding "Peetz, Buehler & Wells ·" text
     uses, so the line reads as one uniform subtle-grey string at
     rest. */
  color: var(--ink-night-quiet);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.stats-source a:hover {
  /* Only on hover does the link become discoverable: a touch brighter
     and a subtle underline appears. */
  color: var(--ink-night-soft);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.cta-lede {
  font-size: clamp(13px, 3.4vw, 15px);
  color: var(--ink-night-soft);
  margin-top: 4px;
}

.cta-btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 3.5px solid var(--brand-primary-light);
  border-radius: 14px;
  transition: opacity .2s ease, transform .2s ease;
}
.cta-btn:hover { opacity: 0.92; }
.cta-btn:active { transform: translateY(1px); }

/* Desktop adjustments — shorter scene, larger viewport. Top headline
   sits a bit higher in svh terms because desktop viewports are wider
   than tall (the same svh translates to fewer absolute px above the
   block). Bottom overlay gets more bottom padding + a larger gap. */
@media (min-width: 900px) {
  :root { --scene-h: 200svh; }
  .copy-overlay--top { top: 22svh; }
  .copy-overlay--bottom { bottom: 20svh; gap: 24px; }
}

/* ───────────────────────── Footer ─────────────────────────────────────── */
.why-footer {
  background: var(--bedrock-bot);
  color: var(--ink-night-quiet);
  padding: 32px var(--pad-x) 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  font-size: 12px;
}
.why-footer-home {
  color: var(--ink-night-soft);
  text-decoration: none;
  font-weight: 600;
}
.why-footer-home:hover { color: var(--ink-night); }
.why-footer-copy { font-size: 11px; }
.why-footer-links {
  list-style: none;
  display: flex;
  gap: 18px;
}
.why-footer-links a {
  color: var(--ink-night-quiet);
  text-decoration: none;
}
.why-footer-links a:hover { color: var(--ink-night-soft); }

@media (min-width: 720px) {
  .why-footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ───────────────────────── Reduce motion ──────────────────────────────── */
/* JS also honors this — see why-scene.js. */
@media (prefers-reduced-motion: reduce) {
  /* Future hook — currently nothing CSS-side needs to change because all
     motion lives on the canvas, where the painter respects the same flag. */
}