/* style.css - Final Optimized Version */

/* 1. Reset and Full-Screen Lockdown */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000; /* Keeps screen black during transitions */
}

/* 2. Slider Container */
.slider-container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Base Image Styling (Widescreen/Default) */
.slider-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Ensure image occupies the area without distortion */
    width: 100%;
    height: 100%;
    
    /* DEFAULT: Show the whole image (letterboxing on 4:3) */
    object-fit: contain; 
    
    /* Transition Logic */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

/* 4. Active Image State (The one fading in) */
.slider-container img.active {
    opacity: 1;
    z-index: 2; /* Ensures the new image appears over the old one */
}

/* 5. 4:3 Monitor Specific Logic */
/* If the screen is square-ish (like 1024x768), 
   we switch to 'cover' to eliminate black bars. */
@media (max-aspect-ratio: 4/3) {
    .slider-container img {
        object-fit: cover;
    }
}

/* 6. Utility Class (Matches index.php) */
.responsive-screensaver-image {
    display: block;
}