/* ============================================================================
   I_DEAL · DESIGN SYSTEM — MOTION
   "O instante entre dois estados" (BG §10.7). Movimento = respiração,
   nunca brusco. Tudo honra prefers-reduced-motion (ver tokens.css).
   ============================================================================ */

/* ---- KEYFRAMES ---------------------------------------------------------- */

/* drift — aurora blobs orgânicos (BG §10.2) */
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(34px, 52px) scale(1.08); }
}

/* rise — o amanhecer subindo no gradiente Revelação (hero) */
@keyframes rise {
  0%, 100% { background-position: 50% 18%; }
  50%      { background-position: 50% 62%; }
}

/* shimmer — varredura de luz diagonal no hover de cards de vidro */
@keyframes shimmer {
  0%   { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%)  skewX(-12deg); }
}

/* breathe — pulso suave de opacidade (dots, halos) */
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* float — flutuação vertical leve (ícones/elementos de destaque) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* orbit — rotação lenta do anel de medição */
@keyframes orbit {
  to { transform: rotate(360deg); }
}

/* draw — traço do anel sendo desenhado (stroke-dashoffset) */
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* count-fade — entrada de números de score */
@keyframes scoreIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fadeUp — entrada padrão de conteúdo */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* sheen — brilho passando por texto/gradiente */
@keyframes sheen {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- SCROLL REVEAL ------------------------------------------------------ */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* stagger via data-delay no JS, ou classes utilitárias */
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---- UTILITÁRIOS DE ANIMAÇÃO ------------------------------------------- */
.anim-float   { animation: float 6s var(--ease-soft) infinite; }
.anim-breathe { animation: breathe 3.2s var(--ease-soft) infinite; }
.anim-orbit   { animation: orbit 40s linear infinite; transform-origin: center; }
.anim-sheen {
  background-size: 200% auto;
  animation: sheen 6s linear infinite;
}

/* utilitário de replay (DS demo) — JS força reflow e reaplica */
.replay-fade { animation: fadeUp .7s var(--ease-out-expo) both; }