/* ==========================================================================
   GO-LATIN 2.0 · motion.css
   Solo CSS (Blazor Server: nada de librerías de animación ni JS por frame).
   Solo se anima transform y opacity para mantener 60 FPS.
   ========================================================================== */

/* Shared animated-background stage. Inactive series are not painted or animated. */
.tb-root { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; contain:strict; }
.tb-root > section { position:absolute; inset:0; display:none; overflow:hidden; }
/* Motion off removes CSS animations from the stage, so DevTools does not retain paused background entries. */
:root[data-gl-motion="off"] .tb-root,
:root[data-gl-motion="off"] .tb-root *,
:root[data-gl-motion="off"] .tb-root *::before,
:root[data-gl-motion="off"] .tb-root *::after { animation:none !important; }

.page[data-gl="fc"] > main,
.page[data-gl="fc"] > .sidebar { position:relative; z-index:1; }

@keyframes gl-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gl-slide-up {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes gl-slide-in-right {
    from { opacity: 0; transform: translate3d(-12px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes gl-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes gl-glow-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@keyframes gl-live-dot {
    0% { box-shadow: 0 0 0 0 rgba(var(--gl-live-rgb), 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(var(--gl-live-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--gl-live-rgb), 0); }
}

@keyframes gl-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- Entradas ---------- */
[data-gl="fc"] .gl-anim-fade {
    animation: gl-fade-in var(--gl-duration-slow) var(--gl-ease-out) both;
}

[data-gl="fc"] .gl-anim-slide-up {
    animation: gl-slide-up var(--gl-duration-slow) var(--gl-ease-out) both;
}

[data-gl="fc"] .gl-anim-scale {
    animation: gl-scale-in var(--gl-duration-base) var(--gl-ease-out) both;
}

/* Escalonado para grillas y listas (máx. 8 pasos para no retrasar el contenido) */
[data-gl="fc"] .gl-stagger > * {
    animation: gl-slide-up var(--gl-duration-slow) var(--gl-ease-out) both;
}

[data-gl="fc"] .gl-stagger > *:nth-child(2) { animation-delay: 40ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(3) { animation-delay: 80ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(4) { animation-delay: 120ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(5) { animation-delay: 160ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(6) { animation-delay: 200ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(7) { animation-delay: 240ms; }
[data-gl="fc"] .gl-stagger > *:nth-child(n + 8) { animation-delay: 280ms; }

/* ---------- Hover ---------- */
[data-gl="fc"] .gl-hover-lift {
    transition: transform var(--gl-duration-base) var(--gl-ease-out), box-shadow var(--gl-duration-base) var(--gl-ease-out);
}

[data-gl="fc"] .gl-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--gl-shadow-md);
}

[data-gl="fc"] .gl-hover-glow {
    transition: box-shadow var(--gl-duration-base) var(--gl-ease-out), border-color var(--gl-duration-base) var(--gl-ease-out);
}

[data-gl="fc"] .gl-hover-glow:hover {
    border-color: var(--gl-border-accent);
    box-shadow: var(--gl-glow-cyan);
}

/* Brillo ambiental que respira (usar con moderación: 1-2 por pantalla) */
[data-gl="fc"] .gl-glow-pulse {
    animation: gl-glow-pulse 3.2s ease-in-out infinite;
}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-anim-fade,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-anim-slide-up,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-anim-scale,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-stagger > *,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-glow-pulse,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-skeleton,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-badge--live::before {
        animation: none !important;
    }

    :root[data-gl-motion="off"] [data-gl="fc"] .gl-hover-lift:hover,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-card--interactive:hover,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-leaderboard__row:hover,
    :root[data-gl-motion="off"] [data-gl="fc"] .gl-btn:hover:not(:disabled) {
        transform: none;
    }
}

/* ---------- Reducir movimiento en TODO el ecosistema FC (también CSS heredado: holo, glitch, recap...) ----------
   Se acorta la duración en vez de usar "animation: none": muchas entradas parten de opacity:0 y con "none"
   quedarían invisibles. Así terminan al instante en su estado final. F1 y overlays no llevan [data-gl="fc"]. */
@media (prefers-reduced-motion: reduce) {
    :root[data-gl-motion="off"] [data-gl="fc"] *,
    :root[data-gl-motion="off"] [data-gl="fc"] *::before,
    :root[data-gl-motion="off"] [data-gl="fc"] *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Host shadows are supplied by tokens.css; motion remains reduced by the existing media query. */