/*
 * The Agape loading screen: the app's light canvas from edge to edge, the
 * Agape mark and a thin progress bar. Shared by the first paint (index.html)
 * and the app (components/shared/LoadingVideo.jsx); keep their markup the
 * same. The top row is exactly the canvas #f4f7fc, the colour the installed
 * iPhone gives the status bar band (owner, 2026-10-17).
 * The moving car is gone (owner, 2026-11-03: "remove the loading moving car
 * if it is bad idea"): it held every reload and sign-in for its drive-in,
 * downloaded a 114 KB picture and ran a dozen animations while the app was
 * busiest starting. The screen now leaves as soon as the app is ready.
 * Linked with ?v=… because Hosting caches /brand/* for a year.
 */

/* Daylight, edge to edge (the class keeps its old name). */
.agape-night {
  background:
    radial-gradient(90% 55% at 50% 52%, rgb(42 82 172 / 9%) 0%, rgb(42 82 172 / 0%) 70%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3fb 55%, #e7eef9 100%);
  background-color: #f4f7fc;
}

/* The first paint, over the app until the app's own screen is drawn. */
.agape-initial-overlay {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The Agape mark, a little above the middle. */
.agape-drive-still {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(36vw, 160px);
  translate: -50% -50%;
  border-radius: 22%;
}

.agape-initial-progress {
  position: absolute;
  bottom: max(12vh, 2.5rem);
  left: 50%;
  width: 160px;
  height: 4px;
  margin-left: -80px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(15 23 42 / 10%);
}

.agape-initial-progress::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: #2a52ac;
  animation: agape-progress-slide 1.4s ease-in-out infinite alternate;
}

@keyframes agape-progress-slide {
  to { transform: translateX(150%); }
}

@media (prefers-reduced-motion: reduce) {
  .agape-initial-progress::after { animation: none; }
}