/* Full-screen background slideshow for the login, forgot-password and password-reset pages.
   Replaces the Supersized jQuery plugin: same 3 images, each shown for 4s with a 1s cross-fade.
   Slide 1 is always visible underneath; slides 2 and 3 fade in on top of it in turn, so there is
   never a gap between images mid-fade. One full cycle is 15s (3 x 5s). */

body { height: 100%; } /* Kept from supersized.css */

.auth-background {
    position: fixed;
    inset: 0;
    z-index: -999;
    overflow: hidden;
    background: #111;
}

.auth-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

.auth-slide:nth-child(1) { background-image: url(../img/backgrounds/1.jpg); opacity: 1; }
.auth-slide:nth-child(2) { background-image: url(../img/backgrounds/2.jpg); animation: auth-slide-2 15s infinite; }
.auth-slide:nth-child(3) { background-image: url(../img/backgrounds/3.jpg); animation: auth-slide-3 15s infinite; }

/* 4s-5s fade in, hidden instantly at 10s (slide 3 is fully on top by then) */
@keyframes auth-slide-2 {
    0%, 26.667%    { opacity: 0; }
    33.333%, 66.666% { opacity: 1; }
    66.667%, 100%  { opacity: 0; }
}

/* 9s-10s fade in, 14s-15s fade out back to slide 1 */
@keyframes auth-slide-3 {
    0%, 60%        { opacity: 0; }
    66.667%, 93.333% { opacity: 1; }
    100%           { opacity: 0; }
}

/* Users who ask for reduced motion just see the first image */
@media (prefers-reduced-motion: reduce) {
    .auth-slide { animation: none !important; }
}