/* ═══════════════════════════════════════
   STATS LIGHTNING VEINS
   Galhos de raio que crescem das bordas dos cards
   conforme o usuário scrolla pela seção. O glow
   intensifica conforme cada galho é desenhado, via
   CSS var --draw (0..1) setada pelo JS.
═══════════════════════════════════════ */

.stats-section {
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

.stats-veins {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.stats-veins .vein {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.55 + var(--draw, 0) * 0.45);
  filter: drop-shadow(0 0 calc(3px + var(--draw, 0) * 9px) rgba(255, 153, 0, calc(0.35 + var(--draw, 0) * 0.45)));
  will-change: stroke-dashoffset, opacity, filter;
}

.stats-veins .vein-up { stroke: url(#vein-grad-up); }
.stats-veins .vein-down { stroke: url(#vein-grad-down); }
.stats-veins .vein-left { stroke: url(#vein-grad-left); }
.stats-veins .vein-right { stroke: url(#vein-grad-right); }

.stats-veins .vein-sub {
  stroke-width: 1;
  opacity: calc(0.4 + var(--draw, 0) * 0.5);
  filter: drop-shadow(0 0 calc(2px + var(--draw, 0) * 6px) rgba(255, 153, 0, calc(0.25 + var(--draw, 0) * 0.35)));
}

/* Mobile: padding menor, SVG ocupa 100% (sem max-width) */
@media (max-width: 768px) {
  .stats-section {
    padding: 100px 0;
  }
  .stats-veins {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-veins {
    display: none;
  }
}