.hero {
  /* Pacific / California hero tokens */
  --sky-0:   #F5FBFF;
  --sky-1:   #EAF6FF;
  --sky-2:   #BFE8F7;
  --water-1: #79CFEF;
  --water-2: #2A78A6;

  .hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;

    /* IMPORTANT: put gradient BEHIND the image */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background:
        radial-gradient(
          900px 600px at 18% 12%,
          rgba(255, 255, 255, 0.85) 0%,
          rgba(255, 255, 255, 0.00) 62%
        ),
        linear-gradient(
          180deg,
          var(--sky-0) 0%,
          var(--sky-1) 28%,
          var(--sky-2) 52%,
          var(--water-1) 76%,
          var(--water-2) 100%
        );

      /* subtle “ocean shimmer” motion without bleaching anything */
      background-size: 120% 120%, 180% 180%;
      background-position: 50% 40%, 50% 50%;
      animation: heroPacificDrift 34s ease-in-out infinite;
    }

    /* Your art stays crisp on top */
    picture,
    img {
      position: relative;
      z-index: 1;
    }

    /* Ditch the overlay entirely (even if the element remains in HTML) */
    .overlay {
      display: none !important;
    }
  }
}



@keyframes heroPacificDrift {
  0%   { background-position: 50% 40%, 45% 55%; }
  50%  { background-position: 56% 44%, 62% 42%; }
  100% { background-position: 50% 40%, 45% 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-background::before { animation: none !important; }
}