/* =========================================================
   REMSTANDART — SHOWREEL V3
   STICKY SCENE + MASK CURTAINS
========================================================= */

.showreel-prelude {
    position: relative;
    z-index: 4;

    width: 100%;
    height: 70px;

    background: #1b1b1a;

    border-top: 1px solid rgba(255,255,255,.035);
    border-bottom: 1px solid rgba(255,255,255,.025);
}


/* Внешняя scroll-зона */
.showreel-scroll-shell {
    position: relative;

    height: calc(100svh + 1800px);

    background: #090909;
}


/* Сам showreel больше НЕ pin-ится GSAP.
   Он просто sticky внутри shell. */
#showreel.showreel-v3 {
    position: sticky !important;

    top: 0;

    z-index: 2;

    width: 100%;
    height: 100svh;
    min-height: 620px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #090909;

    isolation: isolate;
}


/* =========================================================
   VIDEO — ВСЕГДА СУЩЕСТВУЕТ FULLSCREEN
========================================================= */

#showreel.showreel-v3 .video-panel {
    position: absolute !important;

    inset: 0 !important;

    z-index: 2;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    overflow: hidden;

    clip-path: none !important;

    border-radius: 0 !important;

    transform: none !important;

    background: #111;
}


#showreel.showreel-v3 .video-panel video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.075);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;
}


/* =========================================================
   FOUR CURTAINS
========================================================= */

.showreel-mask {
    position: absolute;

    z-index: 5;

    background: #090909;

    pointer-events: none;

    will-change: transform;
}


.showreel-mask--left {
    left: 0;
    top: 0;
    bottom: 0;

    width: 4vw;

    transform-origin: left center;
}


.showreel-mask--right {
    right: 0;
    top: 0;
    bottom: 0;

    width: 69vw;

    transform-origin: right center;
}


.showreel-mask--top {
    left: 0;
    right: 0;
    top: 0;

    height: 11svh;

    transform-origin: center top;
}


.showreel-mask--bottom {
    left: 0;
    right: 0;
    bottom: 0;

    height: 11svh;

    transform-origin: center bottom;
}


/* =========================================================
   SHADE
========================================================= */

#showreel.showreel-v3 .video-panel__shade {
    position: absolute;

    inset: 0;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            rgba(3,3,3,.58) 0%,
            rgba(3,3,3,.29) 34%,
            rgba(3,3,3,.04) 70%,
            transparent 90%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.24),
            transparent 55%
        );

    pointer-events: none;
}


/* =========================================================
   TEXT — РОВНО ОДИН СЛОЙ
========================================================= */

#showreel.showreel-v3 > .section-intro {
    position: absolute !important;

    z-index: 8;

    left: 58vw;
    top: 50%;

    width: min(570px, 36vw);
    max-width: none;

    margin: 0;
    padding: 0;

    display: block;

    transform: translateY(-50%) !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: left, width, transform;
}


#showreel.showreel-v3 > .section-intro h2 {
    margin: 0;

    color: #f0ece4;

    text-shadow:
        0 4px 30px rgba(0,0,0,.38);
}


#showreel.showreel-v3 > .section-intro > p {
    max-width: 430px;

    margin: 30px 0 0;

    color: rgba(235,232,225,.66);

    line-height: 1.65;

    text-shadow:
        0 3px 20px rgba(0,0,0,.45);
}


#showreel.showreel-v3 .video-panel__label {
    z-index: 7;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {

    .showreel-prelude {
        height: 36px;
    }


    .showreel-scroll-shell {
        height: calc(100svh + 1150px);
    }


    #showreel.showreel-v3 {
        min-height: 100svh;
    }


    .showreel-mask--left {
        width: 4vw;
    }


    .showreel-mask--right {
        width: 53vw;
    }


    .showreel-mask--top,
    .showreel-mask--bottom {
        height: 15svh;
    }


    #showreel.showreel-v3 >
    .section-intro {

        left: 54vw;

        width: 40vw;
    }


    #showreel.showreel-v3 >
    .section-intro h2 {

        font-size:
            clamp(30px, 8.2vw, 40px)
            !important;

        line-height: .94 !important;

        letter-spacing: -.035em;
    }


    #showreel.showreel-v3 >
    .section-intro > p {

        display: none;
    }

}