/* Match the first frame’s centered cover crop in both orientations. */
.hero .sequence-stage {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  opacity: 1;
  pointer-events: none;
}
.sequence-stage__outline { overflow: hidden; }
.sequence-stage__outline .sequence-stage__portrait { display: none; }

@media (max-width: 700px), (max-width: 1100px) and (orientation: portrait) {
  .sequence-stage__outline .sequence-stage__landscape { display: none; }
  .sequence-stage__outline .sequence-stage__portrait { display: block; }
}
@media (max-width: 700px) {
  .hero .sequence-stage { height: 100dvh; }
}

.sequence-stage__outline svg { display: block; width: 100%; height: 100%; color: #000; }
.sequence-stage__outline path {
  stroke-opacity: .2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--load-progress, 0));
}

.global-advance {
  position: fixed;
  z-index: 95;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: #fff;
  background: #ffffff1c;
  mix-blend-mode: difference;
  cursor: pointer;
}
.global-advance img { display: block; transform: rotate(90deg); filter: invert(1); }
.global-advance:focus-visible { outline: 1px solid currentColor; outline-offset: -3px; }
html.is-preloading .global-advance { visibility: hidden; }

/* Pending state exists in HTML before either the observer or fonts can load. */
@media (prefers-reduced-motion: no-preference) {
  html.text-motion [data-text-reveal="pending"] { opacity: 0; }
}
.letter-wave__source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.letter-wave__word { display: inline-block; white-space: nowrap; text-indent: 0; }
.letter-wave__letter {
  display: inline-block;
  text-indent: 0;
}
[data-text-reveal="letters"] .letter-wave__letter {
  animation: letter-wave-in .7s ease-out var(--letter-delay, 0ms) both;
}
@keyframes letter-wave-in {
  0% { opacity: 0; transform: translateY(.18em); }
  60% { opacity: 1; transform: translateY(-.12em); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sequence-stage__outline path { stroke-dashoffset: 0; }
  [data-text-reveal="letters"] .letter-wave__letter { animation: none; }
}