/* ==========================================================================
   1. Keyframe Animation Specifications
   ========================================================================== */

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pulseSubtle {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   2. Utility Animation Classes
   ========================================================================== */

.reveal-up {
    animation: revealUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0; /* Prevents flash before animation triggers */
}

.fade-in {
    animation: fadeIn 1s ease-in-out forwards;
    opacity: 0;
}

.slide-left {
    animation: slideInLeft 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0;
}

/* Animation Delay Utility System */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

/* ==========================================================================
   3. Interaction & Micro-interaction Transitions
   ========================================================================== */

/* Structural Component Hover Animations */
.feature-card, 
.service-card, 
.btn, 
.nav-link, 
.footer-links a,
.footer-socials a {
    will-change: transform, box-shadow, background-color, color;
}

/* Icon pulse effect on component interaction */
.feature-card:hover .feature-icon i,
.service-card:hover .service-link i {
    animation: pulseSubtle 0.5s ease-in-out infinite;
}

/* Accessibility and Reduce-Motion Guardrails */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: scroll !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    .reveal-up,
    .fade-in,
    .slide-left {
        opacity: 1 !important;
        transform: none !important;
    }
}