/** * HUN — librería de microinteracciones (Fase 5, docs/plan_rediseno_ui_ux_hun.md) * Duraciones/curvas alineadas a frontend/hun_design_tokens_v2.js * (transitionDuration fast/base/slow = 150/250/400ms, easing standard/emphasized). * * Uso: en el , después de * las fuentes y antes de Tailwind (el orden no importa, no hay colisión de * nombres con utilidades Tailwind — todas las clases usan el prefijo "hun-"). * * Guía de "cuándo animar": * - Transición de vista (wizard, tabs) → hun-view-enter * - Aparición de tarjetas en grilla (resultados de búsqueda/listas) → hun-stagger-in * (agregar como hijos directos; el retraso se calcula solo vía nth-child) * - Carga de datos con layout conocido (tabla, tarjetas) → hun-skeleton * en vez de un spinner de texto — reduce la sensación de espera * - Botón primario → ya usa shadow-elev-button + hover:-translate-y-0.5 (Tailwind, * definido en hun_design_tokens_v2.js); hun-press añade feedback al soltar clic * - Toast / modal → hun-toast-in / hun-modal-in ya cubren entrada; salida se maneja * quitando el nodo tras el timeout (no se anima la salida para no retrasar el cierre) * - NUNCA animar contenido de video en vivo (hun_sala.html) ni reusar estas clases ahí */ :root { --hun-dur-fast: 150ms; --hun-dur-base: 250ms; --hun-dur-slow: 400ms; --hun-ease-standard: cubic-bezier(0.2, 0, 0, 1); --hun-ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1); } /* ── Transición entre vistas (pasos de wizard, tabs) ── */ @keyframes hun-view-enter-kf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hun-view-enter { animation: hun-view-enter-kf var(--hun-dur-base) var(--hun-ease-standard) both; } /* ── Aparición escalonada de tarjetas en grilla ── */ .hun-stagger-in > * { opacity: 0; animation: hun-view-enter-kf var(--hun-dur-base) var(--hun-ease-standard) both; } .hun-stagger-in > *:nth-child(1) { animation-delay: 0ms; } .hun-stagger-in > *:nth-child(2) { animation-delay: 30ms; } .hun-stagger-in > *:nth-child(3) { animation-delay: 60ms; } .hun-stagger-in > *:nth-child(4) { animation-delay: 90ms; } .hun-stagger-in > *:nth-child(5) { animation-delay: 120ms; } .hun-stagger-in > *:nth-child(6) { animation-delay: 150ms; } .hun-stagger-in > *:nth-child(7) { animation-delay: 180ms; } .hun-stagger-in > *:nth-child(8) { animation-delay: 210ms; } .hun-stagger-in > *:nth-child(n+9) { animation-delay: 240ms; } /* ── Skeleton loader (reemplaza spinners de texto en cargas con layout conocido) ── */ @keyframes hun-skeleton-kf { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .hun-skeleton { background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%); background-size: 400px 100%; animation: hun-skeleton-kf 1.4s ease infinite; border-radius: 0.75rem; } /* ── Feedback de botón al soltar clic (además del hover:-translate-y ya usado) ── */ .hun-press { transition: transform var(--hun-dur-fast) var(--hun-ease-standard); } .hun-press:active { transform: scale(0.97); } /* ── Toast (entrada) ── */ @keyframes hun-toast-in-kf { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .hun-toast-in { animation: hun-toast-in-kf var(--hun-dur-base) var(--hun-ease-standard) both; } /* ── Modal (entrada) ── */ @keyframes hun-modal-in-kf { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .hun-modal-in { animation: hun-modal-in-kf var(--hun-dur-base) var(--hun-ease-emphasized) both; } /* ── Barra de progreso superior (transición de ancho ya se hace inline por página) ── */ .hun-progress-bar { transition: width var(--hun-dur-base) ease; } /* ── Accesibilidad: respeta la preferencia del sistema ── */ @media (prefers-reduced-motion: reduce) { .hun-view-enter, .hun-stagger-in > *, .hun-skeleton, .hun-toast-in, .hun-modal-in { animation: none !important; opacity: 1 !important; transform: none !important; } .hun-press { transition: none !important; } .hun-press:active { transform: none !important; } }