/* ============================================================
   Flight hero (homepage)

   The stitched flight plays once as a muted inline video. The hero
   copy sits over its first frame, fades as the flight starts, and one
   button returns over the final frame. Layout comes from .hero in
   styles.css: nothing is pinned, the hero scrolls like any section.

   Without flight-hero.js (or with reduced motion or data saver) this
   is the normal hero over a still image.

   Desktop only. Phones and tablets keep the original looping video
   (.hero__media--classic in the page, styled in styles.css): a script
   in the page's head puts hero-flight or hero-classic on <html>, and
   without hero-flight every part of the flight stays out of the way.
   ============================================================ */
html:not(.hero-flight) .fh__media,
html:not(.hero-flight) .fh__end,
html:not(.hero-flight) .fh__replay { display: none; }
.hero-flight .hero__media--classic { display: none; }

.fh__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}
.fh__poster,
.fh__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* --fh-x keeps the subject in shot when a narrow screen crops the sides;
     flight-hero.js moves it along with the flight. */
  object-position: var(--fh-x, 62%) 50%;
}
/* Invisible until it is really playing, so a browser that refuses to
   autoplay never shows its own play button over the first frame. */
.fh__video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.fh.is-playing .fh__video { opacity: 1; }

/* Ocean loop: crossfades in over the flight's last frame and keeps running under the
   end button. It is two players of the same clip stacked on each other; each time the
   loop comes round, flight-hero.js starts the lower one in step with the upper one and
   fades the upper one away. */
.fh__loop {
  position: absolute;
  inset: 0;
  z-index: 0;              /* keeps the two players' own stacking inside this box, under the shades below */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;                 /* leaving, when the flight is replayed */
}
.fh.is-looping .fh__loop {
  opacity: 1;
  transition: opacity 0.8s ease-in-out;            /* arriving, over the flight's last frame */
}
.fh__loop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Dark wash that keeps the headline readable (the .hero__overlay gradients). The
   opening wide shot plays underneath it; it lifts with the headline so the rest of
   the flight plays at full colour. */
.fh__wash { transition: opacity 1.5s ease-in-out; }
.fh.is-flying .fh__wash { opacity: 0; }

/* Soft shade under the nav, which is transparent at the top of the page: without the
   wash its links would sit straight on bright frames of the flight. */
.fh__ceiling {
  position: absolute;
  inset: 0 0 auto 0;
  height: 9.5rem;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0.78) 0%, rgba(11, 15, 20, 0.42) 46%, rgba(11, 15, 20, 0) 100%);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
}
.fh.is-flying .fh__ceiling { opacity: 1; }

/* Soft floor so the bottom of the picture still blends into the page. */
.fh__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0) 0%, rgba(11, 15, 20, 0.5) 68%, var(--ink) 100%);
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  pointer-events: none;
}
.fh.is-flying .fh__floor { opacity: 1; }

/* ---------- Headline block: stays over the opening wide shot, then fades over 1.5 s ---------- */
.fh__intro { transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; }
.fh.is-flying .fh__intro {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ---------- Button that arrives over the sky when the flight ends ---------- */
.fh__end {
  position: absolute;
  left: 0;
  right: 0;
  top: 29%;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.fh.is-ended .fh__end {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.9s var(--ease) 0.2s, transform 0.9s var(--ease) 0.2s, visibility 0s;
}
.fh__end-cta { box-shadow: 0 14px 44px rgba(11, 15, 20, 0.45); }
.fh__end-cta:hover { box-shadow: 0 14px 44px rgba(255, 61, 129, 0.4); }

/* ---------- Replay: small, in the corner, only once the flight has ended ---------- */
.fh__replay {
  position: absolute;
  left: var(--gutter);
  bottom: 1.75rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(244, 247, 248, 0.26);
  background: rgba(11, 15, 20, 0.36);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cloud);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s, border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fh__replay svg { width: 1.15rem; height: 1.15rem; display: block; }
.fh__replay .fh__icon-play { display: none; }
.fh.is-ended .fh__replay,
.fh.is-blocked .fh__replay {
  opacity: 0.7;
  visibility: visible;
  transition: opacity 0.9s var(--ease) 0.6s, visibility 0s, border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fh.is-ended .fh__replay:hover,
.fh.is-ended .fh__replay:focus-visible,
.fh.is-blocked .fh__replay:hover,
.fh.is-blocked .fh__replay:focus-visible {
  opacity: 1;
  border-color: var(--cyan);
  color: var(--cyan);
}
/* If the browser will not autoplay (for example Low Power Mode), the same
   corner button offers to play the flight instead. */
.fh.is-blocked .fh__replay .fh__icon-replay { display: none; }
.fh.is-blocked .fh__replay .fh__icon-play { display: block; }

/* ---------- Reduced motion: final ocean frame as a still, headline and buttons stay ---------- */
@media (prefers-reduced-motion: reduce) {
  .fh__poster { object-position: 50% 50%; }
  .fh__video,
  .fh__loop,
  .fh__end,
  .fh__replay { display: none; }
}
/* Same thing forced by the ?still preview switch */
.fh--still .fh__poster { object-position: 50% 50%; }
.fh--still .fh__video,
.fh--still .fh__loop,
.fh--still .fh__end,
.fh--still .fh__replay { display: none; }