/* The first-load screen in index.html: the gold coin tossed and caught
   while the app's code downloads. A separate file because the content
   security policy allows no inline styles. Matches CoinLoader's toss. */
.boot-loader {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 40px;
  background: #101223;
  color: #b5b7ce;
  font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  perspective: 430px;
}
@media (prefers-color-scheme: light) {
  .boot-loader { background: #f8f7fc; color: #66677a; }
}
.boot-coin {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  animation: boot-toss 7.5s infinite;
}
.boot-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.boot-tails { transform: rotateX(180deg); }
.boot-shadow {
  width: 50px;
  height: 7px;
  border-radius: 50%;
  background: rgba(127, 127, 150, 0.3);
  animation: boot-shadow 7.5s infinite;
}
.boot-label { margin-top: 10px; }
/* Five tosses in a row, landing tails, heads, heads, tails, heads, so the
   coin looks random without any script (none runs before the app). */
@keyframes boot-toss {
  0% { transform: translateY(0) rotateX(0deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  8.4% { transform: translateY(-40px) rotateX(693deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  16% { transform: translateY(0) rotateX(1260deg) scale(1); }
  17.2% { transform: translateY(0) rotateX(1260deg) scale(1.08, 0.9); }
  18.4%, 19.6% { transform: translateY(0) rotateX(1260deg) scale(1); }
  20% { transform: translateY(0) rotateX(1260deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  28.4% { transform: translateY(-40px) rotateX(1953deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  36% { transform: translateY(0) rotateX(2520deg) scale(1); }
  37.2% { transform: translateY(0) rotateX(2520deg) scale(1.08, 0.9); }
  38.4%, 39.6% { transform: translateY(0) rotateX(2520deg) scale(1); }
  40% { transform: translateY(0) rotateX(2520deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  48.4% { transform: translateY(-40px) rotateX(3114deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  56% { transform: translateY(0) rotateX(3600deg) scale(1); }
  57.2% { transform: translateY(0) rotateX(3600deg) scale(1.08, 0.9); }
  58.4%, 59.6% { transform: translateY(0) rotateX(3600deg) scale(1); }
  60% { transform: translateY(0) rotateX(3600deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  68.4% { transform: translateY(-40px) rotateX(4293deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  76% { transform: translateY(0) rotateX(4860deg) scale(1); }
  77.2% { transform: translateY(0) rotateX(4860deg) scale(1.08, 0.9); }
  78.4%, 79.6% { transform: translateY(0) rotateX(4860deg) scale(1); }
  80% { transform: translateY(0) rotateX(4860deg) scale(1); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  88.4% { transform: translateY(-40px) rotateX(5553deg) scale(1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  96% { transform: translateY(0) rotateX(6120deg) scale(1); }
  97.2% { transform: translateY(0) rotateX(6120deg) scale(1.08, 0.9); }
  98.4%, 99.6% { transform: translateY(0) rotateX(6120deg) scale(1); }
  100% { transform: translateY(0) rotateX(6120deg) scale(1); }
}
@keyframes boot-shadow {
  0%, 16%, 19.6% { transform: scale(1); opacity: 1; }
  8.4% { transform: scale(0.45); opacity: 0.35; }
  20%, 36%, 39.6% { transform: scale(1); opacity: 1; }
  28.4% { transform: scale(0.45); opacity: 0.35; }
  40%, 56%, 59.6% { transform: scale(1); opacity: 1; }
  48.4% { transform: scale(0.45); opacity: 0.35; }
  60%, 76%, 79.6% { transform: scale(1); opacity: 1; }
  68.4% { transform: scale(0.45); opacity: 0.35; }
  80%, 96%, 99.6% { transform: scale(1); opacity: 1; }
  88.4% { transform: scale(0.45); opacity: 0.35; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-coin, .boot-shadow { animation: none; }
}