/* motion.css — toolkit de movimento compartilhado (DPSPORTS Financeiro) * Princípios: design-motion-principles (lente Emil Kowalski — ferramenta de dados). * Curto (160–300ms), só transform/opacity, skeleton > spinner, stagger tapered, * prefers-reduced-motion desliga tudo. "A melhor animação passa despercebida." * * SEGURANÇA (não deixar conteúdo sumir): * - `.motion-ready` é adicionado por um script inline no (flash-free), só se * não for reduced-motion. O esconder-p/-revelar só vale sob `.motion-ready`. * - Failsafe no head: se o motion.js não rodar em ~1.2s, remove `.motion-ready` * (tudo volta a aparecer). Sem JS / reduced-motion => conteúdo sempre visível. */ :root { --motion-fast: 160ms; --motion: 200ms; --motion-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ---------- Reveal (entrada ao aparecer) — classe explícita OU filhos de um grupo ---------- */ .motion-ready .reveal, .motion-ready [data-reveal-group] > * { opacity: 0; transform: translateY(8px); will-change: opacity, transform; } .motion-ready .reveal.is-visible, .motion-ready [data-reveal-group] > .is-visible { opacity: 1; transform: none; transition: opacity var(--motion) var(--ease-out), transform var(--motion) var(--ease-out); transition-delay: calc(min(var(--i, 0), 4) * 45ms); /* stagger tapered, teto ~180ms */ } /* ---------- Skeleton (carregamento) — no lugar de spinner ---------- */ .skeleton { position: relative; overflow: hidden; background: #1e293b; border-radius: 8px; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.14), transparent); animation: skeleton-shimmer 1.25s ease-in-out infinite; } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } .skeleton-line { display: inline-block; height: 0.9em; width: 100%; border-radius: 6px; } .skeleton-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #1e293b; border: 1px solid #334155; border-radius: 14px; } /* ---------- Micro-interações (opt-in, sutil) ---------- */ .motion-ready .press { transition: transform var(--motion-fast) var(--ease-hover); } .motion-ready .press:active { transform: scale(0.97); } .motion-ready .progress-fill { transform-origin: left center; transition: transform var(--motion-slow) var(--ease-out); } .motion-ready .fade-out { opacity: 0; transition: opacity var(--motion) var(--ease-in); } /* ---------- Lazy-load de imagem ---------- */ .motion-ready img[data-src] { opacity: 0; } .motion-ready img.lazy-loaded { opacity: 1; transition: opacity var(--motion) var(--ease-out); } /* ---------- Acessibilidade (não-negociável) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } .skeleton::after { animation: none !important; } img[data-src] { opacity: 1 !important; } }