/*
 * The start-up screen (the app's Figma S0): index.html shows it while the site loads, and the
 * phone scanner keeps it up until the camera is ready. Plain CSS with the palette written out,
 * because it shows before the app's own styles arrive.
 */
/* Light only, whatever the phone's theme: browsers that darken pages leave this one alone. */
:root {
  color-scheme: only light;
}

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 24px 24px calc(32px + env(safe-area-inset-bottom));
  overflow: hidden;
  /* White, so the logo keeps its own navy and red; a faint navy dot pattern. --text for words. */
  background-color: #ffffff;
  background-image: radial-gradient(rgba(37, 37, 125, 0.07) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
  color: #1b2333;
  font-family:
    'Poppins',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  text-align: center;
}

.app-loader__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* The full QuickLook logo (its magnifier square is the app icon) in its own blue, navy and red. */
.app-loader__logo {
  display: block;
  width: min(260px, 72vw);
  height: auto;
  margin-bottom: 12px;
}

.app-loader__tagline {
  margin: 0;
  font-size: 15px;
  color: #556070;
}

.app-loader__status {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 14px;
}

.app-loader__track {
  position: relative;
  width: 160px;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(37, 37, 125, 0.12);
}

.app-loader__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 6px;
  border-radius: 3px;
  background: #d3141c;
  animation: app-loader-slide 1.1s ease-in-out infinite;
}

.app-loader__footer {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  color: #556070;
}

/* The app version, quietly under the footer (empty, so hidden, on the dev server). */
.app-loader__version {
  position: relative;
  margin: -22px 0 0;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #556070;
}

.app-loader__version:empty {
  display: none;
}

@keyframes app-loader-slide {
  from {
    transform: translateX(-64px);
  }
  to {
    transform: translateX(160px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader__bar {
    animation: none;
    transform: translateX(48px);
  }
}