/** @format */

/**
 * Slide.css - Carousel & Slide Animation Styles
 * 
 * CSS for slide transitions, carousel containers, and fade animations.
 * Used exclusively by Leaderboard mode for slide rotation.
 * 
 * Dependencies: Engine_Slide.js
 * Load order: After IP.css, only in leaderboard.html
 */

/* ── Slide Container ────────────────────────────────────────────────────────── */

.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
}

/* ── Slide Visibility ───────────────────────────────────────────────────────── */

/* Hide slides by default (managed by Engine_Slide.js) */
.mySlides {
    display: none;
}

.Hide {
    display: none !important;
}

/* ── Fade Animation (Fade In/Out) ───────────────────────────────────────────── */
/* Applied dynamically by Engine_Slide.js when transitioning between slides */

.Fade {
    animation: FadeIn 0.75s ease-in-out;
    -webkit-animation: FadeIn 0.75s ease-in-out;
}

/* Fade In: 0% opacity → 100% opacity */
@keyframes FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade Out: When Fade class is removed, element returns to normal state */
/* Engine_Slide.js handles this by removing the Fade class before hiding */

/* ── Slide Presentation Container ───────────────────────────────────────────── */
/* Container for individual slide images fetched from secure API endpoint */

.SlideContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.SlideImage {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Ensure slide images respect DataWindow container */
.DataWindow .SlideContainer {
    margin: 0;
    padding: 0;
}