/* Basic reset and dark theme for the body */
body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #121212;
    color: white;
    overscroll-behavior-y: none; /* Prevents "bounce" on scroll at the top/bottom on some browsers */
}

/* 
 * The main container that enables the scroll-snapping.
 * 1. It's the full height of the viewport.
 * 2. It allows vertical scrolling.
 * 3. It enforces mandatory snapping to the y-axis (vertical).
*/
.slideshow-container {
    height: 100vh;
    overflow-y: hidden; /* keep single-slide view until user starts */
    scroll-behavior: smooth;
}

/* New container for background elements */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place it behind the slide content */
}

.background-gif {
    opacity: 0; /* Hidden by default using opacity */
    visibility: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key property */
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s; /* Add fade transition */
}

/* A small animated indicator to prompt the user to scroll */
.scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite, fadeIn 1s ease-in;
    z-index: 10;
    text-align: center;
}

.scroll-indicator p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -15px);
    }
    60% {
        transform: translate(-50%, -5px);
    }
}

#start-button {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 10px 20px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 2rem;
    animation: fadeIn 1s ease-in;
}

#start-button:hover {
    background-color: white;
    color: black;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Each slide should take the full viewport and snap into place */
.slide {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem; /* Keep padding for content spacing */
    background-color: rgba(18, 18, 18, 0.75); /* Translucent background for readability */
    backdrop-filter: blur(10px); /* Optional: blur the background for a frosted glass effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    box-sizing: border-box;
    position: relative; /* This is the fix! */
}

.slide > div {
    max-width: 900px;
    text-align: center;
}

/* Make headings readable and responsive */
.slide h1 {
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    margin: 0 0 0.5rem 0;
}

.slide p {
    font-size: clamp(1rem, 2.3vw, 1.25rem);
    margin: 0;
    opacity: 0.95;
}

/* Hide audio elements visually (they're controlled programmatically) */
audio {
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Remove the opaque gradient backgrounds */
.slide {
    background: transparent;
}

#slide1 > div {
    background-color: rgba(18, 18, 18, 0.75);
    padding: 2rem;
    border-radius: 1rem;
}

/* Improve start button placement on the first slide */
#slide1 #start-button {
    margin-top: 1.5rem;
}

/* Hide scroll indicator on the last slide */
.slide:last-child .scroll-indicator {
    display: none;
}