/* Per-box background slideshow with crossfade */
.box-bg {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.box-bg .slide {
  position: absolute;
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: brightness(0.25) blur(14px);
  transition: opacity 900ms ease-in-out, transform 1200ms ease-out, filter 900ms ease-in-out;
  transform: scale(1.04);
}
.box-bg .slide.is-active {
  opacity: 1;
  transform: scale(1);
  filter: brightness(0.5) blur(0px);
}

/* Box content sits above background slides */
.box-content {
  position: relative;
  z-index: 1;
}

/* Ensure boxes are positioned to anchor absolute background */
.box-1, .box-2, .box-3 {
  position: relative;
  overflow: hidden;
  background: #000; /* page background remains black under boxes */
}

/* Overlay removed to avoid double-darkening; brightness(0.5) is applied above */

/* Optional: per-box tuning (you can tweak sizes/positions) */
.box-1 .box-bg .slide { background-position: center top; }
.box-2 .box-bg .slide { background-position: center; }
.box-3 .box-bg .slide { background-position: center bottom; }