/*
 * Slideshow background transitions (FF1, 2026-06-22)
 * ==================================================
 * Cross-slide transitions for the slideshow background type. The render
 * (_render_background.html) toggles `.is-active` on one slide at a time; these
 * rules drive how the entering/leaving slide animates.
 *
 *   fade  (default) — opacity only
 *   slide           — translateX glide + fade
 *   zoom            — scale + fade (Ken-Burns-ish)
 *   flip            — rotateY + fade
 *
 * All motion is transform + opacity ONLY (GPU-safe). Under
 * `prefers-reduced-motion: reduce` every transform collapses to a plain
 * opacity cut/fade (vestibular safety — matches the SSB public motion
 * convention). Fade is also the no-JS fallback: with JS off the first slide
 * carries `.is-active` and is fully visible.
 */

.slideshow-slide {
    opacity: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 600ms var(--ease-premium, cubic-bezier(0.32, 0.72, 0, 1)),
        transform 600ms var(--ease-premium, cubic-bezier(0.32, 0.72, 0, 1));
    will-change: opacity, transform;
}

.slideshow-slide.is-active {
    opacity: 1;
    transform: none;
}

/* Fade (default): opacity only — no transform offset on the resting slides. */
.slideshow--fade .slideshow-slide {
    transform: none;
}

/* Slide: the inactive slide rests offset to the right and glides in. */
.slideshow--slide .slideshow-slide {
    transform: translateX(8%);
}

/* Zoom: the inactive slide rests scaled-up and settles in. */
.slideshow--zoom .slideshow-slide {
    transform: scale(1.08);
}

/* Flip: the inactive slide rests rotated on the Y axis. */
.slideshow--flip {
    perspective: 1400px;
}

.slideshow--flip .slideshow-slide {
    transform: rotateY(12deg);
    backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .slideshow-slide,
    .slideshow--slide .slideshow-slide,
    .slideshow--zoom .slideshow-slide,
    .slideshow--flip .slideshow-slide {
        transform: none !important;
        transition: opacity 300ms ease-in-out;
    }
}