/* --- Electric Matrix Grid Animation (V2 - Full Card) --- */
:root {
  --electric-color: #19d3b1;
  --electric-glow: rgba(25, 211, 177, 0.3);
  --grid-color: rgba(28, 142, 164, 0.2);
  --node-flare-color: #5cf7d2;
  --pcb-deep: #02131a; /* Example dark background */
}

.electric-boost {
  position: relative;
  overflow: hidden; /* This MUST be hidden to contain the effect */
  z-index: 0;
  isolation: isolate;
  background-color: var(--pcb-deep);
}

/* The overlay holds all animation elements */
.electric-boost .electric-overlay {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Faint background grid that appears on active state */
.electric-boost.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0;
  animation: grid-fade-in 0.8s ease-out forwards;
}

@keyframes grid-fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}


/* --- SVG Spark Path Styles --- */
/* NEW: SVG canvas is larger than the card to prevent clipping at the edges */
.electric-boost .spark-svg {
  position: absolute;
  left: -5%;
  top: -5%;
  width: 110%;
  height: 110%;
  overflow: visible;
  mix-blend-mode: screen;
}

.electric-boost .spark-path {
  fill: none;
  stroke: var(--electric-color);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px var(--electric-color)) drop-shadow(0 0 10px var(--electric-glow));
  
  /* NEW: Adjusted dasharray for longer paths. Short dash (15), long gap (800) */
  stroke-dasharray: 15 800;
  stroke-dashoffset: 815;
  opacity: 0;
  
  animation: spark-traverse 1.2s cubic-bezier(0.2, 0.8, 0.5, 1) forwards;
}

@keyframes spark-traverse {
  0% {
    stroke-dashoffset: 815;
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -815;
    opacity: 0;
  }
}


/* --- Grid Node Flares (at entry/exit points) --- */
.electric-boost .grid-node {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--node-flare-color);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  box-shadow: 0 0 8px var(--node-flare-color), 0 0 16px var(--electric-glow);
  animation: node-flare 0.5s ease-out forwards;
}

@keyframes node-flare {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}


/* Subtle glow on the card during active */
.electric-boost.active {
  box-shadow: 0 18px 34px rgba(3,34,40,0.55), 0 0 60px rgba(71,255,222,0.15) inset;
}