/* Load after the existing styles. First assets remain visible without JS.
   Images change once per visit, with no timer, animation or live announcement. */
.split-hero .hero-half.health-hero[data-hero-rotation="health"] {
  background-color: #f2f3f8;
  background-image: linear-gradient(90deg, rgba(242, 243, 248, .98) 0%, rgba(242, 243, 248, .95) 70%, rgba(242, 243, 248, .7) 100%), var(--hero-image, url('/next/editorial-assets/aqua.jpg'));
  background-position: center, var(--hero-position, 50% 50%);
  background-size: cover;
  background-repeat: no-repeat;
}

.split-hero .hero-half.team-hero[data-hero-rotation="team"] {
  background-color: #090080;
  background-image: linear-gradient(90deg, rgba(9, 0, 128, .92) 0%, rgba(9, 0, 128, .83) 70%, rgba(9, 0, 128, .68) 100%), var(--hero-image, url('/assets/quadball.jpg'));
  background-position: center, var(--hero-position, 50% 55%);
  background-size: cover;
  background-repeat: no-repeat;
}

.area-intro .feature-image img[data-hero-rotation] {
  object-fit: cover;
  object-position: var(--hero-position, 50% 50%);
}

@media (max-width: 760px) {
  .split-hero .hero-half.health-hero[data-hero-rotation="health"] {
    background-image: linear-gradient(90deg, rgba(242, 243, 248, .98) 0%, rgba(242, 243, 248, .94) 75%, rgba(242, 243, 248, .82) 100%), var(--hero-image, url('/next/editorial-assets/aqua.jpg'));
  }

  .split-hero .hero-half.team-hero[data-hero-rotation="team"] {
    background-image: linear-gradient(90deg, rgba(9, 0, 128, .94) 0%, rgba(9, 0, 128, .86) 75%, rgba(9, 0, 128, .76) 100%), var(--hero-image, url('/assets/quadball.jpg'));
  }
}