.site-intro {
  position: fixed;
  z-index: 500;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: radial-gradient(circle at center, #17231a 0, #0b0b0a 48%, #050505 100%);
  animation:
    storm-sky 1.7s steps(1, end) both,
    intro-exit .65s 1.75s ease-in-out forwards;
  place-items: center;
}

.site-intro::before {
  position: absolute;
  width: min(72vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(0, 236, 86, .2);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(0, 236, 86, .12), inset 0 0 60px rgba(0, 236, 86, .04);
  content: "";
  animation: intro-ring 1.8s ease-out both;
}

.site-intro::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(188, 255, 213, .34), transparent 42%);
  opacity: 0;
  content: "";
  animation: electric-arcs 1.55s .08s steps(1, end) both;
  pointer-events: none;
}

.site-intro img {
  position: relative;
  width: min(72vw, 560px);
  max-height: 70vh;
  filter: brightness(.35) drop-shadow(0 0 0 transparent);
  opacity: 0;
  transform: scale(.82);
  animation: intro-logo 1.55s .12s cubic-bezier(.2, .75, .25, 1) forwards;
}

@keyframes intro-logo {
  0% { opacity: 0; transform: scale(.82); }
  18% { opacity: .25; filter: brightness(1.8) drop-shadow(0 0 12px #00ec56); }
  22% { opacity: .06; }
  34% { opacity: .8; filter: brightness(1.35) drop-shadow(0 0 32px #00ec56); transform: scale(.94); }
  39% { opacity: .35; transform: scale(.93) translateX(2px); }
  48% { opacity: 1; filter: brightness(1.18) drop-shadow(0 0 42px rgba(0, 236, 86, .75)); transform: scale(1); }
  66%, 100% { opacity: 1; filter: brightness(1) drop-shadow(0 0 24px rgba(0, 236, 86, .28)); transform: scale(1); }
}

@keyframes electric-arcs {
  0%, 9%, 16%, 29%, 39%, 58%, 100% { opacity: 0; }
  10%, 14%, 30%, 36%, 40%, 46%, 59%, 63% { opacity: 1; }
  12%, 34%, 43%, 61% { opacity: .28; transform: scale(1.015); }
}

@keyframes storm-sky {
  0%, 8%, 17%, 28%, 38%, 57%, 66%, 100% {
    background-color: #050505;
    filter: brightness(1);
  }
  9%, 15%, 29%, 36%, 58%, 64% {
    background-color: #203128;
    filter: brightness(1.55);
  }
  12%, 33%, 61% {
    background-color: #d6f4df;
    filter: brightness(1.9);
  }
}

@keyframes intro-ring {
  from { opacity: 0; transform: scale(.55); }
  45% { opacity: 1; }
  to { opacity: 0; transform: scale(1.08); }
}

@keyframes intro-exit {
  to { visibility: hidden; opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro { animation-duration: .01ms; animation-delay: .01ms; }
  .site-intro::before,
  .site-intro::after,
  .site-intro img { animation: none; }
}