/* Common Hover States & Animations */
.wave {
    display: inline-block;
    transform-origin: right bottom;
    transition: all 0.2s ease;
    cursor: pointer;
}


.wave:hover {
    animation: waveEffect 1s ease-in-out;
}

a:hover:not(.card),
i:hover,
.chip:not(#myStack .chip):hover, .md-btn:hover {
    animation: jelly 0.4s ease;
}

/* Keyframes */
@keyframes jelly {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
    }

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

@keyframes waveEffect {
    0% {
        transform:
            rotate(0deg) skew(0deg, 0deg) scale(1);
    }

    20% {
        transform:
            rotate(15deg) skew(5deg, -5deg) scale(1.2);
    }

    40% {
        transform:
            rotate(-10deg) skew(-5deg, 5deg) scale(1.2);
    }

    60% {
        transform:
            rotate(10deg) skew(5deg, -5deg) scale(1.2);
    }

    80% {
        transform:
            rotate(-5deg) skew(-5deg, 5deg) scale(1.2);
    }

    100% {
        transform:
            rotate(0deg) skew(0deg, 0deg) scale(1.2);
    }
}

@keyframes juicyBounce {
    0% {
        transform: scale(1, 1) translateY(0);
    }

    10% {
        transform: scale(1.3, 0.7) translateY(-10px);
        /* Stretch Up */
    }

    25% {
        transform: scale(0.7, 1.3) translateY(2px);
        /* Squash Down */
    }

    40% {
        transform: scale(1.2, 0.85) translateY(-6px);
        /* Second mini-bounce */
    }

    55% {
        transform: scale(0.9, 1.1) translateY(0);
    }

    70% {
        transform: scale(1.05, 0.95) translateY(-2px);
    }

    85% {
        transform: scale(0.98, 1.02) translateY(0);
    }

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

@keyframes appear {
    0% {
        transform: scale(0.4);
    }

    70% {
        transform: scale(1);
    }

    90% {
        transform: scale(0.95);
    }

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

@keyframes bodyLoad {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }

    to {
        opacity: 1;
    }
}

:is(main, footer, section, div:not(nav, nav div, nav ul)):not(.card .chip) {
    animation: bodyLoad 0.5s cubic-bezier(0.21, 0, 0.17, 1);
}

@media (width > 800px) {
    img {
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
}