/* ==========================================================================
   TSC Design System v2 · «Deep Market» — MOVIMIENTO
   Solo transform/opacity. Duraciones y curvas de tokens.css. Una o dos
   animaciones por vista. prefers-reduced-motion lo anula todo. Guía §2.5.
   ========================================================================== */

/* Entrada de página / bloque: fade + 8px; los hijos directos con stagger 40 ms (hasta 8) */
.tsc-enter {
    animation: tsc-enter var(--tsc-dur-slow) var(--tsc-ease) both;
}

.tsc-enter-stagger > * {
    animation: tsc-enter var(--tsc-dur-slow) var(--tsc-ease) both;
}

.tsc-enter-stagger > *:nth-child(1) { animation-delay: 0ms; }
.tsc-enter-stagger > *:nth-child(2) { animation-delay: 40ms; }
.tsc-enter-stagger > *:nth-child(3) { animation-delay: 80ms; }
.tsc-enter-stagger > *:nth-child(4) { animation-delay: 120ms; }
.tsc-enter-stagger > *:nth-child(5) { animation-delay: 160ms; }
.tsc-enter-stagger > *:nth-child(6) { animation-delay: 200ms; }
.tsc-enter-stagger > *:nth-child(7) { animation-delay: 240ms; }
.tsc-enter-stagger > *:nth-child(n+8) { animation-delay: 280ms; }

@keyframes tsc-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes tsc-rise {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

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

/* Elevación al hover (tarjetas clicables, tiles) */
.tsc-lift {
    transition: transform var(--tsc-dur-base) var(--tsc-ease), box-shadow var(--tsc-dur-base) var(--tsc-ease), border-color var(--tsc-dur-base) var(--tsc-ease);
}

.tsc-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--tsc-shadow-glow);
    border-color: rgba(var(--tsc-primary-rgb), .35);
}

/* Skeleton con shimmer 1,4 s (bloques mientras carga; nunca spinner en tablas) */
.tsc-skeleton {
    position: relative;
    overflow: hidden;
    min-height: 12px;
    border-radius: var(--tsc-r-sm);
    background: var(--tsc-bg-2);
    color: transparent;
}

.tsc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, var(--tsc-bg-3) 50%, transparent 100%);
    animation: tsc-shimmer 1.4s var(--tsc-ease-in-out) infinite;
}

.tsc-skeleton--text { height: 12px; margin: 6px 0; }
.tsc-skeleton--title { height: 20px; width: 40%; margin: 8px 0 12px; }
.tsc-skeleton--row { height: 44px; margin: 2px 0; }
.tsc-skeleton--block { height: 120px; }

@keyframes tsc-shimmer {
    to {
        transform: translateX(100%);
    }
}

/* Punto "live" (2 s) */
.tsc-pulse-dot {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tsc-pulse-c, var(--tsc-accent));
}

.tsc-pulse-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: tsc-pulse 2s var(--tsc-ease) infinite;
}

.tsc-pulse-dot--ok { --tsc-pulse-c: var(--tsc-success); }
.tsc-pulse-dot--warn { --tsc-pulse-c: var(--tsc-warning); }
.tsc-pulse-dot--err { --tsc-pulse-c: var(--tsc-error); }

@keyframes tsc-pulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    80%,
    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

/* Aurora: capas de primary/accent/info al 10–18 %, loop 14 s (solo hero y login) */
.tsc-aurora {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.tsc-aurora::before,
.tsc-aurora::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 70%;
    height: 90%;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: .9;
}

.tsc-aurora::before {
    top: -30%;
    left: -15%;
    background: radial-gradient(closest-side, var(--tsc-aurora-1), transparent);
    animation: tsc-aurora-a 14s var(--tsc-ease-in-out) infinite alternate;
}

.tsc-aurora::after {
    right: -20%;
    bottom: -35%;
    background:
        radial-gradient(closest-side at 35% 45%, var(--tsc-aurora-2), transparent),
        radial-gradient(closest-side at 70% 60%, var(--tsc-aurora-3), transparent);
    animation: tsc-aurora-b 14s var(--tsc-ease-in-out) infinite alternate;
}

@keyframes tsc-aurora-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18%, 12%, 0) scale(1.15); }
}

@keyframes tsc-aurora-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to { transform: translate3d(-16%, -10%, 0) scale(.95); }
}

/* Count-up (JS opcional tscCountUp): evita salto de ancho */
.tsc-countup {
    font-variant-numeric: tabular-nums;
}

/* ---------- Movimiento reducido: todo a 0 ms y sin aurora ---------- */
/* (el reset global a 0 ms con !important vive en mud-overrides.css) */
@media (prefers-reduced-motion: reduce) {
    .tsc-aurora::before,
    .tsc-aurora::after,
    .tsc-pulse-dot::after,
    .tsc-skeleton::after {
        display: none;
    }
}