/* ==========================================================================
   SHARK MOTION SYSTEM — capa de movimiento de la casa (portado de SICON FEEL)
   CSS puro, cero dependencias. Prefijo sk-* (convención de Shark).

   Ley del Movimiento: cada gesto responde una de 4 preguntas — ¿qué cambió?
   ¿dónde apareció? ¿qué desapareció? ¿cuál es el foco? El default es la QUIETUD.
   Respeta prefers-reduced-motion (todo se apaga al final del archivo).
   Los tokens de duración/easing viven en theme.css; aquí van fallbacks por si falta.
   ========================================================================== */

:root {
    --sk-dur-fast:  var(--dur-fast, 120ms);
    --sk-dur-base:  var(--dur-base, 200ms);
    --sk-dur-slow:  var(--dur-slow, 320ms);
    --sk-ease:      var(--ease-standard, cubic-bezier(.4, 0, .2, 1));
    --sk-ease-emph: var(--ease-emphasized, cubic-bezier(.2, 0, 0, 1));
    --sk-stagger:   40ms;   /* separación entre ítems de una cascada */
}

/* ── Entrada de vista: cascada con stagger (1 vez por vista, tope ~400ms) ──── */
@keyframes sk-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sk-enter > * { animation: sk-fade-up var(--sk-dur-base) var(--sk-ease-emph) both; }
.sk-enter > *:nth-child(1) { animation-delay: 0ms; }
.sk-enter > *:nth-child(2) { animation-delay: calc(var(--sk-stagger) * 1); }
.sk-enter > *:nth-child(3) { animation-delay: calc(var(--sk-stagger) * 2); }
.sk-enter > *:nth-child(4) { animation-delay: calc(var(--sk-stagger) * 3); }
.sk-enter > *:nth-child(5) { animation-delay: calc(var(--sk-stagger) * 4); }
.sk-enter > *:nth-child(6) { animation-delay: calc(var(--sk-stagger) * 5); }
.sk-enter > *:nth-child(n+7) { animation-delay: calc(var(--sk-stagger) * 6); }  /* tope: nada supera ~240ms */

.sk-fade-up { animation: sk-fade-up var(--sk-dur-base) var(--sk-ease-emph) both; }
@keyframes sk-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sk-fade-in { animation: sk-fade-in var(--sk-dur-base) var(--sk-ease) both; }

/* ── Skeleton: mientras carga, nunca afirmar ausencia antes de saberla ─────── */
@keyframes sk-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.sk-skeleton {
    background: linear-gradient(90deg,
        var(--color-bg-subtle, #eceff4) 25%,
        var(--color-bg-hover, rgba(0,0,0,.06)) 37%,
        var(--color-bg-subtle, #eceff4) 63%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm, 6px);
    min-height: 12px;
}

/* ── Anticipación: la acción se revela al hover de la fila/card ────────────── */
.sk-reveal-host .sk-reveal {
    opacity: 0;
    transition: opacity var(--sk-dur-fast) var(--sk-ease), transform var(--sk-dur-fast) var(--sk-ease);
    transform: translateY(2px);
}
.sk-reveal-host:hover .sk-reveal,
.sk-reveal-host:focus-within .sk-reveal { opacity: 1; transform: none; }

/* ── Pulse: onda mínima en el control que confirmó (el feedback vive ahí) ──── */
@keyframes sk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 0,168,136), .45); }
    100% { box-shadow: 0 0 0 12px rgba(var(--color-primary-rgb, 0,168,136), 0); }
}
.sk-pulse { animation: sk-pulse .5s ease-out; }

/* ── Transiciones sobrias por defecto en controles interactivos ───────────── */
.sk-tap { transition: transform var(--sk-dur-fast) var(--sk-ease); }
.sk-tap:active { transform: scale(.97); }

/* ── El default es la quietud: apagar TODO si el usuario lo pidió ──────────── */
@media (prefers-reduced-motion: reduce) {
    .sk-enter > *, .sk-fade-up, .sk-fade-in, .sk-skeleton, .sk-pulse { animation: none !important; }
    .sk-reveal-host .sk-reveal { transition: none; opacity: 1; transform: none; }
    .sk-tap { transition: none; }
}