/*
 * Initial animations for the loading screen. These styles are defined statically here to avoid a glitch when
 * Nitro (cssreskin) activates.
 * TODO(sami): Once Nitro ships, move these back to the main stylesheet.
 */
.normal-loading {
  --neara-red: #F9423A;
  --loading-animation-duration: 335ms;
  --loading-animation-curve: cubic-bezier(0.2, 0.2, 0.38, 0.9);

  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  animation: loading-bg-fade-in var(--loading-animation-duration) var(--loading-animation-curve) forwards;

  transition: opacity 335ms, display 1s;
}

@keyframes loading-bg-fade-in {
  0%   { background-color: #000; }
  100% { background-color: var(--neara-red); }
}

@keyframes loading-fade-in {
  0%   { opacity: 0.0 }
  100% { opacity: 1.0 }
}

@keyframes loading-scale-in {
  0%   { opacity: 0.0; transform: scale(0.6) }
  100% { opacity: 1.0; transform: scale(1.0) }
}

.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;

  animation: loading-scale-in var(--loading-animation-duration) var(--loading-animation-curve) forwards;
}