/* ============================================
   ANIMACIONES CSS
   ============================================
   Animaciones modernas y suaves para elementos
============================================ */

/* === KEYFRAMES === */

/* Fade In Up - Aparece desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down - Aparece desde arriba */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left - Aparece desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right - Aparece desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In - Aparece con zoom */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce In - Aparece con rebote */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* Rotate In - Aparece rotando */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Pulse - Pulso continuo */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Float - Flotación suave */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Glow - Brillo pulsante */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--color-primary),
                    0 0 10px var(--color-primary);
    }
    50% {
        box-shadow: 0 0 20px var(--color-primary),
                    0 0 30px var(--color-primary),
                    0 0 40px var(--color-primary);
    }
}

/* Shimmer - Efecto brillante que pasa */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* === CLASES DE ANIMACIÓN === */

/* Elementos ocultos por defecto (se muestran con JavaScript) */
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.scale-in,
.bounce-in,
.rotate-in {
    opacity: 0;
}

/* Clases activas (aplicadas por JavaScript) */
.fade-in-up.active {
    animation: fadeInUp 0.8s ease-out forwards;
}

.fade-in-down.active {
    animation: fadeInDown 0.8s ease-out forwards;
}

.fade-in-left.active {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.fade-in-right.active {
    animation: fadeInRight 0.8s ease-out forwards;
}

.scale-in.active {
    animation: scaleIn 0.6s ease-out forwards;
}

.bounce-in.active {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.rotate-in.active {
    animation: rotateIn 0.8s ease-out forwards;
}

/* === DELAYS PARA ANIMACIONES === */
/* Puedes usar data-delay en HTML: data-delay="100" */
[data-delay="100"].active {
    animation-delay: 0.1s;
}

[data-delay="200"].active {
    animation-delay: 0.2s;
}

[data-delay="300"].active {
    animation-delay: 0.3s;
}

[data-delay="400"].active {
    animation-delay: 0.4s;
}

[data-delay="500"].active {
    animation-delay: 0.5s;
}

[data-delay="600"].active {
    animation-delay: 0.6s;
}

[data-delay="700"].active {
    animation-delay: 0.7s;
}

[data-delay="800"].active {
    animation-delay: 0.8s;
}

/* === ANIMACIONES CONTINUAS === */

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

.glow {
    animation: glow 2s ease-in-out infinite;
}

/* === HOVER ANIMATIONS === */

.hover-grow {
    transition: transform var(--transition-base);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.hover-tilt {
    transition: transform var(--transition-base);
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.hover-shine:hover::before {
    left: 100%;
}

/* === LOADING ANIMATIONS === */

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(212, 132, 28, 0.3);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s ease-in-out infinite;
}

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

/* === ANIMACIONES DE TEXTO === */

.text-gradient {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 3s linear infinite;
}

@keyframes text-shimmer {
    to {
        background-position: 200% center;
    }
}

/* === ANIMACIONES DE ENTRADA PARA PÁGINA === */

.page-enter {
    animation: fadeInUp 0.6s ease-out;
}

/* === STAGGER ANIMATIONS === */
/* Para animar múltiples elementos con retraso escalonado */

.stagger-item:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-item:nth-child(2) {
    animation-delay: 0.2s;
}

.stagger-item:nth-child(3) {
    animation-delay: 0.3s;
}

.stagger-item:nth-child(4) {
    animation-delay: 0.4s;
}

.stagger-item:nth-child(5) {
    animation-delay: 0.5s;
}

.stagger-item:nth-child(6) {
    animation-delay: 0.6s;
}

/* === SMOOTH TRANSITIONS === */

.smooth-transition {
    transition: all var(--transition-base);
}

/* === PREFERENCIAS DE MOVIMIENTO REDUCIDO === */
/* Respeta las preferencias de accesibilidad del usuario */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}