/* Sgeulai website splash — the app's launch sequence, measure for measure.
   Source of truth: Sgeulai/Views/Welcome/SplashWindow.swift (layout, type,
   timings), Design/SgeulaiMarkAnimation.swift (the arcs and the nib) and
   Design/SplashPalette.swift (colours). Change those, change this.

   Like the app, everything is laid out on the storyboard's 1280x800 canvas
   and scaled as a whole (splash.js sets --s), so no proportion can drift with
   the window. Dismissed by a click or any key; plays once per browser
   session. The app's version tag is left out: a website has no build. */

/* The tagline is Plex Mono Bold in the app. Without the real face the
   browser thickens the regular one, which is a different letter. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: block;
}

#splash {
  --s: 1;
  --ground: #E1372B;
  --ink: #14110F;
  --gold: #F0C324;
  --paper: #F2EFE6;
  --blush: #F7CFCB;
  --spring: cubic-bezier(0.16, 0.84, 0.3, 1);
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ground);
  overflow: hidden;
  cursor: pointer;
}
#splash.is-hidden { display: none; }
#splash.is-leaving { transition: opacity 0.32s linear; opacity: 0; }
html.splash-active { overflow: hidden; }

/* ---------- 0.00s bars, 700ms, from opposite edges ---------- */
.splash-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(14px * var(--s));
  z-index: 1;
}
.splash-bar-top {
  top: 0;
  background: var(--ink);
  transform: translateX(-100%);
  animation: splash-slide 0.7s var(--spring) forwards;
}
.splash-bar-bottom {
  bottom: 0;
  background: var(--gold);
  transform: translateX(100%);
  animation: splash-slide 0.7s var(--spring) forwards;
}
@keyframes splash-slide { to { transform: translateX(0); } }

/* ---------- the canvas ---------- */
.splash-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 800px;
  transform: translate(-50%, -50%) scale(var(--s));
}
.splash-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;                         /* Space.section */
  text-align: center;
}
.splash-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                         /* Space.base */
}
.splash-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                         /* Space.wide */
}
.splash-content p { margin: 0; }

/* ---------- 0.20s / 0.76s arcs, 1.48s nib ---------- */
.splash-mark { display: block; width: 300px; height: 300px; overflow: visible; }
.splash-mark .arc {
  /* A hair over the path's length, so rounding can't leave the last sliver
     of an arc undrawn. */
  stroke-dasharray: 1.01;
  stroke-dashoffset: 1.01;
  animation: splash-draw 0.82s cubic-bezier(0.5, 0, 0.3, 1) both;
}
.splash-mark .arc-upper { animation-delay: 0.2s; }
.splash-mark .arc-lower { animation-delay: 0.76s; }
@keyframes splash-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }

/* Both arcs end flat at the canvas centre, and a browser antialiases each
   edge on its own, so a hairline of red shows through where they meet.
   Not in the design; this sliver closes it the moment the lower arc lands. */
.splash-mark .seam { animation: splash-fade 0.01s linear 1.58s both; }

/* Straight to 1.28 and back, linear between the keys, as the app's
   CAKeyframeAnimation does; held at nothing until its turn. */
.splash-mark .nib {
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-pop 0.46s linear 1.48s both;
}
@keyframes splash-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ---------- 1.60s wordmark: rises from behind a hard edge ---------- */
.splash-word {
  height: 154px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-wordmark {
  font-family: Jost, sans-serif;
  font-weight: 500;
  font-size: 132px;
  line-height: normal;
  color: var(--paper);
  animation: splash-rise 0.64s var(--spring) 1.6s both;
}
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 1.78s gloss, 1.90s pronunciation ---------- */
.splash-gloss,
.splash-pronunciation,
.splash-tagline {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  line-height: normal;
  color: var(--blush);
}
.splash-gloss {
  font-size: 17px;
  letter-spacing: 0.5px;
  color: rgba(247, 207, 203, 0.85);
  animation: splash-fade 0.5s linear 1.78s both;
}
.splash-pronunciation {
  font-size: 26px;
  font-style: italic;
  letter-spacing: 1px;
  animation: splash-fade 0.5s linear 1.9s both;
}

/* ---------- 1.90s rule, 2.05s tagline ---------- */
.splash-rule {
  width: 190px;
  height: 6px;
  background: var(--paper);
  transform-origin: left;
  animation: splash-wipe 0.52s var(--spring) 1.9s both;
}
@keyframes splash-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.splash-tagline {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5.7px;             /* 0.3em at 19 */
  animation: splash-fade 0.6s linear 2.05s both;
}
@keyframes splash-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 2.25s three marks, anchored to the bottom ---------- */
.splash-marks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 62px;
  display: flex;
  justify-content: center;
  gap: 12px;
  animation: splash-fade 0.5s linear 2.25s both;
}
.splash-marks span { width: 12px; height: 12px; }
.splash-marks .m-gold { background: var(--gold); }
.splash-marks .m-paper { background: var(--paper); border-radius: 50%; }
.splash-marks .m-ink { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #splash { display: none; }
}