/* Shared page and photo-preparation feedback; no artificial loading time. */
.loading-wordmark {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: calc(16 / var(--rem-base, 16) * 1rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--fg);
}
.loading-wordmark__letter {
  animation: dae-loading-letter 1.35s ease-in-out infinite;
}
.loading-wordmark__letter:nth-child(2) { animation-delay: .055s; }
.loading-wordmark__letter:nth-child(3) { animation-delay: .11s; }
.loading-wordmark__letter:nth-child(4) { animation-delay: .165s; }
.loading-wordmark__letter:nth-child(5) { animation-delay: .22s; }
.loading-wordmark__letter:nth-child(6) { animation-delay: .275s; }
.loading-wordmark__letter:nth-child(7) { animation-delay: .33s; }
.loading-wordmark__letter:nth-child(8) { animation-delay: .385s; }
.loading-wordmark__letter:nth-child(9) { animation-delay: .44s; }
.loading-wordmark__letter:nth-child(10) { animation-delay: .495s; }

.loading-screen {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgb(255 255 255 / 50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg);
  overscroll-behavior: contain;
  touch-action: pan-y;
  overflow-y: auto;
  /* Covering the page must not leave invisible buttons tappable underneath. */
  pointer-events: auto;
}
.loading-screen__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(260px, 100%);
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  text-align: center;
}
.loading-screen__spinner {
  box-sizing: border-box;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--fg-strong);
  border-radius: 50%;
  animation: dae-loading-spin .8s linear infinite;
}
.loading-screen__tip {
  margin: 20px 0 0;
  color: var(--fg-strong);
  font: 400 calc(13 / var(--rem-base, 16) * 1rem)/1.5 var(--font-body);
  text-wrap: pretty;
}
.loading-screen__tip-text { display: block; min-height: 3em; }
.loading-screen__wait { width: 100%; margin-top: 16px; color: var(--fg-strong); font: 400 var(--text-xs)/1.5 var(--font-body); }
.loading-screen__wait p { margin: 0 0 10px; }
.loading-screen__wait button { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; touch-action: manipulation; }
.loading-screen__wait button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.loading-screen__wait[hidden] { display: none; }
.loading.loading-screen { display: none; }
.page-loading[hidden] { display: none; }
/* iPhone's native observer also covers the wait before the server sends HTML. */
html[data-native-loading-wordmark="1"] .page-loading { display: none; }

@keyframes dae-loading-letter {
  0%, 70%, 100% { opacity: .7; }
  35% { opacity: 1; }
}
@keyframes dae-loading-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .loading-wordmark__letter { animation: none; opacity: 1; }
  .loading-screen__spinner { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .loading-screen { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}