.eaa-intro-lottie {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  overflow: hidden;
  background: #d32737;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

html.eaa-intro-pending,
html.eaa-intro-active {
  overflow: hidden;
}

html.eaa-intro-pending body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: #d32737;
}

html.eaa-intro-active .eaa-intro-lottie {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.eaa-intro-leaving .eaa-intro-lottie {
  opacity: 0;
  visibility: visible;
}

.eaa-intro-lottie svg,
.eaa-intro-lottie canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.eaa-intro-animation {
  height: 100%;
  inset: 0;
  opacity: 1;
  position: absolute;
  transition: opacity .18s ease;
  width: 100%;
}

.eaa-intro-brand {
  height: auto;
  left: 50%;
  max-width: min(620px, 72vw);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .28s ease, transform .38s cubic-bezier(.2, .75, .25, 1);
  width: min(620px, 72vw);
}

html.eaa-intro-branded .eaa-intro-animation {
  opacity: 0;
}

html.eaa-intro-branded .eaa-intro-brand {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

main > .page-spinner {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.eaa-intro-pending body::before,
  .eaa-intro-lottie {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .eaa-intro-brand {
    max-width: 82vw;
    width: 82vw;
  }
}