/*
 * Homepage natural-scroll experiment.
 *
 * Scope every override to body.home-natural-scroll so this file can stay
 * isolated from index.html and every other static page until promotion.
 */

html.home-natural-scroll-root {
    scroll-behavior: smooth;
    scroll-snap-type: none !important;
    overflow-x: hidden;
    overflow-y: auto;
}

body.home-natural-scroll {
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior-y: auto;
    touch-action: auto;
}

body.home-natural-scroll.home-scroll-locked {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

body.home-natural-scroll:not(.home-scroll-locked) {
    overflow-y: visible;
}

/* Ordinary homepage sections remain visually substantial without becoming
   forced scroll destinations. Content may grow beyond one viewport. */
body.home-natural-scroll .fullscreen-section:not(.home-natural-track) {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
}

body.home-natural-scroll #section-experience .section-inner {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
}

body.home-natural-scroll .home-mosaic-section {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
}

/* The two narrative sections use document height as an interaction track.
   Their visual stage stays pinned while normal browser scrolling continues. */
body.home-natural-scroll .home-natural-track {
    position: relative;
    height: 220vh !important;
    min-height: 1320px;
    overflow: visible;
}

body.home-natural-scroll .i2-equipment-section.home-natural-track {
    height: 240vh !important;
    min-height: 1440px;
}

body.home-natural-scroll .home-natural-stage {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

body.home-natural-scroll .home-natural-stage > .section-bg {
    position: absolute;
}

/* Welding stage: JavaScript writes these variables from native scroll
   progress. No wheel or keyboard event is captured. */
body.home-natural-scroll .welding-section {
    --natural-welding-top: 0%;
    --natural-welding-left: 0%;
    --natural-welding-width: 100%;
    --natural-welding-height: 100%;
    --natural-welding-radius: 0px;
    --natural-welding-feature-opacity: 0;
    --natural-welding-feature-y: 24px;
}

body.home-natural-scroll .welding-section .welding-bg {
    top: var(--natural-welding-top) !important;
    left: var(--natural-welding-left) !important;
    width: var(--natural-welding-width) !important;
    height: var(--natural-welding-height) !important;
    border-radius: var(--natural-welding-radius) !important;
    transition: none !important;
    will-change: top, left, width, height, border-radius;
}

body.home-natural-scroll .welding-section .welding-features {
    opacity: var(--natural-welding-feature-opacity) !important;
    transform: translateY(var(--natural-welding-feature-y)) !important;
    transition: none !important;
    will-change: opacity, transform;
}

body.home-natural-scroll .welding-section[data-welding-stage="0"] .welding-features {
    pointer-events: none;
}

body.home-natural-scroll .welding-section[data-welding-stage="1"] .welding-features {
    pointer-events: auto;
}

/* Equipment stage keeps the existing mask/scene visual language. The state
   classes are now driven by section progress instead of accumulated wheel
   deltas or hard-coded full-screen indexes. */
body.home-natural-scroll .i2-equipment-section .i2-mask-text {
    will-change: transform;
}

body.home-natural-scroll .i2-equipment-section .i2-equipment-mask,
body.home-natural-scroll .i2-equipment-section .i2-equipment-scene {
    transition: none !important;
    will-change: opacity;
}

/* Footer becomes part of the natural document flow. */
body.home-natural-scroll #section-footer.fullscreen-section {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    overflow: visible !important;
    overscroll-behavior: auto;
}

body.home-natural-scroll #section-footer .footer-layout-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible !important;
}

/* The legacy full-screen dots must never appear in the experiment, even if a
   cached script from the original homepage happens to execute. */
body.home-natural-scroll #section-dots {
    display: none !important;
}

@media (max-width: 768px) {
    html.home-natural-scroll-root {
        scroll-behavior: smooth;
    }

    body.home-natural-scroll .home-natural-track,
    body.home-natural-scroll .i2-equipment-section.home-natural-track {
        height: auto !important;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
    }

    body.home-natural-scroll .home-natural-stage {
        position: relative;
        top: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
    }

    body.home-natural-scroll .i2-equipment-section .home-natural-stage {
        height: 100vh;
        height: 100svh;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.home-natural-scroll-root {
        scroll-behavior: auto;
    }

    body.home-natural-scroll .welding-section .welding-bg,
    body.home-natural-scroll .welding-section .welding-features,
    body.home-natural-scroll .i2-equipment-mask,
    body.home-natural-scroll .i2-equipment-scene {
        transition: none !important;
        animation-duration: 1ms !important;
    }
}