/* Home hero: fly through the letter. Scoped to html[data-fx~="fly"]; works alongside hero-trail.css
   (whose letter-by-letter entrance is the one that plays). hero-fly.js wraps the hero's children in .fxc-stage and adds .fxc-on to #top. */

html[data-fx~="fly"] .fxc-stage{display:contents}
html[data-fx~="fly"] .fxc-cue{display:none}

@media screen and (prefers-reduced-motion:no-preference){
  /* keep the wordmark where it will be once the stage takes over, so nothing jumps when the script runs */
  html[data-fx~="fly"] #top.hero{min-height:100vh;min-height:100svh}


  /* scroll cue: the label sits on the baseline of the tagline's first line and a hairline hangs below it,
     with a white tick running down. Laid out the same before and after the script runs */
  html[data-fx~="fly"] .hero-foot{align-items:baseline}
  html[data-fx~="fly"] .hero-foot .cap{position:relative;margin-bottom:calc(24px + clamp(20px,2.4vw,32px) - clamp(22px,3vw,34px))}
  html[data-fx~="fly"] #top.fxc-on .fxc-cue{display:block;position:absolute;right:0;top:calc(100% + 8px);width:2px;height:clamp(20px,2.4vw,32px);overflow:hidden;background:rgba(255,255,255,.35);
    animation:fxc-in .8s .9s cubic-bezier(.2,.8,.2,1) both}
  html[data-fx~="fly"] #top.fxc-on .fxc-cue i{position:absolute;left:0;top:0;width:100%;height:45%;background:#fff;
    transform:translateY(-100%);animation:fxc-run 2.4s 1.5s cubic-bezier(.65,0,.35,1) infinite}
  html[data-fx~="fly"] #top.fxc-moving .fxc-cue i,html[data-fx~="fly"] #top:not(.fxc-live) .fxc-cue i{animation-play-state:paused}
}
@media screen and (prefers-reduced-motion:no-preference) and (min-resolution:2dppx){
  html[data-fx~="fly"] #top.fxc-on .fxc-cue{width:1.5px}
}
/* narrow phones: the label wraps under the tagline on the left (fx-c.js marks it), so the hairline hangs from its left edge */
html[data-fx~="fly"] #top.fxc-on .hero-foot.fxc-wrap .fxc-cue{right:auto;left:0}
@keyframes fxc-pull{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
@keyframes fxc-run{0%{transform:translateY(-100%)}65%,100%{transform:translateY(225%)}}
@keyframes fxc-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media screen{
  /* the hero becomes a tall scroll track; the frame inside it sticks to the screen */
  html[data-fx~="fly"] #top.fxc-on{
    --fxc-dist:110vh;
    display:block;min-height:0;padding-top:0;overflow:visible;
    height:calc(100vh + var(--fxc-dist));
  }
  html[data-fx~="fly"] #top.fxc-on .fxc-stage{
    position:sticky;top:0;display:grid;grid-template-rows:1fr auto auto;
    height:100vh;padding-top:64px;overflow:hidden;background:var(--red);
  }
  @media (max-width:700px){html[data-fx~="fly"] #top.fxc-on{--fxc-dist:100vh}}
  /* where the small/large viewport units exist: the frame covers the largest viewport (toolbars hidden)
     so a letter is never cut off, while its content is laid out in the smallest one (toolbars showing) */
  @supports (height:100svh) and (height:100lvh){
    html[data-fx~="fly"] #top.fxc-on{--fxc-dist:110svh;height:calc(100lvh + var(--fxc-dist))}
    html[data-fx~="fly"] #top.fxc-on .fxc-stage{height:100lvh;padding-bottom:calc(100lvh - 100svh)}
    @media (max-width:700px){html[data-fx~="fly"] #top.fxc-on{--fxc-dist:100svh}}
  }

  /* the headline follows straight on from the flight: no dead red gap above it */
  html[data-fx~="fly"] #top.fxc-on + section.red .big{padding-top:clamp(28px,4vh,48px);padding-top:clamp(28px,4svh,48px)}
}
/* fx-c.js holds the headline in view as it arrives, above its section's top edge; that needs the
   section to stop clipping vertically (sideways stays clipped) */
@supports (overflow:clip){
  @media screen{html[data-fx~="fly"] #top.fxc-on + section.red{overflow-x:clip;overflow-y:visible}}
}

/* once the counter fills the frame the letters are hidden: the frame is plain red and hands over to the next section */
html[data-fx~="fly"] #top.fxc-through #wm{visibility:hidden}

/* while the letters sweep behind it, the nav sits on a solid red band: it stays white on red, with no flicker.
   The band is invisible against the red frame when it comes and goes */
html[data-fx~="fly"] .nav.fxc-band:not(.on-light){background:var(--red)}
/* the small W1 DIGITAL mark takes over as soon as the big one starts to crop */
html[data-fx~="fly"] .nav.fxc-mark .mark{opacity:1;transform:none}

/* print the plain hero, whatever point of the flight the page was at */
@media print{
  html[data-fx~="fly"] .word,html[data-fx~="fly"] #wm,html[data-fx~="fly"] .word .l{transform:none!important;visibility:visible!important;opacity:1!important;animation:none!important}
  html[data-fx~="fly"] .hero-foot,html[data-fx~="fly"] .big h1{opacity:1!important;transform:none!important}
  html[data-fx~="fly"] .fxc-cue{display:none!important}
  html[data-fx~="fly"] .nav.fxc-band{background:transparent!important}
  html[data-fx~="fly"] .nav.fxc-mark:not(.show-mark) .mark{opacity:0!important}
}