html:has(#scroll-container),
body:has(#scroll-container) {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

#scroll-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
    transition: none !important;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
}

#scroll-container::-webkit-scrollbar {
    display: none;
}


body.admin-bar #scroll-container {
    top: 32px !important;
    height: calc(100dvh - 32px) !important;
}

body.admin-bar #scroll-container > .panel {
    height: calc(100dvh - 32px) !important;
    min-height: calc(100dvh - 32px) !important;
}

#scroll-container > .panel {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 100%;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    isolation: isolate;
}


#panel-who #parallax-who,
#panel-secret .secret-bg,
#panel-blog .blog-bg {
    transform: translate3d(0, calc(var(--cw-depth, 0) * 1px), 0)
        scale(1.035);
    transform-origin: center;
    will-change: transform;
}

#panel-who #parallax-who {
    transition: transform 80ms linear;
}

#scroll-container.is-native-scrolling .panel-active .panel-anim {
    will-change: transform, opacity;
}


@media (min-width: 769px) and (max-height: 900px) {
    #panel-who .who-text-side {
        padding-top: clamp(28px, 5vh, 52px);
        padding-bottom: clamp(28px, 5vh, 52px);
    }

    #panel-who .who-overline {
        margin-bottom: clamp(12px, 2.2vh, 20px);
    }

    #panel-who .who-title {
        font-size: clamp(48px, 6.2vw, 88px);
        margin-bottom: clamp(18px, 3vh, 28px);
    }

    #panel-who .who-body {
        line-height: 1.65;
        margin-bottom: clamp(20px, 3.5vh, 34px);
    }

    #panel-who .who-stats {
        margin-top: clamp(22px, 4vh, 38px);
        padding-top: clamp(18px, 3vh, 28px);
    }
}

@media (max-width: 1024px) {
    #scroll-container {
        scroll-snap-type: y proximity;
    }

    #scroll-container > .panel {
        min-height: 100svh !important;
    }
}

/* Mobile: panels grow with their content so nothing is clipped and no inner
   scroller can trap the swipe. The container remains the scroll box, keeping
   the dots, progress bar and parallax logic in hub-scroll.js working. */
@media (max-width: 768px) {
    #scroll-container {
        scroll-snap-type: none;
    }

    #scroll-container > .panel {
        height: auto !important;
        min-height: 100svh !important;
    }

    #scroll-container > .panel > [class*="-content"] {
        overflow-y: visible !important;
    }

    /* Panels can exceed the viewport here, so several are partially visible at
       once. Reveal-on-active animations would hide text mid-read whenever the
       observer switches the active panel; keep every panel's copy stable. */
    .panel-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media screen and (max-width: 782px) {
    body.admin-bar #scroll-container {
        top: 46px !important;
        height: calc(100dvh - 46px) !important;
    }

    body.admin-bar #scroll-container > .panel {
        height: calc(100dvh - 46px) !important;
        min-height: calc(100dvh - 46px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #scroll-container {
        scroll-behavior: auto;
        scroll-snap-type: y proximity;
    }

    #scroll-container *,
    #scroll-container *::before,
    #scroll-container *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #panel-who #parallax-who,
    #panel-secret .secret-bg,
    #panel-blog .blog-bg {
        transform: none !important;
    }
}