/* 1. Reset and Center Page Layout */
body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    min-height: 100vh;
}

/* 2. The Slider Window Frame */
.slider-frame {
    width: 400px;
    /* height: 450px; */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hides images sitting outside the viewport frame */
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
    background-color: #000; /* Black background to dissolve into */
}

/* 3. The Continuous Moving Strip Container */
.slide-strip {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 600%; /* Space allocation: 100% multiplied by 6 total slides */
    height: 100%;
    animation: automatic-slide 24s infinite; /* 24s total (4s window runtime per slide) */
}

/* 4. Formatting Individual Slides */
.slide-strip img {
    width: calc(100% / 6); /* Space allocation: 100% split evenly among 6 images */
    height: 100%;
    object-fit: cover; /* Prevents distortion if image dimensions differ */
}

/* 5. Keyframes configuration for a 6-image cycle with end fade */
@keyframes automatic-slide {
    /* Slide 1 Focus Time */
    0%, 12% { margin-left: 0%; opacity: 1; }

    /* Shift to Slide 2 */
    16.66%, 28.66% { margin-left: -100%; opacity: 1; }

    /* Shift to Slide 3 */
    33.33%, 45.33% { margin-left: -200%; opacity: 1; }

    /* Shift to Slide 4 */
    50%, 62% { margin-left: -300%; opacity: 1; }

    /* Shift to Slide 5 */
    66.66%, 78.66% { margin-left: -400%; opacity: 1; }

    /* Slide 6 Focus Time */
    83.33%, 93% { margin-left: -500%; opacity: 1; }

    /* Dissolve out to Black on Slide 6 */
    96% { margin-left: -500%; opacity: 0; }

    /* Reset position while fully hidden/invisible */
    96.01% { margin-left: 0%; opacity: 0; }

    /* Fade back in to Slide 1 */
    100% { margin-left: 0%; opacity: 1; }
}