/* =========================================================
   PAGE ENTRANCE
========================================================= */

@keyframes page-fade-in{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

body{
    animation:
        page-fade-in
        .7s
        ease
        both;
}


/* =========================================================
   HEADER ENTRANCE
========================================================= */

@keyframes header-enter{

    from{
        opacity:0;
        transform:translateY(-18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.header{
    animation:
        header-enter
        .8s
        cubic-bezier(.22,.61,.36,1)
        .15s
        both;
}


/* =========================================================
   HERO ENTRANCE
========================================================= */

@keyframes hero-enter{

    from{
        opacity:0;
        transform:scale(1.09);
    }

    to{
        opacity:1;
        transform:scale(1.05);
    }

}

.hero-image{
    animation:
        hero-enter
        1.6s
        cubic-bezier(.22,.61,.36,1)
        both;
}


/* =========================================================
   GRAIN
========================================================= */

.hero-sticky::after{
    content:"";

    position:absolute;
    inset:-30%;

    z-index:5;

    pointer-events:none;

    opacity:.04;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.9'/%3E%3C/svg%3E");

    animation:
        grain-shift
        .25s
        steps(2)
        infinite;
}

@keyframes grain-shift{

    0%{
        transform:translate3d(0,0,0);
    }

    25%{
        transform:translate3d(-2%,1%,0);
    }

    50%{
        transform:translate3d(1%,-2%,0);
    }

    75%{
        transform:translate3d(2%,2%,0);
    }

    100%{
        transform:translate3d(-1%,-1%,0);
    }

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

@keyframes scroll-line{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(245%);
    }

}

.scroll-indicator span{
    animation:
        scroll-line
        1.7s
        cubic-bezier(.55,0,.45,1)
        infinite;
}


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

.video-button{
    opacity:0;

    transform:
        translateY(46px)
        scale(.985);

    transition:
        opacity
        .9s
        cubic-bezier(.22,.61,.36,1),

        transform
        .9s
        cubic-bezier(.22,.61,.36,1),

        box-shadow
        var(--transition);
}

.video-button.is-visible{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   PLAY ICON
========================================================= */

@keyframes play-pulse{

    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.055);
    }

}

.play-icon svg{
    animation:
        play-pulse
        2.6s
        ease-in-out
        infinite;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.video-button:hover .play-icon svg{
    animation-play-state:paused;
    transform:scale(1.09);
}

.video-button:active .play-icon svg{
    transform:scale(.96);
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram svg{
    transition:transform var(--transition-fast);
}

.instagram:hover svg{
    transform:
        rotate(-7deg)
        scale(1.07);
}


/* =========================================================
   MODAL
========================================================= */

@keyframes modal-fade-in{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes modal-content-enter{

    from{
        opacity:0;

        transform:
            translateY(28px)
            scale(.975);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}

@keyframes modal-fade-out{

    from{
        opacity:1;
    }

    to{
        opacity:0;
    }

}

@keyframes modal-content-exit{

    from{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

    to{
        opacity:0;

        transform:
            translateY(18px)
            scale(.985);
    }

}

.video-modal:not([hidden]){
    animation:
        modal-fade-in
        .3s
        ease
        both;
}

.video-modal:not([hidden]) .video-container{
    animation:
        modal-content-enter
        .55s
        cubic-bezier(.22,.61,.36,1)
        both;
}

.video-modal.is-closing{
    animation:
        modal-fade-out
        .25s
        ease
        both;
}

.video-modal.is-closing .video-container{
    animation:
        modal-content-exit
        .25s
        ease
        both;
}


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

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

    body,
    .header,
    .hero-image,
    .play-icon svg,
    .video-modal,
    .video-container,
    .scroll-indicator span{
        animation:none !important;
    }

    .hero-sticky::after{
        display:none;
    }

    .video-button{
        opacity:1;
        transform:none;
    }

}