.cover, .login-screen, .main-shell {
  position: relative;
  isolation: isolate;
  --spark: radial-gradient(circle, #ff9a9c 0 0.6px, #ff2538 0.9px 1.2px,
    #ff152c80 1.65px, #eb001333 3px, transparent 6px);
  --spark-bright: radial-gradient(circle, #ffb8b9 0 0.55px, #ff3142 0.85px 1.55px,
    #ff0018a8 2px, #ff00174d 3.8px, transparent 7.5px);
}

:is(.cover, .login-screen, .main-shell)::before,
:is(.cover, .login-screen, .main-shell)::after {
  content: "";
  position: fixed;
  inset: 9vh 8vw;
  z-index: -1;
  pointer-events: none;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

:is(.cover, .login-screen, .main-shell)::before {
  background-image: var(--spark-bright), var(--spark), var(--spark), var(--spark-bright),
    var(--spark), var(--spark), var(--spark-bright), var(--spark), var(--spark), var(--spark-bright);
  background-position: 8% 18%, 16% 62%, 23% 34%, 28% 85%, 36% 9%,
    49% 72%, 63% 21%, 76% 54%, 85% 35%, 95% 80%;
  animation: g4life-sparks 8s -1s linear infinite;
}

:is(.cover, .login-screen, .main-shell)::after {
  background-image: var(--spark), var(--spark-bright), var(--spark), var(--spark-bright),
    var(--spark-bright), var(--spark), var(--spark), var(--spark-bright), var(--spark);
  background-position: 5% 77%, 13% 45%, 22% 12%, 40% 57%, 50% 8%,
    60% 88%, 72% 69%, 84% 15%, 92% 43%;
  animation: g4life-sparks 11s -5s linear infinite reverse;
}

@keyframes g4life-sparks {
  0%, 100% { transform: translate3d(-7vw, 0, 0); opacity: .82; }
  14% { transform: translate3d(-5vw, -5vh, 0); }
  29% { transform: translate3d(0, -8vh, 0); opacity: 1; }
  43% { transform: translate3d(5vw, -5vh, 0); }
  57% { transform: translate3d(7vw, 0, 0); opacity: .78; }
  71% { transform: translate3d(4vw, 6vh, 0); }
  85% { transform: translate3d(-2vw, 8vh, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.cover, .login-screen, .main-shell)::before,
  :is(.cover, .login-screen, .main-shell)::after {
    animation: none;
    opacity: .82;
  }
}