/* Hero background slideshow — see js/static-site-hero.js.
 *
 * Deliberately does NOT restyle Swiper's own slide elements. Reusing them
 * worked above 1024px and broke below it, where the slides stopped painting at
 * Elementor's tablet breakpoint. These class names are unique to this file, so
 * nothing in the exported Elementor or Swiper stylesheets can reach them and
 * the hero behaves identically at every width.
 *
 * Both rules only apply once the script has run, so a visitor without JS keeps
 * the original static hero rather than an empty band.
 */

/* The original Swiper markup stays in the DOM but stops rendering. */
.bb-hero-source-hidden {
  display: none !important;
}

.bb-hero-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Behind the section's dark overlay and all of its content, so text contrast
     and layering are exactly as they were. */
  z-index: 0;
  pointer-events: none;
}

.bb-hero-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  /* Long, symmetrical crossfade. The photos share a warm palette, so a slow
     dissolve reads as one continuous scene rather than frames clicking past. */
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}

.bb-hero-layer.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bb-hero-layer {
    transition: none;
  }
}