/* Animation overlays only. The supplied loading-screen image remains unchanged. */
.vr5-splash:not(.is-dismissing) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  isolation: isolate;
  contain: layout paint;
}

.vr5-splash::before,
.vr5-splash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity, background-position;
}

.vr5-splash::before {
  inset: -22% -62%;
  z-index: 1;
  background:
    linear-gradient(
      112deg,
      transparent 36%,
      rgba(133, 94, 255, .025) 42%,
      rgba(225, 216, 255, .20) 48%,
      rgba(255, 255, 255, .32) 50%,
      rgba(178, 134, 255, .12) 53%,
      transparent 61%
    );
  transform: translate3d(-46%, 0, 0);
  opacity: 0;
  animation: vr5-photo-reflection-sweep 2.65s cubic-bezier(.22, .61, .36, 1) infinite;
}

.vr5-splash::after {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(130, 92, 255, .22), transparent 23%),
    radial-gradient(circle at 50% 38%, rgba(180, 130, 255, .15), transparent 18%),
    radial-gradient(circle at 60% 33%, rgba(255, 133, 244, .10), transparent 9%);
  opacity: .32;
  transform: scale(1);
  animation: vr5-photo-reflection-breathe 2.1s ease-in-out infinite alternate;
}

.vr5-splash.is-dismissing {
  transition:
    opacity 620ms cubic-bezier(.16, 1, .3, 1),
    visibility 620ms cubic-bezier(.16, 1, .3, 1),
    filter 620ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes vr5-photo-reflection-sweep {
  0%, 12% {
    transform: translate3d(-46%, 0, 0);
    opacity: 0;
  }
  24% {
    opacity: .68;
  }
  52% {
    opacity: .46;
  }
  76%, 100% {
    transform: translate3d(46%, 0, 0);
    opacity: 0;
  }
}

@keyframes vr5-photo-reflection-breathe {
  0% {
    opacity: .22;
    transform: scale(1);
    background-position: 50% 0;
  }
  100% {
    opacity: .56;
    transform: scale(1.018);
    background-position: 50% 2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vr5-splash::before,
  .vr5-splash::after {
    animation: none !important;
  }
}