@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #123274; /* wordmark colour from the logo */
  --paper: #ffffff;
  color-scheme: light;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--paper);
}

body {
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Full-screen stage. All overlay geometry is expressed in source-video pixels
   and scaled with --s, the same factor object-fit: cover applies to the video,
   so the caption always lands under the logo baked into the last frames. */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  container-type: size;
  --sw: 1920;
  --sh: 1080;
  --s: max(100cqw / var(--sw), 100cqh / var(--sh));
  --soon-y: 792; /* caption centre, source px */
}

.is-portrait .stage {
  --sw: 810;
}

.film,
.still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film {
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--paper);
}

.still {
  display: none;
  background: center / cover no-repeat;
}

.is-fallback .film {
  display: none;
}

.is-fallback .still {
  display: block;
  background-image: url('/assets/img/final-v2-land.webp');
}

.is-fallback.is-portrait .still {
  background-image: url('/assets/img/final-v2-port.webp');
}

/* Caption: hourglass + "Coming soon..." */
.soon {
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--soon-y) - var(--sh) / 2) * var(--s));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
  /* 42px on desktop; smaller windows scale it down with the video so it
     never outgrows the logo */
  font-size: clamp(15px, calc(54 * var(--s)), 42px);
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
  color: var(--navy);
  text-shadow: 0 0 0.7em rgba(255, 255, 255, 0.35);
  transform: translate(-50%, calc(-50% + 0.5em));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 1s;
}

.is-ended .soon,
.is-fallback .soon,
.no-js .soon {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition-delay: 0s;
}

.soon .hourglass {
  flex: none;
  height: 1.85em;
  width: calc(1.85em * 66 / 104);
  /* keeps the turn from overlapping the text */
  margin-left: -0.1em;
}

/* Phones: hourglass stacked above the text, the group anchored by its top edge
   a little below the tagline, text at a fixed 24px. */
@media (max-aspect-ratio: 1/1) and (max-width: 600px) {
  .stage {
    --soon-top: 752; /* source px, top of the hourglass */
  }

  .soon {
    top: calc(50% + (var(--soon-top) - var(--sh) / 2) * var(--s));
    flex-direction: column;
    gap: 0.6em;
    font-size: 24px;
    transform: translate(-50%, 0.5em);
  }

  .is-ended .soon,
  .is-fallback .soon,
  .no-js .soon {
    transform: translate(-50%, 0);
  }

  .soon .hourglass {
    height: 3em;
    width: calc(3em * 66 / 104);
    margin-left: 0;
  }
}

.hourglass {
  display: block;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 0.06em rgba(8, 22, 56, 0.25));
}

/* Loader: white screen with the hourglass until the film can play */
.loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  /* the white fades only after the hourglass is gone, so it never shows over the film */
  transition:
    opacity 0.7s ease 0.15s,
    visibility 0s linear 0.85s;
}

.loader-icon {
  transition:
    opacity 0.15s ease,
    visibility 0s linear 0.15s;
}

.loader .hourglass {
  height: clamp(88px, 15vmin, 136px);
  width: calc(clamp(88px, 15vmin, 136px) * 66 / 104);
  filter: drop-shadow(0 0 5px rgba(8, 22, 56, 0.16));
  /* delayed, so a cached film starts before the hourglass ever appears */
  animation: fade-in 0.5s ease 0.45s both;
}

.is-playing .loader,
.is-ended .loader,
.is-fallback .loader,
.no-js .loader,
.is-playing .loader-icon,
.is-ended .loader-icon,
.is-fallback .loader-icon {
  opacity: 0;
  visibility: hidden;
}

.no-js .still {
  display: block;
  background-image: url('/assets/img/final-v2-land.webp');
}

@media (max-aspect-ratio: 1/1) {
  .no-js .still {
    background-image: url('/assets/img/final-v2-port.webp');
  }
  .no-js .stage {
    --sw: 810;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}