/* ===========================
   INTRO ANIMATION
=========================== */

@keyframes introFade {

    0%{
        opacity:1;
        visibility:visible;
    }

    70%{
        opacity:1;
    }

    100%{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

}

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

@keyframes grain {

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

    10%{
        transform:translate(-5%,-10%);
    }

    20%{
        transform:translate(-15%,5%);
    }

    30%{
        transform:translate(7%,-25%);
    }

    40%{
        transform:translate(-5%,25%);
    }

    50%{
        transform:translate(-15%,10%);
    }

    60%{
        transform:translate(15%,0%);
    }

    70%{
        transform:translate(0%,15%);
    }

    80%{
        transform:translate(3%,35%);
    }

    90%{
        transform:translate(-10%,10%);
    }

    100%{
        transform:translate(0,0);
    }

}

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

.hero-content{

    opacity:0;
    transform:translateY(30px);

    animation:heroReveal 1.2s ease forwards;
    animation-delay:2.2s;

}

@keyframes heroReveal{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ===========================
   LOGO
=========================== */

.glyph{

    opacity:0;
    transform:scale(.92);

    animation:logoReveal 1.4s ease forwards;
    animation-delay:.6s;

}

@keyframes logoReveal{

    from{

        opacity:0;
        transform:scale(.92);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

.left,
.right{

    animation:barsOpen 1.4s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:.3s;

}

@keyframes barsOpen{

    from{

        transform:scaleY(.2);
        opacity:0;

    }

    to{

        transform:scaleY(1);
        opacity:1;

    }

}

/* ===========================
   ARCHIVE
=========================== */

.file{

    position:relative;

}

.file::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0%;
    height:1px;

    background:#F2F2EE;

    transition:.45s ease;

}

.file:hover::after{

    width:100%;

}

.file:hover h4{

    transform:translateX(12px);

}

/* ===========================
   BUTTON / LINK EFFECTS
=========================== */

a{

    transition:.3s ease;

}

a:hover{

    opacity:.75;

}

/* ===========================
   SCROLL REVEAL
=========================== */

.reveal{

    opacity:0;
    transform:translateY(40px);
    transition:1s ease;

}

.reveal.active{

    opacity:1;
    transform:translateY(0);

}

/* ===========================
   DIVIDER
=========================== */

.divider{

    transform-origin:left;
    animation:dividerGrow .8s ease forwards;

}

@keyframes dividerGrow{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}