/* The cold-load cover, shared by index.html's first paint and React's copy so
   the mark's fade carries across the handoff. Timings match src/boot.tsx.
   Without `data-boot-at` (sign-in, registration, the gallery) there is no
   cover to paint. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--page, #081328);
}
:root[data-theme="light"] .boot {
  background: var(--page, #f3f6fb);
}
:root:not([data-boot-at]) .boot {
  display: none;
}
.boot-mark {
  width: 72px;
  height: auto;
  animation: boot-enter 400ms cubic-bezier(0.2, 0.7, 0.2, 1)
    var(--boot-delay, 0ms) both;
}
.boot-mark-light,
:root[data-theme="light"] .boot-mark-dark {
  display: none;
}
:root[data-theme="light"] .boot-mark-light {
  display: block;
}
/* Ready content is revealed immediately with a short exit. */
.boot[data-exiting] {
  animation: boot-exit 150ms ease-in var(--boot-exit-delay, 0ms) both;
}
.boot[data-exiting] .boot-mark {
  animation: boot-mark-exit 100ms cubic-bezier(0.4, 0, 1, 1)
    var(--boot-exit-delay, 0ms) both;
}
@keyframes boot-enter {
  from {
    opacity: 0;
  }
}
@keyframes boot-mark-exit {
  to {
    opacity: 0;
  }
}
@keyframes boot-exit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-mark {
    animation: none;
  }
  .boot[data-exiting],
  .boot[data-exiting] .boot-mark {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}