/* Photographs remain in place while the optional, muted motion layer is loading. */
[data-motion-media] video.motion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity .6s ease;
}
[data-motion-media].is-video-playing video.motion-video { opacity: 1; }
.hero-photo-frame > video.motion-video,
.focus-visual[data-motion-media] > .parallax-window > video.motion-video,
.band-image > video.motion-video {
  inset: auto;
  left: 0;
  top: calc(-1 * var(--parallax-bleed));
  width: 100%;
  height: calc(100% + 2 * var(--parallax-bleed));
  margin: 0;
}
.hero-photo-frame > video.motion-video { object-position: 49% center; }
.focus-visual[data-motion-media] > .parallax-window > video.motion-video { object-position: 42% center; }
.infrastructure-band[data-motion-media] > .band-image { z-index: 0; }
.infrastructure-band[data-motion-media] > .band-content { z-index: 3; }
[data-motion-media] .hero-photo-frame:after,
[data-motion-media] .band-image:after,
.hero-photo-frame[data-motion-media]:after,
.band-image[data-motion-media]:after {
  z-index: 2;
  pointer-events: none;
}
[data-motion-media] .media-play-toggle {
  display: none;
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 8;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #ffffff70;
  border-radius: 3px;
  color: #fff;
  background: #052631cf;
  backdrop-filter: blur(10px);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.3;
  cursor: pointer;
}
[data-motion-media].media-ready .media-play-toggle { display: inline-flex; }
[data-motion-media] .media-play-toggle:before { content: '▷'; font-size: 14px; }
[data-motion-media] .media-play-toggle[aria-pressed="true"]:before { content: 'Ⅱ'; }
[data-motion-media] .media-play-toggle:hover { border-color: #8be9ec; background: #073847; }
[data-motion-media] .media-play-toggle:focus-visible { outline: 3px solid #f1d875; outline-offset: 4px; }
.hero-art[data-motion-media] > .media-play-toggle { bottom: 55px; right: 23px; }
.focus-visual[data-motion-media] > .media-play-toggle { top: 22px; left: 22px; right: auto; bottom: auto; }
.motion-reduced [data-motion-media] video.motion-video { opacity: 0; transition: none; }
@media (max-width: 767px) {
  .hero-photo-frame > video.motion-video { object-position: center; }
  [data-motion-media] .media-play-toggle { right: 16px; bottom: 18px; font-size: 9px; min-height: 42px; }
  .hero-art[data-motion-media] > .media-play-toggle { right: 15px; bottom: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) [data-motion-media] video.motion-video { opacity: 0; transition: none; }
}