/* ================================================================
   forgd.fit — cinematic layer (2026-07-12)
   Additive on top of styles.css + the inline component styles.
   Turns the marketing page into a cinematic, motion-led experience
   without touching styles.css (so /privacy, /terms, /for-trainers,
   /blog stay exactly as they are). Reuses the existing design tokens.
   All real copy / prices / links / screenshots are untouched; this
   file only changes presentation: video chapters, scrims, motion.
   ================================================================ */

:root {
  /* Purple depth — used ONLY inside blue→purple gradients so the brand
     reads "purple/blue" (Bryce's identity) while blue stays the one
     solid accent. Never a flat competing color. */
  --brand-purple: #6D3BFF;
  --grad-brand: linear-gradient(118deg, #006AFF 0%, #4D6BFF 46%, #6D3BFF 100%);
  --grad-brand-rev: linear-gradient(118deg, #6D3BFF 0%, #006AFF 100%);
  --cine-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cine-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Scroll progress bar (top hairline) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-brand);
  will-change: transform;
}

/* ---------- Glass nav refinement ---------- */
/* styles.css already positions .nav-shell + its scrolled state; we only
   deepen the glass + smooth the transition so it feels premium over video. */
.nav-shell {
  transition: background .5s var(--cine-ease), backdrop-filter .5s var(--cine-ease),
              border-color .5s var(--cine-ease), box-shadow .5s var(--cine-ease) !important;
}
.nav-shell--scrolled {
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  background: rgba(8, 9, 12, 0.72) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.6);
}

/* ---------- Primary CTA: gradient + glow + lift ---------- */
.btn-pill--primary-dark,
.btn-pill--primary-light {
  background-image: var(--grad-brand) !important;
  background-size: 140% 140%;
  background-position: 0% 50%;
  color: #fff !important;
  box-shadow: 0 10px 30px -10px rgba(0, 106, 255, 0.6),
              0 2px 6px -2px rgba(109, 59, 255, 0.5);
  transition: transform .35s var(--cine-ease), box-shadow .35s var(--cine-ease),
              background-position .6s var(--cine-ease);
}
.btn-pill--primary-dark:hover,
.btn-pill--primary-light:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 18px 44px -12px rgba(0, 106, 255, 0.7),
              0 4px 12px -2px rgba(109, 59, 255, 0.55);
}
.btn-pill--primary-dark:active,
.btn-pill--primary-light:active { transform: translateY(0); }

/* ================================================================
   Cinematic chapters — full-bleed video sections
   ================================================================ */
.cine { position: relative; overflow: hidden; isolation: isolate; }
.cine > .container { position: relative; z-index: 3; }

/* poster is set as an inline background-image on .cine-bg so a rich frame
   is on screen instantly (great LCP); the <video> fades in over it once
   loaded + in view (motion.js). */
.cine-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  background-color: var(--bg-deep);
  transform: scale(1.06);           /* subtle Ken-Burns headroom */
}
.cine-bg::after {                    /* film grain-free vignette for depth */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(0,0,0,0.55) 100%);
}
.cine-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.4s var(--cine-ease);
}
.cine-bg video.is-playing { opacity: 1; }

/* legibility + brand scrim: dark base for text contrast, plus a low blue→
   purple wash so the footage reads on-brand rather than neutral stock. */
.cine-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,9,12,0.62) 0%, rgba(8,9,12,0.30) 40%, rgba(8,9,12,0.72) 100%),
    linear-gradient(118deg, rgba(0,60,255,0.30) 0%, rgba(109,59,255,0.24) 100%);
}
.cine-scrim--heavy {
  background:
    linear-gradient(180deg, rgba(8,9,12,0.78) 0%, rgba(8,9,12,0.55) 45%, rgba(8,9,12,0.85) 100%),
    linear-gradient(118deg, rgba(0,60,255,0.28) 0%, rgba(109,59,255,0.22) 100%);
}
/* content over video is always light */
.cine, .cine .h-section, .cine .lede, .cine .step__t, .cine .split__body p { color: var(--ink-inv); }

/* ================================================================
   Hero — the thesis
   ================================================================ */
.hero.cine {
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 118px; padding-bottom: 64px;
}
.hero.cine .hero__inner { align-items: center; }
.hero.cine .eyebrow { color: #cfe0ff; }
.hero.cine .h-display {
  color: #fff;
  font-size: clamp(2.7rem, 6.2vw, 5rem);
  line-height: 1.02; letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero.cine .lede { color: rgba(244,242,238,0.86); max-width: 46ch; }
.hero.cine .hero__trust span { color: rgba(244,242,238,0.72); }
.hero.cine .text-link { color: #fff; }

/* phone floats in a glass frame with a soft brand halo */
.hero.cine .hero__visual { position: relative; }
.hero.cine .phone--photo {
  position: relative; border-radius: 42px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7),
              0 0 0 1px rgba(255,255,255,0.06);
}
.hero.cine .hero__visual::before {   /* brand halo behind the phone */
  content: ""; position: absolute; inset: -8% -12%;
  background: radial-gradient(60% 55% at 60% 45%, rgba(77,107,255,0.55), transparent 70%);
  filter: blur(50px); z-index: -1;
}

/* scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}
.scroll-cue__mouse {
  width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.5);
  border-radius: 14px; position: relative;
}
.scroll-cue__mouse::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px;
  border-radius: 2px; background: #fff; transform: translateX(-50%);
  animation: cueScroll 1.8s var(--cine-ease) infinite;
}
@keyframes cueScroll {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, 12px); }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* larger, more cinematic section headings inside video chapters */
.cine .h-section { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.03em; }

/* ================================================================
   Scroll-reveal motion
   Gated on html.has-js so that with JS disabled everything is visible
   (progressive enhancement). Specificity of the .in rules is raised to
   win over the hidden base rule.
   ================================================================ */
html.has-js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--cine-ease-out), transform .85s var(--cine-ease-out);
  will-change: opacity, transform;
}
html.has-js [data-reveal].in { opacity: 1; transform: none; }

/* staggered children groups */
html.has-js .rvg > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--cine-ease-out), transform .7s var(--cine-ease-out);
}
html.has-js .rvg.in > * { opacity: 1; transform: none; }
html.has-js .rvg.in > *:nth-child(1) { transition-delay: .04s; }
html.has-js .rvg.in > *:nth-child(2) { transition-delay: .10s; }
html.has-js .rvg.in > *:nth-child(3) { transition-delay: .16s; }
html.has-js .rvg.in > *:nth-child(4) { transition-delay: .22s; }
html.has-js .rvg.in > *:nth-child(5) { transition-delay: .28s; }
html.has-js .rvg.in > *:nth-child(6) { transition-delay: .34s; }
html.has-js .rvg.in > *:nth-child(7) { transition-delay: .40s; }
html.has-js .rvg.in > *:nth-child(8) { transition-delay: .46s; }

/* card hover lift for the interactive-feeling blocks */
.eco-card, .choice, .frag__app, .pf {
  transition: transform .4s var(--cine-ease), box-shadow .4s var(--cine-ease), border-color .4s var(--cine-ease);
}
.eco-card:hover, .frag__app:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(8,9,12,0.28);
}

/* ---------- Section chapter eyebrows: gradient text accent ---------- */
.cine .eyebrow--accent {
  background: linear-gradient(90deg, #6ea8ff, #b79bff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Pricing card lift on its dark section ---------- */
.pricing-card {
  transition: transform .5s var(--cine-ease), box-shadow .5s var(--cine-ease);
}
.pricing-card:hover { transform: translateY(-4px); }

/* ================================================================
   Final CTA over video
   ================================================================ */
.final-cta.cine { padding: clamp(96px, 16vh, 168px) 0; text-align: center; }
.final-cta.cine .h-section { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); }
.final-cta.cine .lede { color: rgba(244,242,238,0.85); }
.final-cta.cine .final-cta__brand { color: rgba(255,255,255,0.55); }

/* ================================================================
   Responsive
   ================================================================ */
/* Mobile density: the sections were far too tall for their content, leaving
   dead black gaps. Tighten vertical rhythm hard on phones. */
@media (max-width: 640px) {
  .section { padding-top: 52px; padding-bottom: 52px; }
  .section-head { margin-bottom: 0; }
  .steps { margin-top: 28px; gap: 22px; }
  .split { gap: 24px; }
  .split__list { margin-top: 18px; }
  .split__body .lede { text-align: left; }
  .h-section { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .lede { font-size: 16px; }
  .cine .h-section { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  .final-cta.cine { padding-top: 60px; padding-bottom: 60px; }
  .goalcard { margin-top: 22px; }
}
@media (max-width: 900px) {
  .hero.cine { min-height: 92svh; padding-top: 100px; text-align: left; }
  .hero.cine .hero__visual::before { inset: 0 0; filter: blur(38px); }
  .cine-scrim { background:
    linear-gradient(180deg, rgba(8,9,12,0.70) 0%, rgba(8,9,12,0.45) 45%, rgba(8,9,12,0.82) 100%),
    linear-gradient(118deg, rgba(0,60,255,0.30), rgba(109,59,255,0.24)); }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .hero.cine .h-display { font-size: clamp(2.4rem, 9vw, 3.2rem); }
}

/* ================================================================
   Reduced motion + data saver — accessibility first
   Videos never load (motion.js checks this too); reveals are instant;
   Ken-Burns scale + scroll cue disabled. Poster frames remain.
   ================================================================ */
/* ================================================================
   Download-free cinematic motion (2026-07-13)
   The page must feel ALIVE even when the video can't stream (planes,
   transit, weak wifi). Everything below is pure CSS, no network, and is
   fully disabled under prefers-reduced-motion.
   ================================================================ */

/* Ken Burns on every cinematic background (poster + video layer): a slow,
   continuous zoom + drift, so each chapter is a MOVING image even as a still. */
.cine-bg {
  animation: kenBurns 34s ease-in-out infinite alternate;
  transform-origin: 58% 42%;
  will-change: transform;
}
@keyframes kenBurns {
  0%   { transform: scale(1.08) translate3d(0, 0, 0); }
  100% { transform: scale(1.20) translate3d(-2%, -2.4%, 0); }
}

/* Ambient aurora drift on the scrims, so the blue/purple light breathes. */
.cine-scrim { background-size: 220% 220%; animation: auroraDrift 20s ease-in-out infinite alternate; }
.cine-scrim--heavy { animation-duration: 26s; }
@keyframes auroraDrift { 0% { background-position: 0% 28%; } 100% { background-position: 100% 72%; } }

/* Hero: the phone gently floats and the brand halo pulses, so the first
   frame is alive before you even scroll. */
.hero.cine .phone--photo { animation: heroFloat 6.5s ease-in-out infinite alternate; will-change: transform; }
@keyframes heroFloat { from { transform: translateY(7px); } to { transform: translateY(-15px); } }
.hero.cine .hero__visual::before { animation: haloPulse 7s ease-in-out infinite alternate; }
@keyframes haloPulse { from { opacity: .68; transform: scale(1); } to { opacity: 1; transform: scale(1.09); } }

/* The scroll-progress bar shimmers so the top edge feels live. */
.scroll-progress { background-size: 200% 100%; animation: railShimmer 4s linear infinite; }
@keyframes railShimmer { to { background-position: 200% 0; } }

/* The connected-system goal node quietly pulses so the map reads alive. */
.sysnode--goal .sysnode__dot { animation: goalPulse 3.2s ease-in-out infinite; }
@keyframes goalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,106,255,0); }
  50% { box-shadow: 0 0 0 12px rgba(0,106,255,0.14); }
}

/* Product mockup bars fill from empty when their section reveals, so the
   app demos animate instead of sitting frozen. */
.macro__fill, .ring { transform-origin: left center; }
[data-reveal].in .macro__fill { animation: barGrow 1.1s var(--cine-ease) both; }
@keyframes barGrow { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }

/* ---- Life for the LIGHT (non-video) sections, so no stretch of the page
        sits dead still. All CSS, no download. ---- */

/* Every product screenshot breathes, with varied timing so it feels organic
   rather than mechanically synchronized. (Hero phone keeps its own float.) */
.phone--photo { animation: phoneFloat 7s ease-in-out infinite alternate; will-change: transform; }
.split .phone--photo { animation-duration: 8.4s; animation-delay: -2.2s; }
.phone-duo .phone:nth-child(1) { animation: phoneFloat 7.6s ease-in-out infinite alternate; }
.phone-duo .phone:nth-child(2) { animation: phoneFloat 9s ease-in-out infinite alternate -1.5s; }
@keyframes phoneFloat { from { transform: translateY(7px); } to { transform: translateY(-11px); } }

/* The "scattered apps" cards drift, which also reinforces the story beat. */
.frag__app { animation: appDrift 5.5s ease-in-out infinite alternate; will-change: transform; }
.frag__app:nth-child(2) { animation-duration: 6.4s; animation-delay: -0.8s; }
.frag__app:nth-child(3) { animation-duration: 5.1s; animation-delay: -1.7s; }
.frag__app:nth-child(4) { animation-duration: 6.9s; animation-delay: -0.4s; }
.frag__app:nth-child(5) { animation-duration: 5.8s; animation-delay: -2.3s; }
.frag__app:nth-child(6) { animation-duration: 6.1s; animation-delay: -1.2s; }
@keyframes appDrift { from { transform: translateY(-5px) rotate(-0.6deg); } to { transform: translateY(6px) rotate(0.6deg); } }

/* A slow brand-tinted glow drifts behind the light editorial sections, so the
   text-only stretches have ambient life without clutter. */
.section.surface-paper { position: relative; overflow: hidden; }
.section.surface-paper::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(0,106,255,0.07), transparent 68%),
    radial-gradient(34% 34% at 80% 72%, rgba(109,59,255,0.07), transparent 68%);
  animation: glowDrift 24s ease-in-out infinite alternate;
}
.section.surface-paper > .container { position: relative; z-index: 1; }
@keyframes glowDrift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.12); } }

/* The primary CTA keeps a slow living shimmer even at rest. */
.btn-pill--primary-dark, .btn-pill--primary-light { animation: ctaShimmer 6s ease-in-out infinite alternate; }
@keyframes ctaShimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Goal chips carry a soft idle glow so the picker invites a tap. */
.goalchip[aria-pressed="true"] { animation: chipGlow 2.6s ease-in-out infinite alternate; }
@keyframes chipGlow {
  from { box-shadow: 0 10px 26px -10px rgba(0,106,255,0.5); }
  to { box-shadow: 0 12px 30px -8px rgba(109,59,255,0.65); }
}

@media (prefers-reduced-motion: reduce) {
  .cine-bg { transform: none; animation: none !important; }
  .cine-bg video { display: none !important; }
  .cine-scrim, .hero.cine .phone--photo, .hero.cine .hero__visual::before,
  .scroll-progress, .sysnode--goal .sysnode__dot, [data-reveal].in .macro__fill,
  .phone--photo, .phone-duo .phone, .frag__app, .section.surface-paper::before,
  .btn-pill--primary-dark, .btn-pill--primary-light, .goalchip { animation: none !important; }
  [data-reveal], .rvg > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-cue__mouse::before { animation: none; }
  .btn-pill--primary-dark, .btn-pill--primary-light { transition: none; }
}