/* Animaciones e Interacciones CSS Modernas - KAVM */

/* Efectos Scroll Reveal con Escala y Fade */
.reveal {
    opacity: 0;
    transform: translateY(35px) scale(0.97);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Micro-animaciones para Hover */
.scale-hover {
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.scale-hover:hover {
    transform: translateY(-4px) scale(1.01);
}

/* Animación Flotante Continua para Iconos o Héroes */
@keyframes floatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.floating {
    animation: floatAnimation 4s ease-in-out infinite;
}

/* Animación de Carga (Spinner) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s infinite linear;
}