/* Utilidades de animación */
.animate {
    animation-duration: var(--transition-normal);
    animation-fill-mode: both;
    will-change: transform, opacity;
}

.animate-fast {
    animation-duration: var(--transition-fast);
}

.animate-slow {
    animation-duration: var(--transition-slow);
}

/* Animaciones de entrada */
.fade-in {
    animation: fadeIn var(--transition-normal) var(--transition-timing);
    will-change: opacity;
}

.slide-up {
    animation: slideUp var(--transition-normal) var(--transition-timing);
    will-change: transform, opacity;
}

.slide-in {
    animation: slideIn var(--transition-normal) var(--transition-timing);
    will-change: transform, opacity;
}

.scale-in {
    animation: scaleIn var(--transition-normal) var(--transition-timing);
    will-change: transform, opacity;
}

/* Definición de animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animaciones para el menú móvil */
.menu-open {
    animation: menuSlideIn var(--transition-normal) var(--transition-timing) forwards;
    will-change: transform;
}

.menu-close {
    animation: menuSlideOut var(--transition-normal) var(--transition-timing) forwards;
    will-change: transform;
}

@keyframes menuSlideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes menuSlideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Animaciones para cards */
.card-hover {
    transition: transform var(--transition-normal) var(--transition-timing),
                box-shadow var(--transition-normal) var(--transition-timing);
    will-change: transform, box-shadow;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Animaciones para botones */
.btn-pulse {
    animation: pulse 2s infinite var(--transition-timing);
    will-change: transform;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Animación para el loading */
.loading {
    animation: rotate 1s linear infinite;
    will-change: transform;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animaciones de scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-normal) var(--transition-timing),
                transform var(--transition-normal) var(--transition-timing);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Soporte para prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .animate,
    .fade-in,
    .slide-up,
    .slide-in,
    .scale-in,
    .menu-open,
    .menu-close,
    .card-hover,
    .btn-pulse,
    .loading,
    .reveal {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}