.velvet-electric-rays-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.velvet-electric-bolt {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: velvetElectricBoltFall var(--duration) cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.velvet-electric-bolt-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: url("#velvet-electric-displace");
}

.velvet-electric-bolt-glow,
.velvet-electric-bolt-hot,
.velvet-electric-bolt-core {
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: velvetElectricBoltDraw var(--duration) ease-out forwards;
}

.velvet-electric-bolt-glow {
  stroke: rgba(255, 45, 10, 0.18);
  stroke-width: 5.5;
  filter: blur(4px);
}

.velvet-electric-bolt-hot {
  stroke: rgba(255, 80, 18, 0.58);
  stroke-width: 1.7;
  filter: blur(0.7px);
}

.velvet-electric-bolt-core {
  stroke: rgba(255, 210, 145, 0.98);
  stroke-width: 0.58;
  filter:
    drop-shadow(0 0 2px rgba(255, 190, 90, 0.9))
    drop-shadow(0 0 5px rgba(255, 60, 0, 0.55));
}

.velvet-electric-bolt-branch.velvet-electric-bolt-glow {
  stroke-width: 4.2;
  opacity: 0.75;
}

.velvet-electric-bolt-branch.velvet-electric-bolt-hot {
  stroke-width: 1.25;
  opacity: 0.72;
}

.velvet-electric-bolt-branch.velvet-electric-bolt-core {
  stroke-width: 0.45;
  opacity: 0.88;
}

.velvet-electric-spark {
  fill: rgba(255, 130, 35, 0.85);
  opacity: 0;
  filter:
    blur(0.3px)
    drop-shadow(0 0 3px rgba(255, 70, 0, 0.65));
  animation: velvetElectricSpark 1s ease-out forwards;
}

@keyframes velvetElectricBoltFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.985);
  }

  10% {
    opacity: 0.95;
  }

  45% {
    opacity: 1;
  }

  82% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--drift), var(--fall), 0) scale(1.01);
  }
}

@keyframes velvetElectricBoltDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--dash);
  }

  12% {
    opacity: 1;
  }

  42% {
    stroke-dashoffset: 0;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes velvetElectricSpark {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0);
  }
}

@media (max-width: 768px) {
  .velvet-electric-bolt-glow {
    stroke-width: 4.3;
    filter: blur(3.2px);
  }

  .velvet-electric-bolt-hot {
    stroke-width: 1.35;
  }

  .velvet-electric-bolt-core {
    stroke-width: 0.5;
  }

  .velvet-electric-bolt-branch.velvet-electric-bolt-glow {
    stroke-width: 3.2;
  }

  .velvet-electric-bolt-branch.velvet-electric-bolt-hot {
    stroke-width: 1;
  }

  .velvet-electric-bolt-branch.velvet-electric-bolt-core {
    stroke-width: 0.4;
  }
}