/* Boot splash for the web app — runs before any Flutter/Dart code exists.
   The logo is the real conomo logo, vectorized from
   assets/images/title_conomo_logo.png (color-separated potrace paths).
   Hand-maintained; flutter_native_splash has web output disabled (pubspec). */

html {
  color-scheme: light dark;
}

:root {
  --bs-bg: #F2F2F6;
  --bs-primary: #166998;
  --bs-wave: #73A9BE;
  --bs-text: #565656;
  --bs-muted: #8A8A8E;
  --bs-track: #D8D8DE;
  --bs-accent: #166998;
}

/* Dark mode: the original dark splash used the identical logo colors on a
   dark background — only background and progress UI change. */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-bg: #121212;
    --bs-track: #333338;
    --bs-accent: #4E93BF;
  }
}

body {
  margin: 0;
  height: 100%;
  background: var(--bs-bg);
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bs-bg);
  opacity: 1;
  transition: opacity 0.3s ease;
}

#splash.bs-hidden {
  opacity: 0;
  pointer-events: none;
}

.bs-logo {
  position: relative;
  width: min(230px, 55vw);
  aspect-ratio: 686 / 388;
}

.bs-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Ring + phone outline: revealed by a JS-driven conic-gradient wipe mask */
.bs-main,
.bs-detail {
  fill: var(--bs-primary);
}

/* Speaker slit + home dot appear once the phone outline is drawn */
.bs-detail {
  opacity: 0;
  animation: bs-fade-in 0.4s ease 1.3s forwards;
}

/* Signal waves pulse outward from the phone as an endless idle loop */
.bs-wave {
  fill: var(--bs-wave);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 326px 85px;
}

.bs-w1 {
  animation: bs-wave-pulse 2.2s ease-out 1.6s infinite;
}

.bs-w2 {
  animation: bs-wave-pulse 2.2s ease-out 1.95s infinite;
}

/* Wordmark letters fade in one after another: c-o-n-o-m-o */
.bs-letter {
  fill: var(--bs-text);
  opacity: 0;
  animation: bs-fade-in 0.45s ease forwards;
}

.bs-l0 { animation-delay: 1.5s; }
.bs-l1 { animation-delay: 1.62s; }
.bs-l2 { animation-delay: 1.74s; }
.bs-l3 { animation-delay: 1.86s; }
.bs-l4 { animation-delay: 1.98s; }
.bs-l5 { animation-delay: 2.1s; }

@keyframes bs-fade-in {
  to { opacity: 1; }
}

@keyframes bs-wave-pulse {
  0%   { opacity: 0;    transform: scale(0.8); }
  35%  { opacity: 1;    transform: scale(1); }
  75%  { opacity: 0.15; transform: scale(1.12); }
  100% { opacity: 0;    transform: scale(1.12); }
}

.bs-progress {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
}

.bs-bar {
  width: 150px;
  height: 5px;
  border-radius: 999px;
  background: var(--bs-track);
  overflow: hidden;
}

.bs-bar-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--bs-accent);
  transition: width 0.15s linear;
}

.bs-percent {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-accent);
}

.bs-status {
  margin-top: 5px;
  min-height: 15px;
  font-size: 12px;
  color: var(--bs-muted);
}

/* Repeat load in the same session (e.g. service-worker reload): skip the
   intro — logo appears complete at once, waves start pulsing right away. */
#splash.bs-no-intro .bs-detail,
#splash.bs-no-intro .bs-letter {
  animation: none;
  opacity: 1;
}

#splash.bs-no-intro .bs-w1 { animation-delay: 0.2s; }
#splash.bs-no-intro .bs-w2 { animation-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
  .bs-detail,
  .bs-wave,
  .bs-letter {
    animation: none;
    opacity: 1;
  }
  /* the draw mask stays fully open — boot_splash.js skips the draw as well */
}