/* ==========================================================================
   ANIMACIONES CSS
   ========================================================================== */

/* ----------------------------------------
   CONFIGURACIÓN BASE DE ANIMACIONES
   ---------------------------------------- */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.animated.fast {
    animation-duration: 0.5s;
}

.animated.slow {
    animation-duration: 1.5s;
}

/* ----------------------------------------
   SISTEMA DE ANIMACIÓN AL SCROLL
   ---------------------------------------- */

.wow {
    visibility: hidden;
}

.wow.animated {
    visibility: visible;
}

/* ----------------------------------------
   FADE IN UP
   ---------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/* ----------------------------------------
   FADE IN DOWN
   ---------------------------------------- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

/* ----------------------------------------
   FADE IN LEFT
   ---------------------------------------- */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1.2s;
}

/* ----------------------------------------
   FADE IN RIGHT
   ---------------------------------------- */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
    animation-duration: 1.2s;
}

/* ----------------------------------------
   FADE IN
   ---------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

/* ----------------------------------------
   ZOOM IN
   ---------------------------------------- */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

/* ----------------------------------------
   SLIDE IN UP
   ---------------------------------------- */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

/* ----------------------------------------
   BOUNCE IN
   ---------------------------------------- */
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-name: bounceIn;
    animation-duration: 0.75s;
}

/* ----------------------------------------
   PULSE (para elementos destacados)
   ---------------------------------------- */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* ----------------------------------------
   DELAYS PARA STAGGER EFFECT
   ---------------------------------------- */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Data attributes para delays dinámicos */
[data-wow-delay="0.1s"] { animation-delay: 0.1s; }
[data-wow-delay="0.2s"] { animation-delay: 0.2s; }
[data-wow-delay="0.3s"] { animation-delay: 0.3s; }
[data-wow-delay="0.4s"] { animation-delay: 0.4s; }
[data-wow-delay="0.5s"] { animation-delay: 0.5s; }
[data-wow-delay="0.6s"] { animation-delay: 0.6s; }

/* ----------------------------------------
   TRANSICIONES HOVER PARA CARDS Y ELEMENTOS
   ---------------------------------------- */
.hover-lift {
    transition: transform var(--fe-transition), box-shadow var(--fe-transition);
}

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

.hover-scale {
    transition: transform var(--fe-transition);
}

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

/* ----------------------------------------
   SPINNER DE CARGA
   ---------------------------------------- */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

/* ----------------------------------------
   LOADER GLOBAL (HTMX)
   ---------------------------------------- */
/* Cubre toda la ventana: además de centrar el indicador, intercepta los clics para que no se
   pueda volver a pulsar un botón mientras la petición está en curso. */
.fe-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
}

/* htmx-app.js alterna la clase is-active en #app-loader durante los requests HTMX. */
.fe-loader.is-active {
    display: flex;
}

.fe-loader__rings {
    position: relative;
    width: 64px;
    height: 64px;
}

.fe-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
}

.fe-loader__ring--blue {
    border-top-color: #2C3D85;
    border-right-color: #2C3D85;
    animation: fe-loader-spin 1.1s linear infinite;
}

.fe-loader__ring--green {
    inset: 12px;
    border-top-color: #9BB643;
    border-right-color: #9BB643;
    animation: fe-loader-spin 0.8s linear infinite reverse;
}

.fe-loader__text {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin: 0;
    letter-spacing: 0.03em;
}

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

/* ----------------------------------------
   REDUCCIÓN DE MOVIMIENTO (Accesibilidad)
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animated,
    .wow {
        animation: none !important;
        transition: none !important;
    }
    
    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }
}