/* =========================================================
   entrance.css — loading splash
   Pairs with entrance.js, which builds all of the markup itself.
   You never write splash HTML.

   Theme it by setting these on :root in your own stylesheet:
     --splash-ink    panel colour        (default #1B4C78)
     --splash-paper  text colour         (default #fff)
     --splash-font   greeting typeface (ONE face only, no fallback list --
                     the CJK/Cyrillic fallbacks are appended automatically)
     --splash-ease   easing curve
   ========================================================= */

.splash-lock { overflow: hidden; }        /* held only while the splash is up */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: none;                   /* never traps a click */
}

/* four slabs, so the exit can echo a 4-column page grid */
.splash-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.splash-cols > span {
  background: var(--splash-ink, #1B4C78);
  transform: translateY(0);
  transition: transform 1.1s var(--splash-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  transition-delay: calc(var(--i) * 0.08s);
}
.splash.leaving .splash-cols > span { transform: translateY(101%); }

/* the greeting stack — one line box, words swapped in place */
.splash-word {
  position: relative;
  z-index: 1;
  height: 1.1em;
  /* --splash-font supplies ONLY the preferred face. The script fallbacks are
     appended here and cannot be overridden away — the greeting list contains
     Cyrillic, Japanese and Korean, and a Latin-only theme font renders those
     as tofu boxes. */
  font-family: var(--splash-font, Geist), Inter, system-ui,
               "Hiragino Sans", "Noto Sans CJK JP",
               "Apple SD Gothic Neo", "Noto Sans KR",
               "Noto Sans", sans-serif;
  font-size: clamp(2.2rem, 7vw, 84px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--splash-paper, #fff);
  transition: opacity 0.35s linear,
              transform 0.6s var(--splash-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.splash.leaving .splash-word { opacity: 0; transform: translateY(-24px); }

.splash-word > span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -45%);       /* waiting above the line */
  opacity: 0;
  white-space: nowrap;
}
.splash-word > span.on {                  /* dropped into place */
  transform: translate(-50%, 0);
  opacity: 1;
  transition: transform 0.46s var(--splash-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              opacity 0.24s linear;
}
.splash-word > span.off {                 /* continuing downward, out */
  transform: translate(-50%, 45%);
  opacity: 0;
  transition: transform 0.46s var(--splash-ease, cubic-bezier(0.22, 0.61, 0.36, 1)),
              opacity 0.16s linear;
}

/* loading stroke across the top edge, filling left → right */
.splash-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: color-mix(in srgb, var(--splash-paper, #fff) 55%, transparent);
}
.splash.running .splash-bar {
  transform: scaleX(1);
  transition: transform var(--run) linear;   /* --run is set by entrance.js */
}
.splash.leaving .splash-bar { opacity: 0; transition: opacity 0.3s linear; }

/* Someone who asked for less motion should not be made to sit through this. */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}