/* ============================================================
   HERO LIGHTS · blurred streaks drifting right, forever
   Sits above the hero image, below the rules, cross, text and nav.
   ============================================================ */

:root {
  /* Figma's "Layer blur 53.8" is stored as stdDeviation 26.9, and CSS blur()
     takes stdDeviation too — so 26.9px here equals 53.8 in Figma. */
  --hero-lights-blur: 26.9px;
  --hero-lights-opacity: 1;
  --hero-lights-speed: 80s;
  --hero-lights-height: 120%;
}

/* Contain the overlay blend to the hero. Without this the layer would blend
   with whatever sits behind the section too, not just the hero image. */
.hero,
.wv-hero { isolation: isolate; }

/* No z-index: it must paint in DOM order — above .hero-bg (earlier sibling),
   below the thirds rules, cross and text (later siblings). Taller than the
   hero by design; the hero's own overflow:hidden does the cropping. */
.hero-lights {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((100% - var(--hero-lights-height)) / 2); /* centres the overflow */
  height: var(--hero-lights-height);
  pointer-events: none;
  mix-blend-mode: overlay;
  filter: blur(var(--hero-lights-blur));
  opacity: var(--hero-lights-opacity);
}

/* Four identical tiles, all in the same orientation. Sliding the track by
   exactly half its width lands on an identical arrangement, so the reset is
   invisible. -50% → 0 travels rightward. */
.hero-lights-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: hero-lights-drift var(--hero-lights-speed) linear infinite;
}

@keyframes hero-lights-drift {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.hero-lights-tile {
  display: block;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-lights-track { animation: none; }
}