/* ============================================================
   VELA — Animações
   Keyframes da linguagem de movimento do Vela.
   Uso: animation: var(--animate-vela-up);  ou classes .vela-anim-*
   ============================================================ */

@keyframes velaUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}

@keyframes velaPop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}

@keyframes velaFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes velaSpin {
  100% { transform: rotate(360deg); }
}

@keyframes velaPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}

@keyframes velaShimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

@keyframes velaRise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

@keyframes velaDraw {
  100% { stroke-dashoffset: 0; }
}

@keyframes velaGrowY {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes velaGrowX {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

@keyframes velaReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

/* Sweep de gráfico donut/pizza — anima o ângulo do conic-gradient.
   Requer @property (Chrome/Edge/Safari 16.4+). Fallback: valor final estático. */
@property --vela-arc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes velaArc {
  0%   { --vela-arc: 0deg; }
  100% { --vela-arc: var(--vela-arc-end, 360deg); }
}

/* Skeleton / shimmer de carregamento */
@keyframes velaSkeleton {
  0%   { background-position: -160% 0; }
  100% { background-position: 160% 0; }
}

/* ---------- Classes utilitárias ---------- */
.vela-anim-up      { animation: velaUp 0.35s ease both; }
.vela-anim-pop     { animation: velaPop 0.25s ease both; }
.vela-anim-fade    { animation: velaFade 0.25s ease both; }
.vela-anim-spin    { animation: velaSpin 0.8s linear infinite; }
.vela-anim-pulse   { animation: velaPulse 1.6s ease-in-out infinite; }
.vela-anim-shimmer { animation: velaShimmer 1.6s ease-in-out infinite; }
.vela-anim-rise    { animation: velaRise 0.45s var(--ease-out) both; }
.vela-anim-growy   { animation: velaGrowY 0.5s var(--ease-out) both; transform-origin: bottom; }
.vela-anim-growx   { animation: velaGrowX 0.7s var(--ease-out) both; transform-origin: left; }
.vela-anim-reveal  { animation: velaReveal 0.6s var(--ease-out) both; }
.vela-anim-draw    { stroke-dasharray: 1; stroke-dashoffset: 1; animation: velaDraw 1.1s var(--ease-out) 0.15s forwards; }

/* Stagger simples para listas */
.vela-stagger > * { animation: velaUp 0.35s ease both; }
.vela-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.vela-stagger > *:nth-child(2) { animation-delay: 0.08s; }
.vela-stagger > *:nth-child(3) { animation-delay: 0.12s; }
.vela-stagger > *:nth-child(4) { animation-delay: 0.16s; }
.vela-stagger > *:nth-child(5) { animation-delay: 0.20s; }
.vela-stagger > *:nth-child(6) { animation-delay: 0.24s; }
.vela-stagger > *:nth-child(7) { animation-delay: 0.28s; }
.vela-stagger > *:nth-child(8) { animation-delay: 0.32s; }