.rune-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.rune-spark {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0;
  animation-name: rune-wake;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.rune-spark--gold {
  stroke: #d4a056;
  filter:
    drop-shadow(0 0 2px #ffe7a8)
    drop-shadow(0 0 8px #ff8a1a)
    drop-shadow(0 0 18px #c45a28);
}

.rune-spark--ember {
  stroke: #c45a28;
  filter:
    drop-shadow(0 0 2px #ffd080)
    drop-shadow(0 0 9px #ff4a12)
    drop-shadow(0 0 20px #c42814);
}

.rune-spark--fire {
  stroke: #9a453a;
  filter:
    drop-shadow(0 0 2px #ffb070)
    drop-shadow(0 0 10px #e01810)
    drop-shadow(0 0 22px #8a0c0c);
}

@keyframes rune-wake {
  0% { opacity: 0; }
  10% { opacity: 0.82; }
  16% { opacity: 0.28; }
  24% { opacity: 0.9; }
  38% { opacity: 0.5; }
  52% { opacity: 0.78; }
  78% { opacity: 0.35; }
  100% { opacity: 0; }
}

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