/*
 * Launch splash. Linked from index.html (render-blocking, outside the JS
 * bundle) so the first frame is already the sage splash Android shows from
 * the manifest – no blank frame, no second "loading screen". The same classes
 * style the in-app SplashPage (components/icons/KichinMark.tsx).
 *
 * The bowl sits exactly at the screen center and doesn't animate in, so the
 * hand-off from the system splash (icon centered on the same color) is
 * invisible; only the wordmark and steam move.
 */
.splash {
  position: fixed;
  inset: 0;
  /* Fixed brand color in both themes, like the manifest background_color. */
  background: #758a74;
  color: #fff;
  overflow: hidden;
}

#boot-splash {
  z-index: 2147483000;
}

.splash-bowl,
.splash-steam,
.splash-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: visible;
}

.splash-bowl {
  width: 56px;
  height: 52px;
  margin: -26px 0 0 -28px;
}

.splash-steam {
  width: 30px;
  height: 26px;
  margin: -62px 0 0 -15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.splash-steam path {
  opacity: 0;
  stroke-dasharray: 1;
  animation: splash-steam 2.4s ease-in-out 0.1s infinite;
}

.splash-steam path + path {
  animation-delay: 0.9s;
}

.splash-wordmark {
  width: 120px;
  height: 30px;
  margin: 58px 0 0 -60px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.splash-wordmark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: splash-draw 420ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.splash-wordmark path:nth-child(2) { animation-delay: 50ms; }
.splash-wordmark path:nth-child(3) { animation-delay: 100ms; }
.splash-wordmark path:nth-child(4) { animation-delay: 150ms; }
.splash-wordmark path:nth-child(5) { animation-delay: 200ms; }
.splash-wordmark path:nth-child(6) { animation-delay: 250ms; }

/* Exit: the mark drifts forward while the splash fades, revealing the app. */
.splash--hide {
  pointer-events: none;
  animation: splash-fade 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.splash--hide .splash-bowl,
.splash--hide .splash-steam,
.splash--hide .splash-wordmark {
  animation: splash-grow 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splash-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes splash-steam {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
    transform: translateY(6px);
  }
  35% {
    opacity: 0.7;
  }
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
    transform: translateY(-6px);
  }
}

@keyframes splash-fade {
  to {
    opacity: 0;
  }
}

@keyframes splash-grow {
  to {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-wordmark path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .splash-steam {
    display: none;
  }

  .splash--hide {
    animation-duration: 150ms;
  }

  .splash--hide .splash-bowl,
  .splash--hide .splash-wordmark {
    animation: none;
  }
}