/*
 * Grid Void — animations + animation-driven utility classes.
 *
 * Same composition as midnight-ops/animations.css. Keyframes that
 * reference theme color values use grid-void's orange (since this
 * theme aliases the "red" semantic role to MCP-orange `#ff6b1a`).
 * Other keyframes that bind to CSS vars (`--accent-secondary`) work
 * unchanged.
 */

/* ─── Topology animations ────────────────────────────────────────── */

@keyframes topology-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.topology-pulse {
  animation: topology-pulse 1.2s ease-in-out infinite;
}

@keyframes inject-alert-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
}

@keyframes inject-alert-icon-flash {
  0%,
  100% {
    filter: drop-shadow(0 0 6px var(--accent-secondary))
      drop-shadow(0 0 12px var(--accent-secondary));
  }
  50% {
    filter: drop-shadow(0 0 2px var(--accent-secondary));
  }
}

.inject-alert-pulse {
  animation: inject-alert-pulse 0.9s ease-in-out infinite;
}

.inject-alert-icon {
  animation: inject-alert-icon-flash 0.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .inject-alert-pulse,
  .inject-alert-icon {
    animation: none;
  }
}

@keyframes topology-attack-dash {
  to {
    stroke-dashoffset: -10;
  }
}

/* ─── Crisis moment animations ──────────────────────────────────── */
@keyframes crisis-flash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
  }
}

@keyframes crisis-banner-enter {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Grid-void aliases red → orange (#ff6b1a). Crisis flash uses orange. */
@keyframes crisis-pulse-border {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 107, 26, 0.1);
    border-color: rgba(255, 107, 26, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 107, 26, 0.3);
    border-color: rgba(255, 107, 26, 0.8);
  }
}

.crisis-flash {
  animation: crisis-flash 400ms ease-out forwards;
}

.crisis-banner-enter {
  animation: crisis-banner-enter 300ms ease-out forwards;
}

.crisis-pulse-border {
  animation: crisis-pulse-border 1s ease-in-out infinite;
}

/* ─── Homepage target cursor ────────────────────────────────────── */
@keyframes target-cursor-pulse {
  0%,
  100% {
    transform-origin: center;
    scale: 1;
  }
  50% {
    scale: 1.12;
  }
}

.target-cursor-pulse > svg {
  animation: target-cursor-pulse 1.4s ease-in-out infinite;
  transform-origin: center;
}