/* welcome-visual-max.css — the dramatic pass for the SERVED public home (welcome.html).
   Additive-only enhancement layer in the #427/#449 visual language, aimed at welcome's
   REAL markup (the #427 overhaul targeted index.html's app classes and never rendered
   at / — the orphan this file corrects). Every layer is compositor-safe (transform/
   opacity/filter only), reduced-motion-gated, and carries data or hierarchy — no
   decoration without function. CSP-safe: pure CSS, no external assets. */

/* 1. hero: living gradient wash behind the headline (theme-var driven, zero on motion-reduce) */
.hero { position: relative; isolation: isolate; }
/* The decorative glow bleeds -8% past each side of the hero. At 768 that is 57.44px
   per side on a 718px hero, which put the document scrollWidth at 800 against a 768
   viewport — a horizontal scrollbar caused purely by decoration. There was already a
   max-width:640px patch zeroing the insets, i.e. this was hit once and fixed by
   breakpoint; 768 simply fell outside it. Containing the bleed on .hero fixes the
   CLASS at every width instead of chasing it one viewport at a time.
   overflow-x:clip, not hidden: clip contains the paint without creating a scroll
   container, so it cannot break position:sticky descendants. */
.hero { overflow-x: clip; }
.hero::before {
  content: ""; position: absolute; inset: -12% -8% auto -8%; height: 70%; z-index: -1;
  background: radial-gradient(55% 60% at 22% 18%, var(--glow, rgba(37,99,235,.14)), transparent 65%),
              radial-gradient(40% 50% at 80% 8%, rgba(45,212,191,.10), transparent 60%);
  filter: blur(2px);
 pointer-events: none;
}

/* 2. hero title: ALWAYS pure white (operator ruling 2026-07-22 — no gradient
   ink; the hero stage is dark in every theme, so #fff holds ~18:1 everywhere). */
.hero h1 {
  color: #fff;
  background: none;
  -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff;
}

/* 3. primary CTA: depth + focus pull (hover lift is transform-only) */
.hero .btn.primary, .btn.primary {
  box-shadow: 0 6px 24px -8px var(--action, #2563eb);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--action, #2563eb); }

/* 4. stats-band: glass treatment — the six proof numbers read as one instrument strip */
.stats-band {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface, #11131a) 82%, transparent), transparent);
  backdrop-filter: blur(6px); border-radius: 10px; padding-left: 8px; padding-right: 8px;
}
.stats-band strong { font-variant-numeric: tabular-nums; }

/* 5. intel-stack: the four intelligence modules get card depth + accent rail */
.intel-stack { position: relative; overflow: hidden; }
.intel-stack::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--action, #2563eb), var(--teal-ink, #2dd4bf));
 pointer-events: none;
}
.intel-list li { transition: transform .18s ease, border-color .18s ease; }
.intel-list li:hover { transform: translateY(-2px); border-color: var(--line-strong, rgba(255,255,255,.16)); }

/* 6. surfaces trio + why-cards + tool-cards: unified hover elevation (one product family) */
.surface, .why-card, .tool-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.surface:hover, .why-card:hover, .tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55);
}

/* 7. pricing cards: the paid tier gets a quiet always-on aura; all cards lift on hover */
.price-card { transition: transform .18s ease, box-shadow .18s ease; }
.price-card:hover { transform: translateY(-3px); }
.price-card[data-tier="pro"], .price-card.featured {
  box-shadow: 0 0 0 1px var(--action, #2563eb), 0 12px 40px -16px var(--action, #2563eb);
}

/* 8. section headers: kicker treatment — mono, tracked, accent tick */
.sec-head { letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.sec-head::before { content: "// "; color: var(--action-ink, #60a5fa); }

/* 9. scroll-reveal for below-fold sections (native CSS animation-timeline; no JS) */
@supports (animation-timeline: view()) {
  .why, .funnel, .atlas-browse, .tools-preview, .faq, .pricing {
    animation: wvm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%;
  }
  @keyframes wvm-rise { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* 10. motion honesty: every animated layer collapses to static under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before { filter: none; }
  .btn.primary, .intel-list li, .surface, .why-card, .tool-card, .price-card { transition: none !important; }
  .btn.primary:hover, .intel-list li:hover, .surface:hover, .why-card:hover, .tool-card:hover, .price-card:hover { transform: none; }
  .why, .funnel, .atlas-browse, .tools-preview, .faq, .pricing { animation: none !important; opacity: 1; transform: none; }
}

/* UX ratchet 2026-07-22: the -8% side bleed causes a 2px horizontal page scroll at
   phone widths (documentElement 392 > 390). Keep the desktop halo; clip sides on phones. */
@media (max-width:640px){ .hero::before{left:0; right:0;} }

/* --- Marketing motion pass (2026-07-22) ---------------------------------------
   All compositor-only (transform/opacity/filter), everything gated behind
   prefers-reduced-motion: no-preference. Decoration carries information: the
   pulses land on the SAMPLE readout values and the live plan card rows. */
@media (prefers-reduced-motion: no-preference){
  /* 10. hero readout: the sample values breathe in sequence — reads as a live
     instrument, not a static screenshot. Labels stay still; values pulse. */
  .hero .readout{ animation: wvm-float 7s ease-in-out infinite; }
  @keyframes wvm-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
  .hero .readout-rows li b{ animation: wvm-value-pulse 5.4s ease-in-out infinite; }
  .hero .readout-rows li:nth-child(1) b{ animation-delay: 0s; }
  .hero .readout-rows li:nth-child(2) b{ animation-delay: 1.8s; }
  .hero .readout-rows li:nth-child(3) b{ animation-delay: 3.6s; }
  @keyframes wvm-value-pulse{ 0%,86%,100%{ opacity:1; filter:brightness(1); } 92%{ opacity:.55; filter:brightness(1.35); } }
  /* 11. proof strip: staggered settle-in on load (one-time, ~1s total) */
  .hero .proof li{ opacity:0; transform: translateY(6px); animation: wvm-proof-in .5s ease-out forwards; }
  .hero .proof li:nth-child(1){ animation-delay:.15s; } .hero .proof li:nth-child(2){ animation-delay:.3s; }
  .hero .proof li:nth-child(3){ animation-delay:.45s; } .hero .proof li:nth-child(4){ animation-delay:.6s; }
  .hero .proof li:nth-child(5){ animation-delay:.75s; }
  @keyframes wvm-proof-in{ to{ opacity:1; transform: translateY(0); } }
  /* 12. plan-entry card: the action border breathes — the eye lands on the
     one thing a new visitor should do (build the plan). */
  .plan-entry{ animation: wvm-border-breathe 6s ease-in-out infinite; }
  @keyframes wvm-border-breathe{ 0%,100%{ box-shadow: 0 0 0 0 rgba(37,99,235,0); } 50%{ box-shadow: 0 0 24px -6px rgba(37,99,235,.45); } }
  /* 13. Today-in-the-gym rows settle in sequence — your session assembling */
  .gym-today .gt-list li{ opacity:0; transform: translateY(5px); animation: wvm-proof-in .45s ease-out forwards; }
  .gym-today .gt-list li:nth-child(1){ animation-delay:.1s; }
  .gym-today .gt-list li:nth-child(2){ animation-delay:.22s; }
  .gym-today .gt-list li:nth-child(3){ animation-delay:.34s; }
}

/* --- Wave 2b (2026-07-22): stat count-up on scroll-in (CSS-only, honest) ------
   The REAL numbers stay in the DOM for screen readers, search, and every
   browser without scroll-timelines; capable browsers overlay a counter that
   rolls 0 -> the same true value as the band scrolls in. Reduced-motion and
   unsupported engines simply see the static finals. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @property --sbn { syntax: "<integer>"; initial-value: 0; inherits: false; }
    .stats-band li[data-count]{ --sbt: 0; }
    .stats-band li[data-count="226"]{ --sbt: 226; } /* MUST equal welcome.html data-count (atlas_data corpus) — a stale 227 here counted 0->0 and rendered a permanent "0 exercises" (operator mobile screenshot 2026-07-24) */
    .stats-band li[data-count="6"]{ --sbt: 6; }
    .stats-band li[data-count="4"]{ --sbt: 4; }
    .stats-band li[data-count] strong{ color: transparent; }
    .stats-band li[data-count] strong::before{
      content: counter(sbc); counter-reset: sbc var(--sbn);
      position: absolute; left: 0; right: 0; top: 0; color: var(--text); pointer-events: none;
      animation: sb-count linear both; animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .stats-band li[data-count-suffix="+"] strong::before{ content: counter(sbc) "+"; }
    @keyframes sb-count{ from{ --sbn: 0; } to{ --sbn: var(--sbt); } }
  }
}


/* --- Gym Mode spotlight (2026-07-23): glass card bridging how-it-works -> the
   Today-in-the-gym card. Theme-token driven so all four themes render clean;
   the solid var(--surface) gradient carries the card wherever backdrop-filter
   is unsupported (blur is progressive polish, never load-bearing). Motion
   (hover spring) sits behind prefers-reduced-motion:no-preference AND the
   home.css global reduce wildcard kills it — double-guarded. */
.gym-spotlight{
  margin:0 0 var(--s-6);
  padding:var(--s-4);
  border:1px solid var(--line-strong);
  border-radius:calc(var(--r) + 6px);
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(37,99,235,0.06);
}
.gym-spotlight .gs-kicker{
  font-family:var(--mono); font-size:var(--t-cap); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--teal-ink); margin:0 0 var(--s-1);
  display:flex; align-items:center; gap:var(--s-1);
}
.gym-spotlight .gs-kicker .dot{width:7px; height:7px; border-radius:50%; background:var(--teal-ink); display:inline-block;}
.gym-spotlight .gs-title{
  font-family:var(--serif); font-weight:800; letter-spacing:-0.025em;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; margin:0 0 var(--s-2); color:var(--text);
}
.gym-spotlight .gs-lede{max-width:68ch; font-family:var(--sans); font-size:var(--t-base); line-height:1.65; color:var(--muted); margin:0 0 var(--s-3);}
.gym-spotlight .gs-lede strong{color:var(--text);}
.gym-spotlight .gs-points{list-style:none; margin:0 0 var(--s-3); padding:0; display:flex; flex-direction:column; gap:var(--s-1);}
.gym-spotlight .gs-points li{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:var(--t-sm); line-height:1.5;}
.gym-spotlight .gs-points strong{color:var(--text); font-family:var(--mono); font-size:var(--t-sm);}
.gym-spotlight .gs-points span{color:var(--muted);}
.gym-spotlight .gs-actions{display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; margin:0 0 var(--s-1);}
.gym-spotlight .gs-note{font-family:var(--mono); font-size:var(--t-cap); color:var(--muted); margin:0; letter-spacing:0.04em;}
@media (prefers-reduced-motion:no-preference){
  .gym-spotlight{transition:transform var(--dur), border-color var(--dur);}
  .gym-spotlight:hover{transform:translateY(-2px); border-color:var(--action-ink);}
}
/* SHORT-VIEWPORT HERO RHYTHM (cycle 37). On a 375x667 phone the primary CTA sat at
   y=762 in a 667 viewport — fully below the fold, so the first screen offered the
   stranger nothing to do. Measured stack: 225px of chrome before the hero even
   starts (34% of the screen), then eyebrow + h1 + sub + free-banner totalling ~475px
   of content on top of ~96px of margins.
   This block tightens the hero's own vertical rhythm ONLY on short screens. It does
   not hide content, does not shorten copy, and does not touch tall viewports — where
   the generous rhythm is doing its job. */
@media (max-height: 700px) {
  .shell { padding-top: 16px; }
  .hero { padding-top: 12px; padding-bottom: 16px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: clamp(2.25rem, min(10vw, 8.5vh), 6.5rem); margin-bottom: 12px; }
  .hero .hero-sub { margin-bottom: 12px; line-height: 1.35; }
  .hero .free-banner { margin-bottom: 14px; }
}