/* Supplemental loader styles (layout + animation inlined in index.html). */

#ocheplayBootLoader[hidden] {
  display: none !important;
}

#ocheplayBootLoader.is-dismissing {
  pointer-events: none;
  -webkit-animation: ocheBootLoaderFade 320ms ease forwards;
  animation: ocheBootLoaderFade 320ms ease forwards;
}

@-webkit-keyframes ocheBootLoaderFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes ocheBootLoaderFade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#ocheplayBootLoader .ocheplay-mark {
  -webkit-filter: drop-shadow(0 0 28px rgba(166, 230, 0, 0.28));
  filter: drop-shadow(0 0 28px rgba(166, 230, 0, 0.28));
  -webkit-animation: ocheMarkGlow 2.8s ease-in-out infinite;
  animation: ocheMarkGlow 2.8s ease-in-out infinite;
}

@-webkit-keyframes ocheMarkGlow {
  0%, 100% {
    -webkit-filter: drop-shadow(0 0 22px rgba(166, 230, 0, 0.22));
  }
  50% {
    -webkit-filter: drop-shadow(0 0 34px rgba(166, 230, 0, 0.38));
  }
}

@keyframes ocheMarkGlow {
  0%, 100% {
    filter: drop-shadow(0 0 22px rgba(166, 230, 0, 0.22));
  }
  50% {
    filter: drop-shadow(0 0 34px rgba(166, 230, 0, 0.38));
  }
}

@media (min-width: 768px) {
  #ocheplayBootLoader .ocheplay-mark {
    width: 260px;
    height: 260px;
  }

  #ocheplayBootLoader .ocheplay-logo {
    font-size: 76px;
  }
}

body.app-boot-loading {
  background: #050505 !important;
  overflow: hidden !important;
}

body.app-boot-loading .app-shell,
body.app-boot-loading .release-overlay {
  display: none !important;
}

body.app-boot-loading .auth-overlay {
  z-index: 100000;
}

body.app-boot-loading .auth-overlay:not(.visible) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #ocheplayBootLoader .ocheplay-mark {
    -webkit-animation: none;
    animation: none;
  }
}