/* Home hero: looping background video (SPORTONOM intro) */
.hero-has-video { isolation: isolate; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #07111f;
}
.hero-media.is-static { background: #07111f var(--hero-poster) center / cover no-repeat; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
  transform: translateZ(0);
}
.hero-video.is-playing { opacity: 1; }
.hero-media.is-static .hero-video { display: none; }

/* Light readability layer: only the text side is darkened, so the video stays
   clearly visible on the right; soft top/bottom edges blend it into the page. */
.hero-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,17,31,.42) 0%, rgba(7,17,31,0) 22%, rgba(7,17,31,0) 74%, rgba(7,17,31,.82) 100%),
    linear-gradient(90deg, rgba(7,17,31,.74) 0%, rgba(7,17,31,.5) 50%, rgba(7,17,31,.18) 100%);
}

/* No floating sport emoji over the hero video */
.hero .fx-balls { display: none !important; }

/* Keep copy and the search bar crisp over moving footage */
.hero-has-video .hero-lede,
.hero-has-video .hero-trust { text-shadow: 0 1px 14px rgba(3,10,20,.65); }
.hero-has-video .search-panel {
  background: rgba(9,24,41,.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* Phones / portrait tablets: the portrait video fills the top part of the hero
   (text + search) and fades smoothly into the page colour below. */
@media (max-width: 991.98px) {
  .hero-media {
    bottom: auto;
    height: min(100%, 940px);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero-media.is-static { background-image: var(--hero-poster-m); }
  .hero-media-shade {
    background:
      linear-gradient(180deg, rgba(7,17,31,.56) 0%, rgba(7,17,31,.46) 40%, rgba(7,17,31,.56) 100%);
  }
  .hero-has-video .search-panel { background: rgba(9,24,41,.62); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { transition: none; }
}