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

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active {

    opacity: 1;

    transform: translateY(0);
}

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

.btn-primary-custom {

    position: relative;

    overflow: hidden;
}

.btn-primary-custom::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transition: .6s;
}

.btn-primary-custom:hover::before {

    left: 100%;
}

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

.site-logo {

    animation: logoFade 1.2s ease;
}

@keyframes logoFade {

    from {

        opacity: 0;

        transform: translateY(-15px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}