/* ============================================
   Animaciones y detalles sutiles
   ============================================ */

/* Pulso suave en elementos interactivos */
.toggle-btn:active,
.btn--primary:active {
    transform: scale(0.98);
}

/* Fade-in escalonado para timeline */
.timeline__item {
    opacity: 0;
    animation: fadeInUp 500ms ease forwards;
}

.timeline__item:nth-child(1) { animation-delay: 0ms; }
.timeline__item:nth-child(2) { animation-delay: 100ms; }
.timeline__item:nth-child(3) { animation-delay: 200ms; }
.timeline__item:nth-child(4) { animation-delay: 300ms; }
.timeline__item:nth-child(5) { animation-delay: 400ms; }
.timeline__item:nth-child(6) { animation-delay: 500ms; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading spinner para form */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn--loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}