/* 
   About Page Styles
   - Animation Keyframes
   - Utility Classes
*/

/* =========================================
   Animations
   ========================================= */

@keyframes float {

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

    50% {
        transform: translateY(-20px);
    }
}

@keyframes float-delayed {

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

    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulse-slow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* =========================================
   Animation Classes
   ========================================= */

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 6s ease-in-out infinite;
    animation-delay: 1s;
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}