/* Sgeulai website splash — rebuilt from the app's own launch sequence
   (Sgeulai/Views/Welcome/SplashWindow.swift), same timings, same colours.
   Plays once per browser session; skippable by click, key, or a visible button. */

#splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #E1372B;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

#splash.is-hidden {
  display: none;
}

#splash.is-leaving {
  transition: opacity 0.32s linear;
  opacity: 0;
}

html.splash-active {
  overflow: hidden;
}

/* ---------- bars: 0.00s, 700ms ---------- */
.splash-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
}
.splash-bar-top {
  top: 0;
  background: #14110F;
  transform: translateX(-100%);
  animation: splash-bar-in-left 0.7s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
.splash-bar-bottom {
  bottom: 0;
  background: #F0C324;
  transform: translateX(100%);
  animation: splash-bar-in-right 0.7s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
@keyframes splash-bar-in-left { to { transform: translateX(0); } }
@keyframes splash-bar-in-right { to { transform: translateX(0); } }

/* ---------- content ---------- */
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  text-align: center;
}

/* ---------- mark: 0.20s / 0.76s draw, 1.48s nib ---------- */
.splash-mark { width: clamp(140px, 22vw, 220px); height: auto; overflow: visible; }
.splash-mark .arc {
  stroke-dasharray: 106.03;
  stroke-dashoffset: 106.03;
  animation-duration: 0.82s;
  animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
  animation-fill-mode: forwards;
}
.splash-mark .arc-upper { animation-name: splash-draw; animation-delay: 0.2s; }
.splash-mark .arc-lower { animation-name: splash-draw; animation-delay: 0.76s; }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }

.splash-mark .nib {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: splash-nib-pop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) 1.48s forwards;
}
@keyframes splash-nib-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* ---------- wordmark: 1.60s, 640ms, rises behind a hard mask ---------- */
.splash-word {
  height: 1.15em;
  overflow: hidden;
  line-height: 1;
}
.splash-wordmark {
  display: block;
  font-family: Jost, sans-serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  letter-spacing: 0.01em;
  color: #F2EFE6;
  transform: translateY(100%);
  animation: splash-rise 0.64s cubic-bezier(0.16, 0.84, 0.3, 1) 1.6s forwards;
}
@keyframes splash-rise { to { transform: translateY(0); } }

/* ---------- pronunciation: 1.90s, linear 500ms ---------- */
.splash-pronunciation {
  margin: -24px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-style: italic;
  letter-spacing: 0.03em;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: #F7CFCB;
  opacity: 0;
  animation: splash-fade 0.5s linear 1.9s forwards;
}

/* ---------- rule: 1.90s, 520ms wipe ---------- */
.splash-rule {
  width: 120px;
  height: 4px;
  background: #F2EFE6;
  transform: scaleX(0);
  transform-origin: left;
  animation: splash-wipe 0.52s cubic-bezier(0.16, 0.84, 0.3, 1) 1.9s forwards;
}
@keyframes splash-wipe { to { transform: scaleX(1); } }

/* ---------- tagline: 2.05s, linear 600ms ---------- */
.splash-tagline {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  color: #F7CFCB;
  opacity: 0;
  animation: splash-fade 0.6s linear 2.05s forwards;
}
@keyframes splash-fade { to { opacity: 1; } }

/* ---------- three marks: 2.25s, linear 500ms ---------- */
.splash-marks {
  position: absolute;
  bottom: 44px;
  display: flex;
  gap: 12px;
  opacity: 0;
  animation: splash-fade 0.5s linear 2.25s forwards;
}
.splash-marks span { width: 12px; height: 12px; }
.splash-marks .m-gold { background: #F0C324; }
.splash-marks .m-paper { background: #F2EFE6; border-radius: 50%; }
.splash-marks .m-ink { background: #14110F; }

/* ---------- skip ---------- */
.splash-skip {
  position: absolute;
  top: 22px;
  right: 22px;
  background: transparent;
  border: 1.5px solid rgba(242,239,230,0.5);
  color: #F2EFE6;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  cursor: pointer;
  opacity: 0;
  animation: splash-fade 0.5s linear 0.5s forwards;
}
.splash-skip:hover { border-color: #F2EFE6; }

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