.bg-noise {
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200vh;
    background: transparent url('../WEB-CONTENT/images/noise.png') repeat 0 0;
    opacity: 0.9;
    pointer-events: none;
    z-index: 10000;
    animation: bg-animation 0.2s infinite;
}

@keyframes bg-animation {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}


.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: none;
    opacity: 0;
    transition: opacity var(--transition-very-slow) ease;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    
    transform: translateZ(0); 
    backface-visibility: hidden;
}


.scroll-container.has-scroll-smooth {
    position: relative;
}


@media (max-width: 768px) {
    .scroll-container {
        
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
        
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-perspective: 1000;
        perspective: 1000;
        
        backface-visibility: hidden;
        touch-action: pan-y;
        
        contain: layout style paint;
    }
    
    
    .scroll-container.scrolling {
        scroll-behavior: auto !important;
    }
}

.scroll-container.visible {
    opacity: 1;
}


@media (min-width: 769px) {
    .scroll-container {
        mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.08) 12px,
            rgba(0, 0, 0, 0.25) 28px,
            black 48px,
            black calc(100% - 60px),
            rgba(0, 0, 0, 0.25) calc(100% - 40px),
            transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.08) 12px,
            rgba(0, 0, 0, 0.25) 28px,
            black 48px,
            black calc(100% - 60px),
            rgba(0, 0, 0, 0.25) calc(100% - 40px),
            transparent 100%);
    }
}


.scroll-container::-webkit-scrollbar,
.section-content::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0;
    display: none;
}

.scroll-container,
.section-content,
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}


html, body {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    display: none;
}