/**
 * GlobalCSS — Transitions
 * Curvas de easing, duraciones estándar.
 * Ref: design-style-guide.md §7 Transiciones y movimiento
 */

:root {
    /* Curvas */
    --ease-natural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    /* Duraciones */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 250ms;
    --duration-modal: 300ms;
}

/* Aparición de contenido (fade + slide up) */
@keyframes gs-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gs-fade-in {
    animation: gs-fade-in-up var(--duration-slow) var(--ease-out) both;
}