/* The opening: the name, and one stroke of the highlighter across it.

   Plain paper, the wordmark set in the book face, the product's single
   gesture, then the page. About a second. Once per session, any tap or key
   skips it, reduced motion never sees it, and it clears itself with CSS
   alone if JavaScript is dead. */

.boot {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  animation: boot-out 260ms linear 1100ms forwards;
}
:root[data-booted] .boot { display: none; }
@media (prefers-reduced-motion: reduce) { .boot { display: none; } }

.boot-in { display: grid; justify-items: center; gap: 10px; }

.boot-word {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1.1;
  padding-inline: .12em;
}
.boot-word > span { position: relative; z-index: 1; }
.boot-word::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: 38% 8%;
  background: var(--marker);
  transform: scaleX(0);
  transform-origin: left center;
  animation: boot-stroke 520ms cubic-bezier(.65, 0, .35, 1) 250ms forwards;
}
:root[dir="rtl"] .boot-word::before { transform-origin: right center; }
:root[data-theme="dark"] .boot-word::before { inset-block: 6% 4%; }
:root[data-theme="dark"] .boot-word { animation: boot-ink 200ms linear 620ms forwards; }

.boot-sub {
  font-size: .95rem;
  color: var(--ink-2);
  opacity: 0;
  animation: boot-in 300ms linear 600ms forwards;
}

.boot .boot-en { display: none; }
:root[lang="en"] .boot .boot-en { display: inline; }
:root[lang="en"] .boot .boot-ar { display: none; }

/* the app gets the short version */
.boot--quick { animation-delay: 700ms; }
.boot--quick .boot-word::before { animation-delay: 120ms; animation-duration: 420ms; }
.boot--quick .boot-sub { display: none; }

.boot.boot--skip { animation: boot-out 180ms linear forwards; }

@keyframes boot-stroke { to { transform: scaleX(1); } }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-ink { to { color: var(--marker-ink); } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }