/* Keep the sports composition; avoid repeatedly filtering large surfaces. */
.header.is-scrolled {
  background: #080808f5;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.header nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.format-badge {
  background: #080808c9;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
dialog::backdrop {
  background: #000c;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-athlete { filter: none; }

/* Each animated face owns only its strip, sharing the same poster framing. */
.portrait {
  inset: 0 auto auto;
  left: var(--start);
  width: calc(var(--end) - var(--start));
  height: 100%;
  clip-path: none;
  overflow: hidden;
}
.portrait img {
  position: absolute;
  top: 0;
  left: var(--image-left, 0px);
  width: var(--poster-width, 100%);
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: none;
}

/* The same rough grain, baked once rather than calculated by an SVG filter. */
.orb::after {
  background-image: url('assets/grain.png');
  background-size: 116px 116px;
  mix-blend-mode: soft-light;
  filter: none;
  opacity: .78;
}

/* A completed reveal needs no nested identity 3D surface. */
.motion-ready .motion-heading.is-visible .motion-line-inner {
  transform: none;
  backface-visibility: visible;
}

.athlete-wrap,
.orb,
.manifesto-image,
.portrait { will-change: auto; }
.scene-in-view .athlete-wrap,
.scene-in-view .orb,
.scene-in-view .manifesto-image,
.scene-in-view .portrait { will-change: transform; }
.motion-paused .athlete-wrap,
.motion-paused .orb,
.motion-paused .manifesto-image,
.motion-paused .portrait,
.motion-suspended .athlete-wrap,
.motion-suspended .orb,
.motion-suspended .manifesto-image,
.motion-suspended .portrait,
.motion-background .athlete-wrap,
.motion-background .orb,
.motion-background .manifesto-image,
.motion-background .portrait { will-change: auto; }
.motion-suspended *,
.motion-suspended *::before,
.motion-suspended *::after,
.motion-background *,
.motion-background *::before,
.motion-background *::after { animation-play-state: paused !important; }

@media (max-width: 760px) {
  .header nav { background: #10100ffb; }
}
@media (prefers-reduced-motion: reduce) {
  .athlete-wrap,
  .orb,
  .manifesto-image,
  .portrait { will-change: auto; }
}