/*
 * The pre-Flutter launch screen (index.html, #launch).
 *
 * A file rather than an inline <style> so the page runs under a strict
 * Content-Security-Policy (style-src without 'unsafe-inline' for the page's
 * own markup). It is small, same-origin and linked in <head>, so it arrives
 * before the first paint.
 */
:root {
  /* The brand ramp, and the same 45-degree angle AppSplash paints it at.
     Keep in step with AppColors.light().brandRamp. */
  --launch-ramp-start: #0867BF;
  --launch-ramp-mid: #713DE8;
  --launch-ramp-end: #CE0059;
  --launch-bg: var(--launch-ramp-mid);
  --launch-surface: #FFFFFF;
  --launch-text: #FFFFFF;
  --launch-shadow: 0 14px 36px -8px rgba(11, 21, 51, 0.22);
}
/* Deliberately no `prefers-color-scheme: dark` variant: the app always
   boots in light mode (its theme choice isn't persisted across loads),
   so a system-dark-driven palette here would show dark and then hand off
   to a light AppSplash -- the exact "splash is always dark" bug this
   used to cause. */
html, body { margin: 0; padding: 0; background: var(--launch-bg); }
#launch {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: linear-gradient(
    135deg,
    var(--launch-ramp-start) 0%,
    var(--launch-ramp-mid) 50%,
    var(--launch-ramp-end) 100%
  );
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--launch-text);
  opacity: 1;
  transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1);
  z-index: 9999;
}
#launch.is-hidden { opacity: 0; pointer-events: none; }
/* The same white tile the Dart splash puts the mark in, at the same
   radius -- this is the element the two screens are matched on. */
#launch-mark {
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--launch-surface);
  box-shadow: var(--launch-shadow);
  animation: launch-in 400ms cubic-bezier(0.2, 0, 0, 1) both;
}
/* Type, not the wordmark bitmap: the supplied artwork is navy on white
   and cannot sit on the gradient. */
#launch-title {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--launch-text);
  animation: launch-in 400ms cubic-bezier(0.2, 0, 0, 1) 120ms both;
}
#launch-title span { color: rgba(255, 255, 255, 0.55); }
#launch-tagline {
  font-size: 14.5px;
  /* AppGradientPanel.mutedForeground: 0.82 fell under 4.5:1. */
  color: rgba(255, 255, 255, 0.92);
  animation: launch-in 400ms cubic-bezier(0.2, 0, 0, 1) 160ms both;
  margin-top: -16px;
}
#launch-bar {
  width: 132px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.24);
  animation: launch-in 400ms cubic-bezier(0.2, 0, 0, 1) 260ms both;
}
#launch-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  animation: launch-sweep 1300ms ease-in-out infinite alternate;
}
@keyframes launch-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes launch-sweep {
  from { transform: translateX(-25%); }
  to   { transform: translateX(275%); }
}
/* Same contract as the Dart side: stop moving, keep communicating. */
@media (prefers-reduced-motion: reduce) {
  #launch, #launch * { animation: none !important; transition: none !important; }
  #launch-bar::after { width: 35%; }
}