.utility-nav a,
.primary-action,
.secondary-action,
.app-entry,
.filter-button,
.platform-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    box-shadow .22s ease,
    border-color .22s ease,
    transform .22s ease,
    filter .22s ease;
}

.utility-nav a::before,
.primary-action::before,
.secondary-action::before,
.app-entry::before,
.filter-button::before,
.platform-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      transparent 0 8%,
      rgba(116, 244, 255, 1) 9% 10%,
      transparent 11% 27%,
      rgba(173, 92, 255, .95) 28% 29%,
      transparent 30% 51%,
      rgba(90, 228, 255, .95) 52% 53%,
      transparent 54% 73%,
      rgba(164, 88, 255, .9) 74% 75%,
      transparent 76%
    );
  background-size: 180% 180%;
  filter:
    drop-shadow(0 0 5px rgba(76, 225, 255, .95))
    drop-shadow(0 0 12px rgba(133, 73, 255, .75));
  mix-blend-mode: screen;
}

.utility-nav a::after,
.primary-action::after,
.secondary-action::after,
.app-entry::after,
.filter-button::after,
.platform-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8% 20%, rgba(133, 245, 255, 1) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 78%, rgba(182, 105, 255, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 12%, rgba(117, 239, 255, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 71% 82%, rgba(165, 91, 255, .95) 0 2px, transparent 3px),
    radial-gradient(circle at 91% 33%, rgba(126, 244, 255, 1) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 8px rgba(81, 225, 255, .95));
}

.utility-nav a:hover,
.primary-action:hover,
.secondary-action:hover,
.app-entry:hover,
.filter-button:hover,
.platform-card:hover {
  border-color: rgba(113, 236, 255, .95);
  box-shadow:
    0 0 0 1px rgba(94, 231, 255, .82),
    0 0 14px rgba(51, 211, 255, .55),
    0 0 30px rgba(132, 74, 255, .35),
    inset 0 0 18px rgba(62, 218, 255, .08);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.utility-nav a:hover::before,
.primary-action:hover::before,
.secondary-action:hover::before,
.app-entry:hover::before,
.filter-button:hover::before,
.platform-card:hover::before {
  animation: ov-electric-travel 950ms linear infinite;
  opacity: .95;
}

.utility-nav a:hover::after,
.primary-action:hover::after,
.secondary-action:hover::after,
.app-entry:hover::after,
.filter-button:hover::after,
.platform-card:hover::after {
  animation: ov-particles 800ms ease-in-out infinite alternate;
  opacity: .9;
}

.lightning-hit {
  animation: ov-button-glow 620ms ease-out;
}

.lightning-hit::before {
  animation: ov-lightning-strike 620ms ease-out !important;
}

.lightning-hit::after {
  animation: ov-particle-burst 620ms ease-out !important;
}

@keyframes ov-electric-travel {
  0% {
    background-position: 0% 50%;
    transform: scale(.99);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.015);
  }
  100% {
    background-position: 0% 50%;
    transform: scale(.99);
  }
}

@keyframes ov-particles {
  0% {
    opacity: .35;
    transform: scale(.98);
  }
  100% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes ov-lightning-strike {
  0% {
    opacity: 0;
    transform: scale(.93) rotate(-1deg);
  }
  12% {
    opacity: 1;
  }
  28% {
    opacity: .25;
  }
  43% {
    opacity: 1;
    transform: scale(1.025) rotate(.6deg);
  }
  65% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes ov-particle-burst {
  0% {
    opacity: 0;
    transform: scale(.88);
  }
  22% {
    opacity: 1;
  }
  58% {
    opacity: .9;
    transform: scale(1.06);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

@keyframes ov-button-glow {
  0% {
    box-shadow: inherit;
  }
  30% {
    box-shadow:
      0 0 0 2px rgba(111, 240, 255, 1),
      0 0 22px rgba(58, 213, 255, .88),
      0 0 46px rgba(145, 73, 255, .62),
      inset 0 0 20px rgba(82, 224, 255, .14);
  }
  100% {
    box-shadow: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightning-hit,
  .lightning-hit::before,
  .lightning-hit::after,
  .utility-nav a::before,
  .utility-nav a::after,
  .primary-action::before,
  .primary-action::after,
  .secondary-action::before,
  .secondary-action::after,
  .app-entry::before,
  .app-entry::after,
  .filter-button::before,
  .filter-button::after,
  .platform-card::before,
  .platform-card::after {
    animation: none !important;
  }

  .utility-nav a:hover,
  .primary-action:hover,
  .secondary-action:hover,
  .app-entry:hover,
  .filter-button:hover,
  .platform-card:hover {
    transform: none;
  }
}