.lightning-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: rgba(0, 200, 255, .82);
}

.lightning-bg::before,
.lightning-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.lightning-bg::before {
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(0, 200, 255, .26) 18.25%, transparent 18.7% 100%),
    linear-gradient(64deg, transparent 0 72%, rgba(255, 61, 255, .22) 72.2%, transparent 72.68% 100%),
    linear-gradient(132deg, transparent 0 54%, rgba(230, 214, 255, .16) 54.18%, transparent 54.48% 100%);
  animation: hvChargeRail 7.4s steps(1, end) infinite;
}

.lightning-bg::after {
  background:
    radial-gradient(circle at 12% 22%, rgba(0, 200, 255, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(255, 61, 255, .74) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 62%, rgba(230, 214, 255, .68) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 78%, rgba(255, 193, 91, .56) 0 1px, transparent 2px);
  animation: hvSparkPop 5.8s steps(1, end) infinite;
}

.lightning-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lightning-bg .bolt {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  animation: hvLightningFlash 8.8s steps(1, end) infinite;
  filter: drop-shadow(0 0 3px currentColor);
}

.lightning-bg .branch {
  stroke-width: .86;
  animation-name: hvLightningBranch;
}

.lightning-bg .bolt-a { color: rgba(0, 200, 255, .88); animation-delay: -1.2s; }
.lightning-bg .bolt-b { color: rgba(255, 61, 255, .72); animation-delay: -4.7s; animation-duration: 10.4s; }
.lightning-bg .bolt-c { color: rgba(230, 214, 255, .62); animation-delay: -7.2s; animation-duration: 12.2s; }
.lightning-bg .bolt-d { color: rgba(255, 193, 91, .54); animation-delay: -9.1s; animation-duration: 11.6s; }
.lightning-bg .bolt-e { color: rgba(0, 200, 255, .5); animation-delay: -6.4s; animation-duration: 13.8s; }
.lightning-bg .bolt-f { color: rgba(255, 61, 255, .52); animation-delay: -11.3s; animation-duration: 14.6s; }

.links .nav-disabled,
.footer-links .nav-disabled,
.nav-links .nav-disabled,
.footer-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: rgba(196, 196, 226, .42) !important;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
  filter: grayscale(1);
}

.links .nav-disabled::after,
.nav-links .nav-disabled::after {
  content: "Soon";
  padding: 0.2em 0.5em;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(245,247,255,.42);
  font-size: 0.68em;
  letter-spacing: .08em;
}

body > header,
body > main,
body > footer {
  position: relative;
}

body > main,
body > footer {
  z-index: 1;
}

@keyframes hvLightningFlash {
  0%, 51%, 58%, 73%, 100% { opacity: 0; }
  52% { opacity: .18; }
  53% { opacity: 0; }
  54% { opacity: .48; }
  55% { opacity: .1; }
  56% { opacity: .36; }
  57% { opacity: .2; }
  74% { opacity: .12; }
  75% { opacity: 0; }
  76% { opacity: .28; }
  77% { opacity: 0; }
}

@keyframes hvLightningBranch {
  0%, 52%, 57%, 76%, 100% { opacity: 0; }
  53% { opacity: .2; }
  54% { opacity: .58; }
  55% { opacity: .12; }
  56% { opacity: .34; }
  77% { opacity: .32; }
  78% { opacity: 0; }
}

@keyframes hvChargeRail {
  0%, 36%, 43%, 66%, 100% { opacity: 0; }
  37% { opacity: .08; }
  38% { opacity: .22; }
  39% { opacity: .04; }
  40% { opacity: .16; }
  67% { opacity: .12; }
  68% { opacity: 0; }
}

@keyframes hvSparkPop {
  0%, 24%, 30%, 74%, 100% { opacity: 0; }
  25% { opacity: .42; }
  26% { opacity: 0; }
  27% { opacity: .24; }
  75% { opacity: .34; }
  76% { opacity: 0; }
}

@media (max-width: 700px) {
  .lightning-bg .bolt {
    stroke-width: 1.65;
    animation-name: hvLightningMobile;
    filter: drop-shadow(0 0 4px currentColor);
  }

  .lightning-bg .branch {
    stroke-width: 1.05;
    animation-name: hvLightningBranchMobile;
  }

  @keyframes hvLightningMobile {
    0%, 42%, 50%, 68%, 100% { opacity: .08; }
    43% { opacity: .34; }
    44% { opacity: .12; }
    45% { opacity: .64; }
    46% { opacity: .18; }
    47% { opacity: .42; }
    69% { opacity: .28; }
    70% { opacity: .1; }
  }

  @keyframes hvLightningBranchMobile {
    0%, 43%, 48%, 70%, 100% { opacity: .05; }
    44% { opacity: .28; }
    45% { opacity: .58; }
    46% { opacity: .16; }
    71% { opacity: .3; }
    72% { opacity: .05; }
  }

  .lightning-bg::before {
    animation-name: hvChargeRailMobile;
  }

  .lightning-bg::after {
    animation-name: hvSparkPopMobile;
  }

  @keyframes hvChargeRailMobile {
    0%, 28%, 36%, 62%, 100% { opacity: .02; }
    29% { opacity: .18; }
    30% { opacity: .34; }
    31% { opacity: .08; }
    63% { opacity: .2; }
    64% { opacity: .02; }
  }

  @keyframes hvSparkPopMobile {
    0%, 22%, 29%, 72%, 100% { opacity: 0; }
    23% { opacity: .52; }
    24% { opacity: 0; }
    25% { opacity: .32; }
    73% { opacity: .38; }
    74% { opacity: 0; }
  }
}

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

.surface-bolts {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: rgba(0, 200, 255, .78);
  mix-blend-mode: screen;
}

.surface-bolts path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px currentColor);
  animation: hvSurfaceStrike 6.8s steps(1, end) infinite;
}

.surface-bolts .surface-magenta {
  color: rgba(255, 61, 255, .72);
  animation-delay: -2.4s;
  animation-duration: 8.4s;
}

.surface-bolts .surface-gold {
  color: rgba(255, 193, 91, .56);
  animation-delay: -4.2s;
  animation-duration: 9.6s;
}

@keyframes hvSurfaceStrike {
  0%, 48%, 55%, 100% { opacity: 0; }
  49% { opacity: .2; }
  50% { opacity: .74; }
  51% { opacity: .08; }
  52% { opacity: .46; }
  53% { opacity: 0; }
}

@media (max-width: 700px) {
  .surface-bolts path {
    stroke-width: 1.45;
  }
}

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