.ehle-electric-title {
  position: relative;
  isolation: isolate;
  color: var(--ehle-text-color, #ffffff);
  text-shadow:
    0 0 4px var(--ehle-text-color, #ffffff),
    0 0 10px var(--ehle-primary-color, #00d9ff),
    0 0 20px var(--ehle-secondary-color, #009dff),
    0 0 40px var(--ehle-deep-color, #006eff);
  animation: ehleElectricTextPulse 2.4s infinite ease-in-out;
}

.ehle-electric-title::before,
.ehle-electric-title::after {
  content: attr(data-ehle-electric-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.ehle-electric-title::before {
  color: var(--ehle-glow-color, #00eaff);
  filter: blur(8px);
  opacity: 0.75;
  animation: ehleElectricGlow 1.8s infinite alternate;
}

.ehle-electric-title::after {
  color: var(--ehle-text-color, #ffffff);
  opacity: 0;
  transform: translateX(0);
  animation: ehleElectricGlitch 3.2s infinite;
}

.ehle-electric-title.ehle-is-shocked {
  animation:
    ehleElectricTextPulse 2.4s infinite ease-in-out,
    ehleElectricShake 0.18s linear;
}

.ehle-electric-svg {
  position: absolute;
  left: calc(var(--ehle-svg-padding, 18px) * -1);
  top: calc(var(--ehle-svg-padding, 18px) * -1);
  width: calc(100% + var(--ehle-svg-extra, 36px));
  height: calc(100% + var(--ehle-svg-extra, 36px));
  overflow: visible;
  pointer-events: none;
  z-index: 999;
  display: block;
  max-width: none;
}

.ehle-electric-bolt {
  fill: none;
  stroke: var(--ehle-bolt-color, #7df9ff);
  stroke-width: var(--ehle-bolt-stroke-width, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px var(--ehle-text-color, #ffffff))
    drop-shadow(0 0 8px var(--ehle-primary-color, #00d9ff))
    drop-shadow(0 0 14px var(--ehle-deep-color, #0077ff));
  opacity: 0;
}

.ehle-electric-bolt.ehle-bolt-active {
  opacity: 1 !important;
}

.ehle-electric-finished,
.ehle-electric-finished::before,
.ehle-electric-finished::after {
  animation: none !important;
}

.ehle-electric-finished::before,
.ehle-electric-finished::after {
  content: none !important;
  opacity: 0 !important;
  filter: none !important;
}

.ehle-electric-title:not(.ehle-electric-finished):hover {
  color: var(--ehle-text-color, #ffffff);
  text-shadow:
    0 0 6px var(--ehle-text-color, #ffffff),
    0 0 16px var(--ehle-bolt-color, #7df9ff),
    0 0 36px var(--ehle-primary-color, #00d9ff),
    0 0 70px var(--ehle-deep-color, #006eff),
    0 0 110px var(--ehle-deep-color, #003cff);
}

@keyframes ehleElectricTextPulse {
  0%,
  100% {
    text-shadow:
      0 0 4px var(--ehle-text-color, #ffffff),
      0 0 10px var(--ehle-primary-color, #00d9ff),
      0 0 20px var(--ehle-secondary-color, #009dff),
      0 0 40px var(--ehle-deep-color, #006eff);
  }

  50% {
    text-shadow:
      0 0 2px var(--ehle-text-color, #ffffff),
      0 0 18px var(--ehle-bolt-color, #7df9ff),
      0 0 32px var(--ehle-primary-color, #00d9ff),
      0 0 58px var(--ehle-deep-color, #006eff);
  }
}

@keyframes ehleElectricGlow {
  from {
    opacity: 0.35;
    filter: blur(6px);
  }

  to {
    opacity: 0.9;
    filter: blur(14px);
  }
}

@keyframes ehleElectricGlitch {
  0%,
  88%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  89% {
    opacity: 0.65;
    transform: translateX(-2px);
  }

  90% {
    opacity: 0.2;
    transform: translateX(3px);
  }

  91% {
    opacity: 0.75;
    transform: translateX(-1px);
  }

  92% {
    opacity: 0;
    transform: translateX(0);
  }
}

@keyframes ehleElectricShake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1px, 1px);
  }

  50% {
    transform: translate(2px, -1px);
  }

  75% {
    transform: translate(-2px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ehle-electric-title,
  .ehle-electric-title::before,
  .ehle-electric-title::after {
    animation: none !important;
  }

  .ehle-electric-svg {
    display: none;
  }
}