/* =========================================================
   BASE
========================================================= */

html,
body{
    margin:0;
    padding:0;
    height:100%;
    background:#000;
    overflow:hidden;
}


/* =========================================================
   CAMERA RIG
========================================================= */

@keyframes camera-drift{
    0%{
        transform:
            scale(var(--s1))
            translate3d(var(--x1),var(--y1),0)
            rotate(var(--r1));
    }
    50%{
        transform:
            scale(var(--s2))
            translate3d(var(--x2),var(--y2),0)
            rotate(var(--r2));
    }
    100%{
        transform:
            scale(var(--s3))
            translate3d(var(--x3),var(--y3),0)
            rotate(var(--r3));
    }
}

.mainSwiper .swiper-slide img.is-animating{
    animation:
        camera-drift
        var(--duration,10s)
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.mainSwiper .swiper-slide::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:var(--z-overlay);
    pointer-events:none;
    background:
        radial-gradient(
            circle at var(--vignette-x,50%)
            var(--vignette-y,60%),
            rgba(0,0,0,.04),
            rgba(0,0,0,.82)
        );
}


/* =========================================================
   FOG
========================================================= */

.fog-layer{
    position:absolute;
    inset:-10%;
    z-index:var(--z-overlay);
    pointer-events:none;
    opacity:.18;
    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(255,255,255,.16),
            transparent 45%
        ),
        radial-gradient(
            circle at 70% 40%,
            rgba(255,255,255,.10),
            transparent 40%
        );
    transform:
        translate3d(0,0,0)
        scale(1.08);
    will-change:
        transform,
        opacity;
    animation:
        fogMove 22s ease-in-out infinite alternate;
}

.fog-layer::before{
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    opacity:.6;
    transform:scale(1.4);
    mix-blend-mode:screen;
}

@keyframes fogMove{
    0%{
        transform:
            translate3d(-2%,0,0)
            scale(1.05);
    }
    100%{
        transform:
            translate3d(2%,1%,0)
            scale(1.1);
    }
}


/* =========================================================
   CONTENT
========================================================= */

.swiper-content{
    position:absolute;
    left:8%;
    bottom:10%;
    z-index:var(--z-content);
    max-width:1000px;
    color:#fff;
}


/* =========================================================
   PARALLAX TEXT
========================================================= */

.parallax-title,
.parallax-text{
    opacity:0;
    will-change:
        transform,
        opacity;
}

.parallax-title{
    transform:
        translate3d(0,220px,0)
        scale(1.12);
    transition:
        transform 2.2s cubic-bezier(.19,1,.22,1),
        opacity 1.4s ease;
}

.parallax-text{
    transform:
        translate3d(0,160px,0)
        scale(1.03);
    transition:
        transform 2.8s cubic-bezier(.19,1,.22,1),
        opacity 2s ease;
}


/* =========================================================
   ACTIVE TEXT
========================================================= */

.swiper-slide-active .parallax-title,
.swiper-slide-active .parallax-text{
    opacity:1;
    transform:
        translate3d(0,0,0)
        scale(1);
}

.swiper-slide-active .parallax-title{
    transition-delay:.22s;
}

.swiper-slide-active .parallax-text{
    transition-delay:.58s;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.swiper-content h2{
    margin:0 0 28px;
    font-size:
        clamp(64px,7vw,120px);
    line-height:.9;
    letter-spacing:-0.05em;
    font-weight:700;
}

.swiper-content p{
    margin:0;
    font-size:
        clamp(18px,1.5vw,28px);
    line-height:1.45;
    opacity:.92;
}


/* =========================================================
   VIDEO
========================================================= */

.video-slide{
    background:#000;
}

.video-poster{
    position:absolute;
    inset:0;
    z-index:var(--z-bg);
    transition:
        opacity .8s ease,
        transform 8s ease;
}

.video-overlay{
    position:absolute;
    inset:0;
    z-index:var(--z-overlay);
    pointer-events:none;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.12)
        );
}

.video-frame{
    position:absolute;
    inset:0;
    z-index:var(--z-content);
    opacity:0;
    visibility:hidden;
    transition:
        opacity .8s ease;
}

.video-frame iframe{
    width:100%;
    height:100%;
    border:0;
}


/* =========================================================
   VIDEO ACTIVE
========================================================= */

.video-slide.video-active .video-frame{
    opacity:1;
    visibility:visible;
}

.video-slide.video-active .video-poster{
    opacity:0;
    transform:
        scale(1.08);
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.video-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:
        translate(-50%,-50%);
    z-index:var(--z-ui);
    width:110px;
    height:110px;
    border:none;
    border-radius:999px;
    background:
        rgba(255,255,255,.14);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:34px;
    cursor:pointer;
    transition:
        transform .45s ease,
        background .45s ease,
        opacity .45s ease;
}

.video-play .gb-shape{
    position:absolute;
    left:33%;
    top:27%;
}

.video-slide.video-active .video-play{
    opacity:0;
    pointer-events:none;
}

@media (hover:hover){
    .video-play:hover{
        transform:
            translate(-50%,-50%)
            scale(1.08);
        background:
            rgba(255,255,255,.22);
    }
}