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

.reveal {

    opacity: 0;

    transform: translateY(32px);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .7s cubic-bezier(.16,1,.3,1);

    will-change: opacity, transform;

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}

/* ==========================================================
   FADE LEFT
========================================================== */

.fade-left {

    opacity: 0;

    transform: translateX(-40px);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .7s cubic-bezier(.16,1,.3,1);

}

.fade-left.is-visible {

    opacity: 1;

    transform: translateX(0);

}

/* ==========================================================
   FADE RIGHT
========================================================== */

.fade-right {

    opacity: 0;

    transform: translateX(40px);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .7s cubic-bezier(.16,1,.3,1);

}

.fade-right.is-visible {

    opacity: 1;

    transform: translateX(0);

}

/* ==========================================================
   SCALE
========================================================== */

.scale-up {

    opacity: 0;

    transform: scale(.94);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.scale-up.is-visible {

    opacity: 1;

    transform: scale(1);

}

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

.pulse{

    animation:pulse 3s ease-in-out infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 rgba(74,124,255,0);

    }

    50%{

        box-shadow:0 0 12px rgba(74,124,255,.45);

    }

    100%{

        box-shadow:0 0 0 rgba(74,124,255,0);

    }

}

/* ==========================================================
   AMBIENT GLOW
========================================================== */

.ambient-glow{

    animation:floatGlow 10s ease-in-out infinite alternate;

}

@keyframes floatGlow{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(40px,-30px);

    }

}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn{

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;

}

.btn:hover{

    transform:translateY(-3px);

}

/* ==========================================================
   IMAGE HOVER
========================================================== */

.project-image img,
.about-image img{

    transition:
        transform .8s ease,
        filter .8s ease;

}

/* ==========================================================
   LINK UNDERLINE
========================================================== */

.project-links a,
.footer-center a,
.contact-link{

    transition:var(--transition);

}

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

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}