/*!
 * Ascend Solutions : Cinematic "Ascent" climb styles (generated).
 * Source: design-handoff/design/ascent-film.css. Regenerate via build-immersive-assets.cjs.
 */
/* ============================================================
   Ascend - Embedded cinematic ascent (Contender A · #ascent)
   A section-scoped version of the Contender B film: scroll
   through the section to climb night -> dawn while the five
   stages reveal as chapters. Scoped under .fa-film.
   ============================================================ */

.fa-film{ position:relative; height:880vh; background:#04070F; }
body.fa-reduced .fa-film{ height:auto; }

.fa-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:#04070F; color:#fff; }
body.fa-reduced .fa-sticky{ position:static; height:auto; padding:var(--space-10) 0; }

/* sky */
.fa-sky{ position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--fa-top,#04070F) 0%, var(--fa-mid,#0B1D3A) 52%, var(--fa-bot,#162B52) 100%); }
.fa-sun{ position:absolute; left:50%; bottom:16%; width:58vmax; height:58vmax; z-index:1; border-radius:50%;
  transform:translate(-50%, var(--fa-sun-y,220px)); opacity:var(--fa-sun-o,0); pointer-events:none; filter:blur(4px);
  background:radial-gradient(circle at center, var(--fa-sun-core,#E8C46A) 0%,
    color-mix(in srgb, var(--fa-sun-core,#E8C46A) 52%, transparent) 16%,
    color-mix(in srgb, var(--fa-sun-core,#E8C46A) 22%, transparent) 34%, transparent 60%); }
.fa-stars{ position:absolute; inset:0; z-index:1; opacity:var(--fa-stars-o,1); }
.fa-stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; animation:faTw 4s ease-in-out infinite; }
@keyframes faTw{ 0%,100%{opacity:.2;} 50%{opacity:.85;} }

/* summit payoff - god-rays + gold flare bloom near the top of the climb */
.fa-rays{ position:absolute; left:50%; bottom:6%; width:150vmax; height:150vmax; z-index:1; pointer-events:none;
  transform:translate(-50%, 30%) rotate(var(--fa-rays-rot,0deg)); transform-origin:50% 50%;
  opacity:var(--fa-rays-o,0); mix-blend-mode:screen; will-change:transform,opacity;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(240,206,120,.20) 0deg, rgba(240,206,120,0) 3.2deg 9deg, rgba(240,206,120,.20) 12deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 8%, #000 22%, transparent 56%);
          mask:radial-gradient(circle at 50% 50%, transparent 8%, #000 22%, transparent 56%); }
.fa-flare{ position:absolute; left:50%; bottom:14%; width:62vmax; height:62vmax; z-index:1; border-radius:50%;
  transform:translate(-50%,50%); opacity:var(--fa-flare-o,0); pointer-events:none; mix-blend-mode:screen; filter:blur(2px);
  background:radial-gradient(circle at center, rgba(255,246,224,.95) 0%, rgba(240,206,120,.7) 12%,
    rgba(232,196,106,.32) 26%, rgba(212,168,67,.12) 40%, transparent 62%); will-change:opacity; }

/* mountain layers */
.fa-range{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.fa-peak{ will-change:transform; }
.fa-far{ fill:var(--navy-700); opacity:.5; }
.fa-mid{ fill:var(--navy-600); opacity:.6; }
.fa-gold{ filter:drop-shadow(0 -6px 24px rgba(212,168,67,.25)); }
.fa-near{ filter:drop-shadow(0 -10px 40px rgba(15,196,212,.35)); }

/* fog */
.fa-fog{ position:absolute; left:-12%; right:-12%; height:46vh; z-index:3; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(190,210,238,.55), transparent 72%);
  mix-blend-mode:screen; filter:blur(22px); opacity:var(--fa-fog-o,0); will-change:transform; }
.fa-fog1{ bottom:4%; } .fa-fog2{ bottom:20%; height:36vh; filter:blur(30px); }

.fa-vignette{ position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(120% 92% at 50% 40%, transparent 52%, rgba(2,6,16,.55) 100%); }

/* intro head */
.fa-head{ position:absolute; top:14vh; left:0; right:0; z-index:6; text-align:center; padding-inline:max(1.5rem,5vw);
  width:100%; max-width:var(--container-wide); margin-inline:auto; opacity:var(--fa-head-o,1); }
.fa-head .eyebrow{ margin-bottom:var(--space-3); }
.fa-head h2{ color:#fff; font-size:clamp(2rem,4.4vw,var(--text-3xl)); letter-spacing:var(--tracking-tight); }
.fa-head__sub{ margin:var(--space-4) auto 0; max-width:48ch; color:rgba(234,241,251,.74); font-size:var(--text-md); line-height:var(--leading-relaxed); }
body.fa-reduced .fa-head{ position:static; opacity:1; margin-bottom:var(--space-8); }

/* chapters */
.fa-chapters{ position:absolute; inset:0; z-index:6; }
.fa-chap{ position:absolute; left:0; right:0; bottom:15vh; width:100%; max-width:var(--container-wide);
  margin-inline:auto; padding-inline:max(1.5rem,5vw); opacity:0; pointer-events:none; }
.fa-chap__no{ font-family:var(--eyebrow-font); font-size:var(--text-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--teal-300); margin:0 0 1rem; }
.fa-chap--gold .fa-chap__no{ color:var(--gold-300); }
.fa-chap__h{ font-family:var(--font-display); font-weight:var(--fw-black); color:#fff;
  font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1.0; letter-spacing:var(--tracking-tight); max-width:17ch; }
.fa-chap__h em{ font-style:normal; background:linear-gradient(120deg,var(--teal-400),var(--teal-300)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fa-chap--gold .fa-chap__h em{ background:linear-gradient(120deg,var(--gold-400),var(--gold-300)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fa-chap__sub{ margin-top:1.1rem; max-width:46ch; color:rgba(234,241,251,.82); font-size:clamp(1rem,1.5vw,var(--text-lg)); line-height:var(--leading-relaxed); }
.fa-chap__svc{ margin-top:1rem; display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-display);
  font-weight:var(--fw-semibold); font-size:var(--text-sm); color:rgba(234,241,251,.6); }
.fa-chap__svc::before{ content:"▲"; color:var(--teal-400); font-size:.7em; }
.fa-chap--gold .fa-chap__svc::before{ color:var(--gold-400); }
/* Per-chapter funnel CTA. The chapter toggles pointer-events via the scrub
   engine, so these inherit "clickable" only while the chapter is settled. */
.fa-chap__cta{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem var(--space-5); align-items:center; }
.fa-chap__more{ color:rgba(234,241,251,.6); font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-sm); letter-spacing:var(--tracking-tight); text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.fa-chap__more:hover{ color:var(--teal-300); }
.fa-chap--gold .fa-chap__more:hover{ color:var(--gold-300); }

body.fa-reduced .fa-chapters{ position:static; }
body.fa-reduced .fa-chap{ position:relative; opacity:1 !important; transform:none !important; bottom:auto; padding-block:var(--space-7); border-top:1px solid rgba(255,255,255,.1); pointer-events:auto; }

/* summit crest - the rewarding final moment */
.fa-summit{ position:absolute; left:0; right:0; top:50%; z-index:7; text-align:center; padding-inline:1.5rem;
  transform:translateY(calc(-50% + var(--fa-summit-y,40px))); opacity:var(--fa-summit-o,0); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3); will-change:opacity,transform; }
.fa-summit__mark{ filter:drop-shadow(0 0 22px rgba(232,196,106,.55)); animation:faGlint 3.4s ease-in-out infinite; }
@keyframes faGlint{ 0%,100%{ filter:drop-shadow(0 0 14px rgba(232,196,106,.4)); } 50%{ filter:drop-shadow(0 0 30px rgba(232,196,106,.8)); } }
.fa-summit__cap{ font-family:var(--eyebrow-font); font-size:var(--text-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold-300); margin:0; }
.fa-summit__line{ font-family:var(--font-display); font-weight:var(--fw-black); color:#fff;
  font-size:clamp(1.9rem,4.6vw,3.4rem); letter-spacing:var(--tracking-tight); margin:0; max-width:18ch; }
body.fa-reduced .fa-summit{ display:none; }

/* altitude gauge */
.fa-gauge{ position:absolute; right:max(1.2rem,3vw); top:50%; transform:translateY(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:12px; height:44vh; pointer-events:none; }
.fa-gauge__cap{ writing-mode:vertical-rl; font-family:var(--font-display); font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:rgba(234,241,251,.5); }
.fa-gauge__now{ writing-mode:vertical-rl; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--teal-300); min-height:120px; }
.fa-gauge__track{ position:relative; flex:1; width:2px; background:rgba(255,255,255,.16); border-radius:2px; }
.fa-gauge__fill{ position:absolute; bottom:0; left:0; right:0; height:var(--fa-alt,0%); background:linear-gradient(0deg,var(--teal-400),var(--gold-400)); border-radius:2px; }
.fa-gauge__dot{ position:absolute; left:50%; bottom:var(--fa-alt,0%); width:11px; height:11px; border-radius:50%; transform:translate(-50%,50%); background:#fff; box-shadow:0 0 0 4px rgba(15,196,212,.3); }

/* scroll cue */
.fa-cue{ position:absolute; left:50%; bottom:7vh; z-index:6; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(234,241,251,.6); font-family:var(--font-display); font-size:var(--text-2xs); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; opacity:var(--fa-head-o,1); pointer-events:none; }
.fa-cue__dot{ width:24px; height:38px; border:1.5px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
.fa-cue__dot::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; border-radius:2px; background:var(--teal-300); animation:faCue 1.8s var(--ease-out) infinite; }
@keyframes faCue{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 80%{opacity:0; transform:translate(-50%,12px);} 100%{opacity:0;} }

body.fa-reduced .fa-gauge, body.fa-reduced .fa-cue, body.fa-reduced .fa-stars{ display:none; }

@media (max-width: 820px){ .fa-gauge{ display:none; } .fa-chap{ bottom:11vh; } }
@media (prefers-reduced-motion: reduce){ .fa-stars i, .fa-cue__dot::after{ animation:none; } }