/* ==========================================================================
   ANIMACIONES Y MEJORAS VISUALES SUTILES (PORTAL THEME)
   ========================================================================== */

/* --- 1. Definición de Keyframes Eficientes --- */

/* Pulso suave de opacidad y brillo para elementos interactivos prioritarios o de carga */
@keyframes soft-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 184, 177, 0.4);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(99, 184, 177, 0.15);
        filter: brightness(1.03);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(99, 184, 177, 0);
        filter: brightness(1);
    }
}

/* Brillo lineal continuo para la barra de progreso activa (Efecto Shimmer) */
@keyframes progress-shimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Entrada sutil para textos de feedback o pistas reveladas */
@keyframes hint-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- 2. Aplicación a Componentes Específicos --- */

/* INPUTS Y TEXTAREAS: Parpadeo/Pulso sutil en foco */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    background-color: var(--lc-paper-strong);
    /* Sobrescribe el focus original agregando un pulso infinito que no distrae */
    animation: soft-pulse 2.5s infinite ease-in-out;
}

/* BOTÓN SIGUIENTE (Acción Principal): Guía visual discreta para invitar a avanzar */
#ae-2-next-button:not(:disabled) {
    position: relative;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
    /* Un pulso muy espaciado en el tiempo para denotar prioridad de clic */
    animation: soft-pulse 3s infinite ease-in-out;
}

#ae-2-next-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(37, 111, 103, 0.25);
    filter: brightness(1.05);
}

#ae-2-next-button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(37, 111, 103, 0.2);
}

/* BOTONES SECUNDARIOS / NAVEGACIÓN: Micro-interacciones limpias */
#ae-2-prev-button:not(:disabled),
#ae-2-save-button:not(:disabled) {
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

#ae-2-prev-button:not(:disabled):hover,
#ae-2-save-button:not(:disabled):hover {
    transform: translateY(-1px);
    background-color: rgba(234, 246, 243, 0.6);
}

/* BARRA DE PROGRESO: Animación de gradiente líquido */
.progress-bar[data-wizard-progress-fill] {
    background: linear-gradient(
        90deg, 
        #4ea99f 0%, 
        #7ed2cb 25%, 
        #4ea99f 50%, 
        #7ed2cb 75%, 
        #4ea99f 100%
    );
    background-size: 200% auto;
    animation: progress-shimmer 4s infinite linear;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 1px 4px rgba(78, 169, 159, 0.15);
}

/* HINTS / PISTAS DE SUBMIT: Aparición orgánica al remover el atributo [hidden] */
#ae-2-submit-hint:not([hidden]) {
    display: block; /* Asegura el flujo si el JS maneja sólo la propiedad 'hidden' */
    animation: hint-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* CARDS DE MATERIALES DISPONIBLES: Efecto hover sutil de elevación (Lifted) */
#material-modal-1_card,
#material-modal-2_card {
    transition: transform 0.3s cubic-bezier(0.215, 0.610, 0.355, 1), box-shadow 0.3s ease;
    will-change: transform, box-shadow;
}

#material-modal-1_card:hover,
#material-modal-2_card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-shadow-lifted);
}

/* MODALES DE PREVIEW: Transición de escala interna limpia al abrirse */
.material-preview-modal.modal.fade .modal-content {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* --- 3. Accesibilidad y Optimización --- */

/* Desactiva o suaviza animaciones si el usuario prefiere reducir el movimiento a nivel de OS */
@media (prefers-reduced-motion: reduce) {
    .form-control:focus,
    #ae-2-next-button:not(:disabled),
    .progress-bar[data-wizard-progress-fill] {
        animation: none !important;
    }
    
    #material-modal-1_card:hover,
    #material-modal-2_card:hover,
    #ae-2-next-button:not(:disabled):hover {
        transform: none !important;
    }
}