:root {
    /* Unified spacing scale (used across snap sections) */
    --space-section-y: clamp(1.25rem, 4vh, 3rem);
    --space-section-x: clamp(1rem, 4vw, 3rem);
    --space-block: clamp(1rem, 2.5vh, 2rem);
    --space-tight: clamp(0.5rem, 1.5vh, 1rem);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.snap-container {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Hint compositor: this is the scroll surface */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

.snap-container::-webkit-scrollbar {
    display: none;
}

.about-section {
    position: relative;
    z-index: 50;
    background: transparent;
    isolation: isolate;
    overflow: visible !important;
}

/* Character Slider Styles */
.character-slider-section {
    position: relative;
    min-height: 100vh;
    background: #000; /* Fallback background */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    z-index: 1;
    width: 100vw;
}

.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Hero Container */
.hero-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    margin-top: 0;
    padding-top: 0;
    z-index: 1;
}

@media (max-width: 991px) {
    .hero-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        overflow: hidden;
    }

    .character-slider-section {
        width: 100vw;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .character-slider-section {
        min-height: 100vh;
        background: transparent;
    }

    .hero-container {
        height: 60vh;
    }

    #scrollToAboutBtn {
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: 5vh;
        transform: translateX(-50%);
        z-index: 10;
    }
}

@media (max-width: 480px) {
    .character-slider-section {
        background: transparent;
    }

    .hero-container {
        height: 50vh;
    }

    #scrollToAboutBtn {
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: 3vh;
        transform: translateX(-50%);
        z-index: 10;
    }
}