/*
|--------------------------------------------------------------------------
| HERO — BACKGROUND IMAGE SLIDESHOW (2026-10-12)
|--------------------------------------------------------------------------
| Loaded ONLY when a Hero plays a background slideshow
| (heroBgSlideshowAssets(), section_helpers.php). Markup, written by the
| universal partial (web/partials/hero.php, full_bleed):
|
|   .hero-slide__bg.hero-bgshow[data-hero-bgshow]   <- carries the first image
|     .hero-bgshow__layer.is-active                 <- first image
|     .hero-bgshow__layer[data-src]                 <- later images, not loaded yet
|
| Only these layers change. The Hero's content (.hero-overlay) is a sibling
| of .hero-slide__bg and is never touched: one title, one set of buttons.
|
| Without this file or without the script, the layers have no size and the
| first image on .hero-slide__bg is what shows — the static fallback.
|
| Crossfade without a dip: the incoming layer fades in ON TOP of the
| outgoing one, which stays fully visible underneath until the fade ends.
|--------------------------------------------------------------------------
*/

.hero-industrial .hero-bgshow {
  overflow: hidden;
}

.hero-bgshow__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: none;
  backface-visibility: hidden;
}

.hero-bgshow__layer.is-prev {
  z-index: 1;
  opacity: 1;
}

.hero-bgshow__layer.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity var(--hero-bgshow-transition, 1200ms) ease-in-out;
}

/* The first layer is already the picture on screen: nothing to fade in. */
.hero-bgshow:not(.is-running) .hero-bgshow__layer.is-active {
  transition: none;
}

/* Optional slow zoom. The animation runs on the visible layer and keeps
   running while that layer waits underneath the next one, so it never
   snaps back mid-fade. */
.hero-bgshow--kenburns.is-running .hero-bgshow__layer.is-active,
.hero-bgshow--kenburns.is-running .hero-bgshow__layer.is-prev {
  animation: hero-bgshow-zoom var(--hero-bgshow-zoom, 9000ms) linear both;
  will-change: transform;
}

@keyframes hero-bgshow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Reduced motion: the first image, still. The script does not start either. */
@media (prefers-reduced-motion: reduce) {
  .hero-bgshow__layer,
  .hero-bgshow__layer.is-active {
    transition: none;
    animation: none !important;
  }
}