/* Final Call v35: countdown-synchronised envelope and two photo crossfades.
   Parent opacity is updated from the countdown, not CSS wall-clock time. */
#hero .final-call-layer-stack{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:var(--tfw-final-call-visible,0);
  pointer-events:none!important;
  transition:none!important;
  isolation:isolate;
}
#hero .final-call-layer-stack .final-call-scene{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity 1250ms cubic-bezier(.22,.61,.36,1)!important;
  backface-visibility:hidden;
}
#hero .final-call-layer-stack .final-call-scene.active{
  opacity:1!important;
}
/* #hero specificity overrides preview and milestone rules which previously
   forced the title/pill/progress back to opacity:1!important.
   Leave element dimensions intact so no layout changes occur while fading. */
body.tfw-final-call-active #hero #phasePill,
body.tfw-final-call-active #hero .countdown-shell,
body.tfw-final-call-active #hero .release-hud,
body.tfw-final-call-active #hero .progress-block,
body.tfw-final-call-active #hero .hero-status,
body.tfw-final-call-active #hero #nextScene,
body.tfw-final-call-active #hero .tfw-live-milestone-tag,
body.tfw-final-call-active .topbar .brand-copy{
  opacity:calc(1 - var(--tfw-final-call-visible,0))!important;
  transition:none!important;
  pointer-events:none!important;
}
/* The whole composition now fades in and out with the same smoothstep
   envelope as the temporary images. Crossfades between photos stay smooth. */


/* Final Call v37 — stable, centrally composed cinematic subtitles.
   The backdrop is independent from the changing text layers: no flicker. */
#hero .tfw-call-subtitles{
  --call-accent:#b4a9ff;
  position:absolute;
  z-index:12;
  left:50%;
  bottom:clamp(185px,27vh,310px);
  width:min(850px,90vw);
  height:clamp(148px,18vh,188px);
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.19);
  border-radius:23px;
  background:linear-gradient(113deg,rgba(8,7,17,.84),rgba(20,12,30,.76) 52%,rgba(7,7,16,.87));
  box-shadow:0 22px 84px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translateX(-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  isolation:isolate;
  transition:none!important;
}
#hero .tfw-call-subtitles.visible{
  opacity:var(--tfw-caption-opacity,1);
  visibility:visible;
}
#hero .tfw-call-subtitles.voice-michael{--call-accent:#ff90c7}
#hero .tfw-call-subtitles.voice-franklin{--call-accent:#85f4cb}
#hero .tfw-call-subtitles.voice-trevor{--call-accent:#ffc282}
#hero .tfw-call-subtitles.voice-effect{--call-accent:#b4a9ff}
#hero .tfw-call-subtitles:before{
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--call-accent),transparent);
  opacity:.92;
  box-shadow:0 0 20px var(--call-accent);
  transition:background-color .42s ease;
}
#hero .tfw-caption-speaker{
  position:absolute;
  top:17px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:11px;
  min-height:20px;
  text-align:center;
  color:var(--call-accent);
  font:800 clamp(11px,1vw,15px)/1.15 Arial,Helvetica,sans-serif;
  letter-spacing:.23em;
  text-shadow:0 0 18px rgba(0,0,0,.70);
}
#hero .tfw-caption-speaker:before{
  content:'';
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 16px currentColor;
}
#hero .tfw-caption-card{
  position:absolute;
  inset:49px 17px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  opacity:0;
  visibility:hidden;
  filter:blur(2.2px);
  transform:translateY(5px);
  transition:opacity .48s cubic-bezier(.18,.7,.22,1),
    filter .50s ease,
    transform .55s cubic-bezier(.18,.7,.22,1),
    visibility 0s linear .50s;
}
#hero .tfw-caption-card.active{
  opacity:1;
  visibility:visible;
  filter:none;
  transform:translateY(0);
  transition:opacity .48s cubic-bezier(.18,.7,.22,1),
    filter .50s ease,
    transform .55s cubic-bezier(.18,.7,.22,1),
    visibility 0s linear 0s;
}
#hero .tfw-caption-line{
  width:100%;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:break-word;
  color:#fff;
  font:800 clamp(25px,2.55vw,36px)/1.30 Arial,Helvetica,sans-serif;
  letter-spacing:-.016em;
  text-shadow:0 4px 17px rgba(0,0,0,.95),0 0 31px rgba(0,0,0,.58);
}
#hero .tfw-caption-word{
  display:inline-block;
  vertical-align:baseline;
  white-space:pre-wrap;
  opacity:0;
  filter:blur(2px);
  transform:translateY(3px);
}
#hero .tfw-caption-word.spoken{
  opacity:1;
  filter:none;
  transform:translateY(0);
  animation:tfwSubtitleWordIn .64s cubic-bezier(.2,.7,.23,1) both;
}
#hero .tfw-caption-word.current{
  text-shadow:0 0 14px var(--call-accent),0 3px 16px rgba(0,0,0,.95);
}
#hero .tfw-call-subtitles.voice-effect .tfw-caption-line{
  color:#e7dfff;
  font-style:italic;
  letter-spacing:.035em;
}
@keyframes tfwSubtitleWordIn{
  0%{opacity:0;filter:blur(2px);transform:translateY(3px)}
  45%{opacity:.77;filter:blur(.4px);transform:translateY(1px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
@media(max-width:700px){
  #hero .tfw-call-subtitles{
    width:91vw;
    height:clamp(148px,20svh,186px);
    bottom:clamp(155px,24svh,230px);
    border-radius:18px;
  }
  #hero .tfw-caption-speaker{
    top:14px;
    left:12px;
    right:12px;
    font-size:11px;
    letter-spacing:.16em;
    gap:8px;
  }
  #hero .tfw-caption-card{inset:43px 12px 10px}
  #hero .tfw-caption-line{
    font-size:clamp(19px,5vw,26px);
    line-height:1.31;
  }
}
@media(max-width:390px){
  #hero .tfw-caption-line{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  #hero .tfw-caption-card{transition:none!important}
  #hero .tfw-caption-word.spoken{animation:none!important}
}


/* Final Call v38 — cinematic headline occupying the existing milestone title
   slot, without changing the countdown layout or other milestone copy. */
#hero .hero-title-wrap{position:relative}
#hero .tfw-final-call-headline{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,.55svh,8px);
  box-sizing:border-box;
  padding:0 8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:none!important;
  text-align:center;
}
body.tfw-final-call-active #hero .hero-title-wrap{
  /* The original texts are individually faded below. Keep their shared
     positioning slot visible so the replacement headline can crossfade in. */
  opacity:1!important;
}
body.tfw-final-call-active #hero .hero-title-wrap > .eyebrow,
body.tfw-final-call-active #hero .hero-title-wrap > #heroTitle{
  opacity:calc(1 - var(--tfw-final-call-visible,0))!important;
  transition:none!important;
}
body.tfw-final-call-active #hero .tfw-final-call-headline{
  opacity:var(--tfw-final-call-visible,0)!important;
  visibility:visible!important;
}
#hero .tfw-final-call-kicker{
  margin:0;
  color:rgba(255,255,255,.94);
  font:900 clamp(12px,1.25vw,18px)/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-shadow:0 0 17px rgba(255,255,255,.15);
}
#hero .tfw-final-call-title-text{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  font:900 clamp(44px,6.3vw,91px)/.98 "Arial Black",Impact,Arial,sans-serif;
  letter-spacing:-.057em;
  text-wrap:balance;
  background-image:linear-gradient(90deg,#fff 0%,#ffb05f 20%,#ff52bd 48%,#8e78ff 72%,#fff 100%);
  background-size:220% 100%;
  background-repeat:repeat-x;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(242,63,178,.32));
  animation:tfwV21PreviewTitleFlow 3.8s linear infinite,tfwV21PreviewTitleBreath 2.25s ease-in-out infinite;
}
@media(max-width:900px){
  #hero .tfw-final-call-title-text{
    font-size:clamp(35px,6.8vw,58px);
  }
}
@media(max-width:700px){
  #hero .tfw-final-call-kicker{
    font-size:clamp(12px,3.5vw,16px);
    letter-spacing:.13em;
  }
  #hero .tfw-final-call-title-text{
    font-size:clamp(34px,9.1vw,53px);
    line-height:1.04;
  }
}
@media(prefers-reduced-motion:reduce){
  #hero .tfw-final-call-title-text{animation:none!important}
}