/* =============================================================================
   VODFORGE — motion.css · camada de animação do redesign
   =============================================================================
   Arquivo estático, fora do pipeline do Tailwind (tokens --motion-* seriam
   tree-shakeados no input.css). Carregado depois do themes.css nos layouts.

   Diretriz: loop infinito SÓ em decoração (LEDs, glow, float, partículas);
   conteúdo anima em ENTRADA/MUDANÇA (rise-in, shimmer 1x, count-up).
   TUDO desligado sob prefers-reduced-motion (bloco no fim do arquivo).
   ========================================================================== */

:root {
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* --- Flutuação (decoração: ilustrações, cena de servidores) --------------- */
@keyframes vf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* --float-dur / --float-delay dessincronizam elementos que flutuam juntos
   (ex.: pilha e logo da cena de servidores parecem independentes). */
.anim-float {
  animation: vf-float var(--float-dur, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}

/* --- Glow pulsando devagar (decoração) ------------------------------------ */
@keyframes vf-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.anim-glow-pulse {
  animation: vf-glow-pulse 3.6s ease-in-out infinite;
}

/* --- LED piscando (decoração) ---------------------------------------------
   Dessincronizar com style="--blink-delay:-1.3s" (delay negativo = já começa
   no meio do ciclo). --blink-dur permite LEDs mais "raros" (ciclo longo). */
@keyframes vf-blink {
  0%, 82%, 100% { opacity: 1; }
  88%, 94%      { opacity: 0.15; }
}
.anim-blink {
  animation: vf-blink var(--blink-dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
}

/* --- Shimmer: varredura de luz 1x na entrada (dark only via token) --------
   --shimmer-opacity vem do themes.css (1 no dark, 0 no claro). */
@keyframes vf-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}
.anim-shimmer {
  position: relative;
  overflow: hidden;
}
.anim-shimmer::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 55%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.055) 45%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.055) 55%,
    transparent 100%);
  opacity: var(--shimmer-opacity, 1);
  pointer-events: none;
  animation: vf-shimmer 1.1s var(--ease-out-soft) 0.15s 1 both;
}

/* --- Entrada com stagger (conteúdo) ----------------------------------------
   Usar style="--stagger-i:0..n" nos irmãos para escalonar a entrada. */
@keyframes vf-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-rise-in {
  animation: vf-rise-in var(--motion-slow) var(--ease-out-soft) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}

/* --- Partículas subindo (decoração da cena de servidores) ----------------- */
@keyframes vf-particle-rise {
  0%   { transform: translateY(0);     opacity: 0; }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.25; }
  100% { transform: translateY(-120px); opacity: 0; }
}
.anim-particle {
  animation: vf-particle-rise var(--particle-dur, 5s) linear infinite;
  animation-delay: var(--particle-delay, 0s);
}

/* --- Acessibilidade: NADA se move sob prefers-reduced-motion -------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-float,
  .anim-glow-pulse,
  .anim-blink,
  .anim-shimmer::after,
  .anim-rise-in,
  .anim-particle {
    animation: none !important;
  }
  .anim-shimmer::after { opacity: 0 !important; }
  .anim-rise-in { opacity: 1; transform: none; }
  .anim-particle { opacity: 0; } /* partículas paradas não fazem sentido */
}