/* Spec 636: the boot spinner of index.html, shown from the first paint until React's first render replaces it.
   A file, never a style element: the strict CSP reported beside the enforced one has no 'unsafe-inline' in
   style-src (deploy/vps-subdomain-setup.sh, spec 376). Colours are the theme's tokens, never literals
   (scripts/check-colors.sh): in a build the app's stylesheet is linked from <head> too, so they are there at the
   first paint; data-theme, set by theme-boot.js, picks the scheme. The ground is the body's (packages/theme
   base.css), the same before and after the app renders. */
.pn-boot-page {
  display: flex;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  color: var(--pn-color-primary);
}

/* The page's first-level heading, for assistive technology only (axe best practice: a page has a main landmark and
   an h1). The operator sees the mark and nothing else. */
.pn-boot-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pn-boot-mark {
  animation: pn-boot-spin 1s linear infinite;
}

@keyframes pn-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* WCAG 2.3.3: the mark stays, still. */
@media (prefers-reduced-motion: reduce) {
  .pn-boot-mark {
    animation: none;
  }
}