/* Looping background video under a dark scrim, shared by the homepage hero
   and the /padel hero. The host wears .video-hero and sets only its poster
   as background-image: it shows through the transparent video until the
   first frame arrives, and stands in for the video under
   prefers-reduced-motion. Longhands, not the shorthand, so this file does
   not reset a poster set by a stylesheet loaded before it. */
.video-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--brand-deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* White copy on the scrim takes this shadow. */
  --hero-text-shadow: 0 2px 24px color-mix(in srgb, var(--dark) 45%, transparent);
}

/* Fills the host edge to edge and sits under the scrim. The host is
   isolated, so the negative z-indexes stay inside it. */
.video-hero > .hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Scrim between the video and the copy. The footage is a busy mid-tone
   scene, so the text goes white and the scrim carries the contrast: a
   brand-tinted dark wash overall, heaviest behind the centred copy. */
.video-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(90% 70% at 50% 50%, rgba(12, 10, 29, 0.55) 0%, rgba(12, 10, 29, 0.35) 55%, rgba(12, 10, 29, 0) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 55%, transparent) 0%, color-mix(in srgb, var(--dark) 40%, transparent) 100%);
}

/* The loop is decorative motion: leave the host's poster in its place. */
@media (prefers-reduced-motion: reduce) {
  .video-hero > .hero-video { display: none; }
}