#motion {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0b0e0a url('/media/fitness-poster.jpg') center 45% / cover no-repeat;
  isolation: isolate;
}

#motion video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
  filter: brightness(.95);
}

#motion video.visible { opacity: 1; }

#motion::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, #060b08a6 0%, #080d09b3 45%, #080d09eb 100%),
    linear-gradient(90deg, #060b0859, transparent 50%, #060b0859);
}

.footage-credits a { color: var(--muted); text-underline-offset: 3px; }
.footage-credits summary { cursor: pointer; padding: 8px 0; }
.footage-credits p { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  #motion video { display: none; transition: none; }
}