/* ==========================================================================
   03-ANIMATIONS.CSS - Keyframes & Animation Definitions
   ========================================================================== */

/* Background Animations */
@keyframes float {
    0%, 100% { 
        transform: translate(-10%, -10%) rotate(0deg); 
    }
    33% { 
        transform: translate(10%, -10%) rotate(120deg); 
    }
    66% { 
        transform: translate(-10%, 10%) rotate(240deg); 
    }
}

@keyframes float-reverse {
    0%, 100% { 
        transform: translate(10%, 10%) rotate(0deg); 
    }
    33% { 
        transform: translate(-10%, 10%) rotate(-120deg); 
    }
    66% { 
        transform: translate(10%, -10%) rotate(-240deg); 
    }
}

/* Contact Method Icon Animation */
@keyframes rotate-border {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

/* Particle Animations */
@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

/* Text Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradient-shift {
    0% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
    100% { 
        background-position: 0% 50%; 
    }
}

/* Icon Animations */
@keyframes bounce {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

/* Color Animations */
@keyframes color-wave {
    0%, 100% { 
        color: var(--light-blue); 
    }
    25% { 
        color: var(--mint-green); 
    }
    50% { 
        color: var(--yellow); 
    }
    75% { 
        color: var(--orange); 
    }
}

/* Rotation Animation */
@keyframes rotate {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

/* Animation Classes */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-slow);
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

.accent-animation {
    display: inline-block;
    animation: color-wave 3s ease-in-out infinite;
}