/* === Native-app splash handoff ===
   Shared between dashboard.html and login.html (via frontend/_app_splash.html's
   include) - self-contained, not relying on either page's own design-token
   :root block, since login.css doesn't define the same tokens dashboard.css
   does.

   Colors are hardcoded, not theme --color-* tokens: this overlay has to look
   identical to the native Android splash it's taking over from (see
   mobile/android/.../values/colors.xml's splashBackground), which is always
   dark regardless of the user's light/dark app theme - theming this to match
   a light preference would flash light-then-dark right after the native
   splash disappears. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #0a0e1a;
  opacity: 1;
  transition: opacity 400ms ease;
}

.app-splash[hidden] {
  display: none;
}

.app-splash.app-splash-out {
  opacity: 0;
  pointer-events: none;
}

.app-splash-icon {
  /* Same transparent glyph-only cutout as the native Android splash
     (mobile/android/.../drawable/blank_splash_icon.png is the native theme's
     own icon now, but this is the same source as the old splash_icon.png,
     copied verbatim to frontend/static/icons/splash-glyph.png) at roughly
     the same on-screen size (measured ~124 CSS px on a real device) - no
     card, no border-radius clip, so the icon looks completely unchanged
     across the native-to-web handoff and only the text below it animates in. */
  width: 124px;
  height: 124px;
  object-fit: contain;
}

.app-splash-name,
.app-splash-tagline {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.app-splash-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #06b6d4;
  letter-spacing: -0.02em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-splash-tagline {
  font-size: 0.8rem;
  color: #64748b;
  transition-delay: 150ms;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-splash.app-splash-in .app-splash-name,
.app-splash.app-splash-in .app-splash-tagline {
  opacity: 1;
  transform: translateY(0);
}