.material-symbols-outlined {
    font-variation-settings:
        "FILL" 1,
        "wght" 200,
        "GRAD" 0,
        "opsz" 24;
}
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Manrope", sans-serif;
    background: #101415;
    timeline-scope: --main-scroll;
}
.font-newsreader {
    font-family: "Newsreader", serif;
}
/* Layer 1: Background Scroll Container */
#bg-scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 1;
    scroll-timeline: --main-scroll block;
}
#bg-scroll-container::-webkit-scrollbar {
    display: none;
}
.scroll-content-canvas {
    width: 100vw;
    min-height: 400vh;
    height: 179vw;
    position: relative;
    background-image: url(assets/background.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: local;
    background-color: #101415;
}
@media (orientation: portrait) {
    .scroll-content-canvas {
        background-position: center center;
    }
}
/* Snap points at the requested centers */
.snap-point {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    scroll-snap-align: center;
    pointer-events: none;
}
/* Layer 2: Fixed Foreground Text */
#foreground-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.content-section {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.glass-panel {
    background: rgba(28, 32, 33, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
}
/* Scroll-Driven Animations */
@supports (view-timeline: --t) {
    .content-section {
        view-timeline-name: --section-timeline;
        view-timeline-axis: block;
    }
    /* Section 1: Starts at center, slides out to left */
    @keyframes static-to-left {
        0%,
        70% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
        100% {
            transform: translateX(-100vw);
            opacity: 0;
            visibility: hidden;
        }
    }

    /* Section 4: Slides in from right, stays at center */
    @keyframes right-to-static {
        0% {
            transform: translateX(100vw);
            opacity: 0;
            visibility: hidden;
        }
        30%,
        100% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    @keyframes slide-left-return {
        0% {
            transform: translateX(-100vw);
            opacity: 0;
            visibility: hidden;
        }
        1%,
        99% {
            visibility: visible;
        }
        30%,
        70% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(-100vw);
            opacity: 0;
            visibility: hidden;
        }
    }

    @keyframes slide-right-return {
        0% {
            transform: translateX(100vw);
            opacity: 0;
            visibility: hidden;
        }
        1%,
        99% {
            visibility: visible;
        }
        30%,
        70% {
            transform: translateX(0);
            opacity: 1;
        }
        100% {
            transform: translateX(100vw);
            opacity: 0;
            visibility: hidden;
        }
    }

    .slide-left {
        animation: slide-left-return linear both;
        animation-timeline: --main-scroll;
    }
    .slide-right {
        animation: slide-right-return linear both;
        animation-timeline: --main-scroll;
    }
    .static-then-slide-left {
        animation: static-to-left linear both;
        animation-timeline: --main-scroll;
    }
    .slide-right-then-static {
        animation: right-to-static linear both;
        animation-timeline: --main-scroll;
    }

    #section-1,
    .in-section-1 {
        animation-range: 0% 25%;
    }
    #section-2,
    .in-section-2 {
        animation-range: 25% 50%;
    }
    #section-3,
    .in-section-3 {
        animation-range: 50% 75%;
    }
    #section-4,
    .in-section-4 {
        animation-range: 75% 100%;
    }
}
/* Fallback for browsers without Scroll-Driven Animations */
@media (prefers-reduced-motion: no-preference) {
    .content-section:not(:target) {
    }
}
header,
footer {
    pointer-events: auto;
}
@keyframes shake {
    10%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}
.animate-blocked {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    color: red !important;
}