/**
 * @file: animations.css
 * @description: Webflow-style Keyframe Animations & Utilities
 * @timing: Custom cubic-bezier for "expensive" feel
 */

:root {
    /* Webflow-like smooth easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
   1. SLIDE UP (Elementos principales)
   ========================================= */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slideUp {
    animation: slideUp 600ms var(--ease-out-expo) forwards;
}

/* Se puede staggered con delay en JS o con clases auxiliares */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

/* =========================================
   2. SCALE IN (Imágenes y Cards)
   ========================================= */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scaleIn {
    animation: scaleIn 500ms var(--ease-out-expo) forwards;
}

/* =========================================
   3. HOVER EFFECTS (Interacciones)
   ========================================= */
/* Utility class para aplicar en elementos interactivos */
.hover-scale {
    transition: transform 300ms var(--ease-out-expo);
}

.hover-scale:hover {
    transform: scale(1.03);
}

.hover-lift {
    transition: transform 300ms var(--ease-out-expo), box-shadow 300ms var(--ease-out-expo);
}

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

/* =========================================
   4. PULSE CUSTOM (Call to Action)
   ========================================= */
@keyframes pulseCustom {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
        /* Color primario */
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
        transform: scale(1);
    }
}

.animate-pulseCustom {
    animation: pulseCustom 2000ms infinite;
}

/* =========================================
   5. SCROLL REVEAL SYSTEM
   ========================================= */

/* Estado inicial: elementos ocultos */
.reveal {
    opacity: 0;
    transition: opacity 700ms var(--ease-out-expo),
                transform 700ms var(--ease-out-expo);
}

/* Estado visible: cuando entra en viewport */
.reveal.reveal-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Variantes de dirección */
.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-scale {
    transform: scale(0.9);
}

/* Delays para efecto stagger en scroll reveal */
.reveal-delay-1 {
    transition-delay: 100ms;
}

.reveal-delay-2 {
    transition-delay: 200ms;
}

.reveal-delay-3 {
    transition-delay: 300ms;
}

.reveal-delay-4 {
    transition-delay: 400ms;
}

/* =========================================
   ACCESSIBILITY
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Mostrar elementos sin animación para usuarios con preferencia de movimiento reducido */
    .reveal {
        opacity: 1;
        transform: none;
    }
}