/* The approved opening stays intact. Only the central gold monogram is absent. */

.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  background: var(--navy-deep);
  padding-bottom: clamp(3.5rem, 10vh, 7rem);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Never tappable, so WebKit's start-playback glyph cannot be pressed even in
     the instant before the still covers it. Never transparent, though: Safari
     will not autoplay a video it considers not visible, and opacity: 0 was
     enough to stop it starting at all. */
  pointer-events: none;
}

/* THE AUTOPLAY RULE. WebKit supports a silent MP4 as an automatically looping
   image, including when its media autoplay policy refuses a <video>. The
   surrounding <picture> therefore selects the same clip in Safari and this
   element becomes motion without a gesture. Browsers that do not implement
   MP4 images use the static first frame until the normal video is playing.
   Either way this layer sits above the video, covering any native play glyph.
   Do not make the video transparent: Safari will then decline normal autoplay. */
.hero__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events: none;
}

.hero[data-playing='true']:not([data-image-motion='true']) .hero__still { opacity: 0; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      var(--hero-scrim-deep) 0%,
      var(--hero-scrim) 24%,
      var(--hero-scrim) 48%,
      var(--hero-scrim) 74%,
      var(--hero-scrim-deep) 100%
    );
}

.hero__mark {
  position: relative;
  text-align: center;
  padding-inline: var(--gutter);
}

.hero__lockup {
  margin: 0;
}

.hero__wordmark {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__tagline {
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-variation-settings: 'wdth' var(--wdth-body);
  font-size: var(--fs-body-s);
  font-weight: var(--wt-body);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* The statement owns extra scroll distance while the sentence remains still.
   That distance is deliberately short. At 180svh the sentence finished filling
   roughly half a screen before the pin released, so the reader kept scrolling
   into a sentence that was already complete and the page felt stuck. The
   geometry below lands the last character about ten viewport-percent before
   release: long enough for the finished line to register, short enough that
   nobody has to scroll twice to get moving again. */
.statement {
  min-height: 145svh;
  position: relative;
  background: var(--navy-deep);
  padding-inline: var(--gutter);
}

.statement__text {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display);
  font-weight: var(--wt-display);
  font-size: var(--fs-statement);
  line-height: var(--lh-statement);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
  color: var(--cream);
}

.statement__visual {
  display: block;
}

.statement__word {
  display: inline-block;
  white-space: nowrap;
}

.statement__char {
  color: var(--statement-dim);
  transition: color var(--dur-hover) linear;
}

.statement__char[data-lit='true'] {
  color: var(--cream);
}

.statement__line {
  display: block;
  margin-top: 0.4em;
}

html.no-js .statement__text,
html.no-js .statement__char {
  color: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  .statement {
    min-height: 100svh;
  }

  .statement__char,
  .statement__char[data-lit='false'] {
    color: var(--cream);
    transition: none;
  }
}

@supports (animation-timeline: view()) {
  html.statement-css .statement {
    view-timeline-name: --statement;
    view-timeline-axis: block;
  }

  html.statement-css .statement__char {
    /* Begin as the first line appears from under the hero, not once the
       section has locked to a full screen of unlit text: a screen that is
       entirely dim reads as though the page has stopped. */
    /* cover range is 145svh + 100svh = 245svh. The pin releases at 59% of it,
       so the last character finishes at 14 + 40 + 1 = 55%. */
    --fill-start: 14%;
    --fill-span: 40;
    --slice: calc(var(--fill-span) / var(--n, 100));
    animation: statement-lit 1s linear both;
    animation-timeline: --statement;
    animation-range:
      cover calc(var(--fill-start) + (var(--i, 0) * var(--slice) * 1%))
      cover calc(var(--fill-start) + (var(--i, 0) * var(--slice) * 1%) + 1%);
  }

  @keyframes statement-lit {
    from {
      color: var(--statement-dim);
    }

    to {
      color: var(--cream);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.statement-css .statement__char {
    animation: none;
    color: var(--cream);
  }
}

@media (max-width: 640px) {
  .hero__wordmark {
    font-size: clamp(1.35rem, 7.4vw, 1.75rem);
    letter-spacing: 0.05em;
  }

  .hero__tagline {
    margin-top: var(--sp-6);
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
  }

  .statement {
    min-height: 140svh;
  }

  .statement__text {
    max-width: 19ch;
  }

  html.statement-css .statement__char {
    /* cover range 240svh, pin releases at 58%. Starting at 32 rather than 40
       also cuts the stretch where a pinned screen sat entirely unlit. */
    --fill-start: 32%;
    --fill-span: 22;
  }
}

/* ---------- No start-playback affordance ----------
   The motion image above is the durable iOS path. These rules keep WebKit from
   painting a transient control over the underlying video while sources settle. */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-panel,
.hero__video::-webkit-media-controls-container,
.hero__video::-webkit-media-controls-enclosure,
.hero__video::-webkit-media-controls-overlay-enclosure,
.hero__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
}