* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html,
body {

    width:100%;
    height:100%;

    overflow-x:hidden;

}

a {
    color: white;
    text-decoration: none;
}

body {

    background:#000;

    color:#fff;

    font-family:
    Helvetica,
    Arial,
    sans-serif;

    height:1800dvh;

}





/* =========================
   PANELS
========================= */


.panel {

    position:fixed;

    top:0;

    left:0;


    width:100%;


    height:100dvh;


    overflow:hidden;



    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;



    border-bottom:
    12px solid rgba(69,41,28,1);



    box-shadow:
    0 20px 60px rgba(0,0,0,.8);



    will-change:transform;


    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}






.panel::after {

    content:"";


    position:absolute;


    left:0;


    bottom:-50px;


    width:100%;


    height:50px;



    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.35),
        transparent
    );

}







/* =========================
   PANEL POSITIONS
========================= */


.panel-01 {

    background-image:
    url("images/section1.webp");


    z-index:1;


    transform:
    translateY(0);

}



.panel-02 {


    z-index:2;


    transform:
    translateY(-100%);

}




.panel-03 {

    background-image:
    url("images/section3.webp");


    z-index:3;


    transform:
    translateY(-100%);

}




.panel-04 {


    z-index:4;


    transform:
    translateY(-100%);

}




.panel-05 {

    background-image:
    url("images/section5.webp");


    z-index:5;


    transform:
    translateY(-100%);

}




.panel-06 {

    background-image:
    url("images/section6.webp");


    z-index:6;


    transform:
    translateY(-100%);

}




.panel-07 {

    background-image:
    url("images/section7.webp");


    z-index:7;


    transform:
    translateY(-100%);

}




.panel-08 {

    background-image:
    url("images/section8.webp");


    z-index:8;


    transform:
    translateY(-100%);

}




.panel-09 {

    background-image:
    url("images/section9.webp");


    z-index:9;


    transform:
    translateY(-100%);

}




.panel-10 {


    z-index:10;


    transform:
    translateY(-100%);

}







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


.panel-content {

    position:absolute;


    inset:0;


    z-index:5;



    display:flex;


    justify-content:center;


    align-items:center;

}




.panel-image {

    width:100px;


    height:auto;


    will-change:transform;

}







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


.video-frame {

    position:absolute;


    inset:0;


    overflow:hidden;


    z-index:1;



    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;

}





/* Poster fallback images */


.panel-02 .video-frame {

    background-image:
    url("images/section2.webp");

}



.panel-04 .video-frame {

    background-image:
    url("images/section4.webp");

}



.panel-10 .video-frame {

    background-image:
    url("images/section10.webp");

}







/* =========================
   VIMEO IFRAME
========================= */


.video-frame iframe {


    position:absolute;



    top:50%;


    left:50%;



    width:177.78vh;


    height:100vh;



    transform:
    translate(-50%,-50%);



    -webkit-transform:
    translate(-50%,-50%);



    border:none;



    pointer-events:auto;



    opacity:0;



    transition:
    opacity 1.2s ease;



    z-index:2;




    -webkit-backface-visibility:hidden;

    backface-visibility:hidden;


}







/* Vimeo fades over poster */


.video-frame.video-ready iframe {

    opacity:1;

}








/* =========================
   DESKTOP / MOBILE SWITCHING
========================= */


.desktop-frame {

    display:block;

}



.mobile-frame {

    display:none;

}








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


@media(max-width:768px){



    body {

        height:1800dvh;

    }




    .panel {


        height:100dvh;



        border-bottom:

        8px solid rgba(69,41,28,1);

    }





    .desktop-frame {

        display:none;

    }




    .mobile-frame {

        display:block;

    }




    .video-frame iframe {


        width:177.78vh;


        height:100vh;



        top:50%;


        left:50%;



        transform:

        translate(-50%,-50%);



        -webkit-transform:

        translate(-50%,-50%);

    }




    .panel-image {

        width:100px;

    }


}








/* =========================
   EMAIL TEXT
========================= */


.bottom-text {


    position:fixed;



    bottom:20px;



    left:0;




    white-space:nowrap;



    pointer-events:none;



    z-index:9999;




    font-family:

    Georgia,

    serif;




    font-size:14px;



    letter-spacing:1px;




    animation:

    bounceSideways 12s ease-in-out infinite alternate;

}







@keyframes bounceSideways {



    from {


        transform:

        translateX(20px);


    }



    to {


        transform:

        translateX(calc(100vw - 100% - 20px));


    }

}