/* 3D Scroll Section */

@font-face {
    font-family: 'Scroll3DFont';
    src: url('../assets/fonts/Onset/Onest-Thin.woff2') format('woff2'),
         url('../assets/fonts/Onset/Onest-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Scroll3DFont';
    src: url('../assets/fonts/Onset/Onest-Light.woff2') format('woff2'),
         url('../assets/fonts/Onset/Onest-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

/* Секция занимает ровно один экран — прокрутка внутри управляется JS */
.scroll3d-section {
    height: 100vh;
    position: relative;
    margin-left: calc(-50vw + 50%);
    width: 100vw;
    isolation: isolate;
}

.scroll3d-sticky {
    --index: calc(1vw + 1vh);
    --gutter: 30px;
    --side-small: 26;
    --side-big: 36;
    --transition: .75s cubic-bezier(.075, .5, 0, 1);

    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    perspective: 1500px;
    background: #2c2c2c;
}

.scroll3d-progress-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 550;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.scroll3d-progress-bar.visible {
    opacity: 1;
}

.scroll3d-progress-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.85);
    transition: width 0.1s linear;
}



.scroll3d-gallery {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
}

.scroll3d-frame {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition), opacity .75s ease;
    will-change: transform;
    transform-style: preserve-3d;
    color: #fff;
    font-family: 'Scroll3DFont', sans-serif;
    font-weight: 300;
    line-height: 1.75;
}

.scroll3d-frame_bg {
    background-color: rgb(44 44 44 / .87);
}

.scroll3d-frame__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll3d-media {
    position: relative;
    width: calc(var(--index) * var(--side-small));
    height: calc(var(--index) * var(--side-big));
    background-position: center;
    background-size: cover;
}

.scroll3d-media_left {
    right: calc(var(--side-small) / 2 * var(--index) + var(--gutter));
}

.scroll3d-media_right {
    left: calc(var(--side-small) / 2 * var(--index) + var(--gutter));
}

.scroll3d-frame h2 {
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    font-size: calc(var(--index) * 3.3);
    width: min-content;
}

.scroll3d-frame h3 {
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1;
    font-size: calc(var(--index) * 3);
    width: max-content;
}

.scroll3d-frame p {
    max-width: 30vw;
    margin-top: 3vh;
    line-height: 1.75;
    font-size: calc(var(--index) * .8);
    font-weight: 300;
}

.scroll3d-text-right > * {
    position: relative;
    left: 24vw;
}

.scroll3d-text-left > * {
    position: relative;
    right: 18vw;
}

.scroll3d-text-block {
    display: flex;
    flex-direction: column;
}

/* Mobile */
@media (max-width: 768px) {
    .scroll3d-section {
        height: 100vh;
    }

    .scroll3d-sticky {
        --side-small: 18;
        --side-big: 26;
        --gutter: 15px;
    }

    .scroll3d-frame h2 { font-size: calc(var(--index) * 2.8); }
    .scroll3d-frame h3 { font-size: calc(var(--index) * 2.4); }
    .scroll3d-frame p  { max-width: 78vw; font-size: 13px; }

    .scroll3d-text-right > * { left: 4vw; }
    .scroll3d-text-left > *  { right: 4vw; }
}

@media (max-width: 480px) {
    .scroll3d-section {
        height: 100vh;
    }

    .scroll3d-sticky {
        --side-small: 14;
        --side-big: 20;
        --gutter: 10px;
    }

    .scroll3d-frame h2 { font-size: calc(var(--index) * 2.4); }
    .scroll3d-frame h3 { font-size: calc(var(--index) * 2); }
}