/* Available in the initial HTML, before the application/Three.js downloads. */
html { background: #0a0a0c; }
.boot-screen {
  --boot-ink: var(--ink, #0a0a0c);
  --boot-paper: var(--paper, #f2ede4);
  --boot-plum: var(--violet-base, #81487d);
  --boot-violet: var(--violet-vivid, #a342b6);
  --boot-lavender: var(--flame, #c58bd8);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 28px 40px;
  background: var(--boot-ink);
  color: var(--boot-paper);
  font-family: 'IBM Plex Mono', monospace;
  transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1);
}
.boot-screen[data-leaving="true"] { opacity: 0; pointer-events: none; }
.boot-head, .boot-foot { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; letter-spacing: .16em; }
.boot-head { align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--boot-plum); }
.boot-wordmark { font: 400 36px/1 'Anton', 'Arial Narrow', sans-serif; letter-spacing: .015em; }
.boot-label { color: var(--boot-lavender); }
.boot-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 26px; min-height: 0; }
.boot-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.boot-year { display: flex; font: 400 clamp(100px, 28vw, 370px)/1.05 'Anton', 'Arial Narrow', sans-serif; color: var(--boot-lavender); font-variant-numeric: tabular-nums; }
.boot-reel { display: block; width: .59em; height: 1.05em; overflow: hidden; }
.boot-track { display: flex; flex-direction: column; will-change: transform; }
.boot-digit { display: block; flex: 0 0 1.05em; height: 1.05em; line-height: 1.05; text-align: center; }
.boot-language { position: relative; width: 230px; height: 32px; text-align: center; font-size: 14px; letter-spacing: .12em; }
.boot-language > span { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity 160ms linear, transform 200ms cubic-bezier(.23,1,.32,1); }
.boot-language .boot-english { opacity: 1; transform: none; }
.boot-screen[data-reduced="true"] .boot-year { display: none; }
.boot-screen[data-reduced="true"] .boot-count { position: static; width: auto; height: auto; clip-path: none; font: 400 clamp(100px,28vw,370px)/1.05 'Anton', 'Arial Narrow', sans-serif; color: var(--boot-lavender); }
.boot-line { height: 2px; background: var(--boot-plum); overflow: hidden; }
.boot-line span { display: block; width: 100%; height: 100%; background: var(--boot-violet); transform: scaleX(0); transform-origin: left; }
.boot-foot { margin-top: 16px; align-items: center; line-height: 1.6; }
@media (max-width: 700px) {
  .boot-screen { padding: 22px 20px; }
  .boot-wordmark { font-size: 30px; }
  .boot-head, .boot-foot { font-size: 10px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-screen, .boot-line span, .boot-language > span { transition: none; }
}