/* public/page-studio-assets/runtimes/shared/background-slideshow.css
 *
 * Structural CSS for the runtime-injected Swiper DOM inside
 * [data-ps-bg-layer="slideshow"]. Swiper's own core CSS is loaded from
 * the vendor bundle; this file only:
 *
 *   1. makes the layer a valid Swiper container (overflow hidden,
 *      preserved positioning), and
 *   2. makes each injected .swiper-slide fill the container without
 *      depending on Swiper's default 100%-of-viewport sizing.
 *
 * Every selector is gated on .ps-bg-slides-swiper so this file is a
 * strict no-op when no slideshow runtime has initialised. Safe to load
 * unconditionally on every component that composes `background`.
 */

.ps-bg-slides-swiper {
  overflow: hidden;
}

.ps-bg-slides-swiper .swiper-wrapper {
  width:  100%;
  height: 100%;
  display: flex;
}

.ps-bg-slides-swiper .swiper-slide {
  width:              100%;
  height:             100%;
  flex-shrink:        0;
  background-size:    cover;
  background-position: center;
  background-repeat:  no-repeat;
}

/* Fade transition — Swiper stacks slides in absolute position when
   effect: 'fade' is active. The cross-fade option keeps the outgoing
   slide fully opaque until the incoming one is fully faded in. */
.ps-bg-slides-swiper.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

/* Reduced motion — never animate a background slideshow when the
   visitor has asked for less motion. Static first frame only. */
@media (prefers-reduced-motion: reduce) {
  .ps-bg-slides-swiper .swiper-slide {
    transition: none !important;
    animation:  none !important;
  }
}