/* A only. 800ms fade-in + 500ms hold + 400ms fade-out.
   CSS owns the end state, so the page never depends on JavaScript. */
.opening {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
  animation: opening-exit 400ms ease 1300ms both;
}
.opening-brand {
  text-align: center;
  animation: opening-logo 800ms ease-out both;
}
.opening-brand strong { font-size: 64px; }
.opening-brand > span { font-size: 11px; }
.opening-brand small { font-size: 12px; margin-top: 12px; }
/* Keyboard navigation must never occur behind a visible opening. */
body:focus-within .opening { display: none; }
@keyframes opening-logo {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes opening-exit {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .opening { display: none; animation: none; }
  .opening-brand { animation: none; }
}