/* ==========================================================
   AXN Portfolio
   Motion System
   ========================================================== */

/*
    Motion Principles

    - Calm.
    - Intentional.
    - Invisible.

    If someone notices the animation,
    it is too much.
*/



/* ==========================================================
   Global Transition
   ========================================================== */

* {

    transition:

        color var(--transition-base),

        background-color var(--transition-base),

        border-color var(--transition-base);

}



/* ==========================================================
   Fade Up
   ========================================================== */

.fade {

    opacity: 0;

    transform: translateY(32px);

    transition:

        opacity .8s cubic-bezier(.22, .61, .36, 1),

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

}

.fade.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* ==========================================================
   Delays
   ========================================================== */

.delay-1 {

    transition-delay: .1s;

}

.delay-2 {

    transition-delay: .2s;

}

.delay-3 {

    transition-delay: .3s;

}

.delay-4 {

    transition-delay: .4s;

}



/* ==========================================================
   Video Hover
   ========================================================== */

.project-video {

    transition:

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

}

.project:hover .project-video {

    transform: scale(.985);

}



/* ==========================================================
   Links
   ========================================================== */

a {

    transition:

        opacity var(--transition-base),

        color var(--transition-base);

}

a:hover {

    opacity: .7;

}



/* ==========================================================
   Images
   ========================================================== */

.image {

    overflow: hidden;

}

.image img {

    transition:

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

}

.image:hover img {

    transform: scale(1.03);

}



/* ==========================================================
   Reduce Motion
   ========================================================== */

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

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}