/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px){

    :root{
        --container-padding:24px;
        --header-height:64px;
    }

    .hero-scene{
        height:205vh;
    }

    .floating-poster{
        width:min(54vw, 540px);
        max-height:74vh;
    }

    .video{
        padding:
            110px
            var(--container-padding)
            130px;
    }

}


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

@media (max-width:767px){

    :root{
        --container-padding:16px;
        --header-height:58px;
        --radius-md:8px;
    }

    .header.scrolled{
        background:rgba(0,0,0,.34);

        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }

    .brand{
        gap:9px;
    }

    .brand img{
        width:27px;
        height:27px;
    }

    .instagram{
        width:38px;
        height:38px;
    }

    .instagram svg{
        width:20px;
        height:20px;
    }

    .hero-scene{
        height:200vh;
    }

    .hero-image{
        object-position:center center;
    }

    .poster-stage{
        padding:
            calc(var(--header-height) + 18px)
            12px
            28px;
    }

    .floating-poster{
        width:min(89vw, 510px);
        max-height:76svh;

        box-shadow:
            0 12px 26px rgba(0,0,0,.26),
            0 32px 80px rgba(0,0,0,.52);
    }

    .scroll-indicator{
        bottom:18px;
        height:42px;
    }

    .poster-rest{
        min-height:8vh;
    }

    .video{
        min-height:92svh;

        padding:
            72px
            var(--container-padding)
            96px;
    }

    .video-button{
        border-radius:var(--radius-md);
    }

    .play-icon svg{
        width:58px;
        height:58px;
    }

    .video-modal{
        padding:0;
    }

    .video-container{
        width:100%;
        border-radius:0;
    }

    .close-modal{
        top:14px;
        right:14px;

        width:44px;
        height:44px;

        background:rgba(0,0,0,.58);
    }

}


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

@media (max-width:420px){

    :root{
        --container-padding:12px;
    }

    .brand span{
        font-size:.82rem;
    }

    .brand img{
        width:25px;
        height:25px;
    }

    .instagram{
        width:36px;
        height:36px;
    }

    .floating-poster{
        width:92vw;
    }

    .video{
        padding:
            56px
            var(--container-padding)
            76px;
    }

    .play-icon svg{
        width:50px;
        height:50px;
    }

}


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

@media (max-height:540px) and (orientation:landscape){

    .hero-scene{
        height:225vh;
    }

    .floating-poster{
        width:auto;
        height:76vh;
        max-height:76vh;
    }

    .scroll-indicator{
        display:none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    .floating-poster{
        opacity:1;

        transform:
            translate3d(0, 0, 0)
            rotateZ(0)
            scale(1);
    }

}