/* Shared icon-only loading screen, including the first HTML paint. */
.loading-screen {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(32px, env(safe-area-inset-top)) 24px
    max(32px, env(safe-area-inset-bottom));
  background: #11100e;
  color: #f5f2ed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}
.loading-screen section {
  width: min(100%, 420px);
}
.loading-icon {
  position: relative;
  width: 104px;
  height: 104px;
  margin: auto;
}
.loading-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.loading-icon::before {
  content: "";
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffa84b0c, transparent 68%);
  pointer-events: none;
}
.loading-icon-trace {
  stroke-dasharray: 52 188;
  animation: icon-trace 2.6s linear infinite;
}
.loading-icon-mark {
  animation: icon-breathe 2.6s ease-in-out infinite;
}
.loading-screen .loading-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.loading-screen [role="alert"] {
  margin: 24px 0 16px;
  color: #ffbf9c;
  line-height: 1.6;
}
.loading-screen [data-verification-widget] {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.loading-screen [data-verification-widget]:empty {
  margin: 0;
}
.loading-screen[data-busy="false"] .loading-icon-trace,
.loading-screen[data-busy="false"] .loading-icon-mark {
  animation-play-state: paused;
}
@keyframes icon-trace {
  from {
    stroke-dashoffset: 240;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes icon-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-icon-trace,
  .loading-icon-mark {
    animation: none;
  }
  .loading-icon-trace {
    stroke-dasharray: none;
    opacity: 0.6;
  }
}

/* Hold the icon for one second, then crossfade into the ready app. */
.startup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #11100e;
}
.startup-overlay[data-phase="fading"] {
  animation: startup-hide 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.startup-reveal[data-phase="fading"] {
  animation: startup-show 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes startup-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes startup-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .startup-overlay[data-phase="fading"],
  .startup-reveal[data-phase="fading"] {
    animation: none;
  }
}

/* Mount and decode first-screen covers behind the startup overlay. */
.startup-reveal[data-phase="loading"] {
  opacity: 0;
}
.startup-reveal[data-phase="loading"] .tmdb-artwork,
.startup-reveal[data-phase="loading"] .artwork-placeholder {
  transition: none;
}