/* Hyper Endurance Fitness | opening film styles
   ------------------------------------------------------------------ */

.hef-intro{
  position:fixed;
  inset:0;
  /* Dynamic viewport units so iOS Safari's collapsing address bar cannot
     leave a strip of the page showing under the film. The static unit is
     kept first as a fallback for browsers without dvh. */
  height:100vh;
  height:100dvh;
  /* No width here. inset:0 already spans the viewport exactly, whereas
     100vw counts the scrollbar on some engines and overhangs the right
     edge, which is the other way this seam can appear. */
  z-index:2147483000;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:default;
  opacity:1;
  transition:opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color:transparent;
}

.hef-intro.is-leaving{ opacity:0; pointer-events:none; }

/* It holds keyboard focus, but it is a film, not a control. */
.hef-intro:focus,
.hef-intro:focus-visible{ outline:none; }

/* Mobile: the film is 9:16 and so is the screen, so it fills exactly. */
.hef-intro-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

/* Desktop: the supplied widescreen film is 1.906:1, which is wider than
   any normal screen, so fitting it left black bars across the top and
   bottom edges. On a 16:10 laptop that was 16% of the screen height.

   Filling instead scales to the full height, so there is no vertical
   crop at all and the globe is framed exactly as delivered. The only
   loss is at the extreme left and right: 3.3% each side on a 16:9
   screen, 8% on 16:10, measured against a composition whose lit content
   starts 27% in from the edge. Nothing of the logo is touched. */
@media (min-width: 900px){
  .hef-intro-video{ object-fit:cover; }
}

/* Ultrawide fills as well. At 21:9 the film scales to the window width
   and loses about 12% off the top and bottom, which is empty sky above
   the globe and floor below it, not composition. Only a genuinely short
   landscape window, a phone turned sideways, gets fitted, because there
   the crop would reach into the logo itself. */
@media (max-height: 430px){
  .hef-intro-video{ object-fit:contain; }
}

/* No player furniture on any engine. */
.hef-intro-video::-webkit-media-controls,
.hef-intro-video::-webkit-media-controls-enclosure,
.hef-intro-video::-webkit-media-controls-panel,
.hef-intro-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}

/* Hold the page still underneath without letting the layout jump when the
   scrollbar is removed. */
/* Hold the page still underneath.

   scrollbar-gutter:stable used to be here, to stop the layout jumping
   when the scrollbar was hidden. It was reserving a strip at the right
   edge and painting it with the page background, which showed as a pale
   band down the side of the film. Measured: the right twenty columns
   averaged 191 of 255 with it, and 0.2 without.

   It is not needed. The film covers the viewport, so there is nothing
   visible to shift while it is up. */
html.hef-intro-open,
html.hef-intro-open body{
  overflow:hidden;
  overscroll-behavior:none;
}

/* While the film is up, stop the page underneath doing any work.

   The home page carries an infinitely rotating globe and a navigation
   bar with a backdrop blur. Both were still compositing every frame,
   underneath a full screen video that completely covers them, which on
   a phone is exactly the contention that shows up as dropped frames.

   Everything except the film is taken out of the paint and composite
   path. Layout is untouched, so nothing moves when it comes back. */
html.hef-intro-open body > *:not(.hef-intro){
  visibility:hidden;
}
html.hef-intro-open body > *:not(.hef-intro) *{
  animation-play-state:paused !important;
  transition:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* And if any scrollbar does appear, it renders dark rather than as a
   white gutter against a black film. */
html.hef-intro-open{ color-scheme:dark; background:#000; }

@media (prefers-reduced-motion: reduce){
  .hef-intro{ transition:none; }
}