/*
 * The web splash.
 *
 * Hand-written rather than generated by `flutter_native_splash`, whose web
 * output cannot fade: it swaps the splash for the app in one frame, which on a
 * cold load reads as a flicker. This one cross-fades, and more importantly it
 * is painted by the BROWSER from static HTML and CSS - it is on screen while
 * `main.dart.js` is still downloading, which is the whole several-second gap a
 * user actually waits through on a ward workstation's first load of the day.
 *
 * `#splash` is removed by the `flutter-first-frame` listener in index.html.
 * Nothing here is imported by Dart; this file is never part of a build graph.
 */

:root {
  /* The design's landscape page background and brand slate. Identical to
     `AppColors.lightBackground` and `AppColors.primary`, so the first painted
     pixel is already the colour the app settles on. */
  --vsync-bg: #e7ebf2;
  --vsync-slate: #474a56;
  --vsync-muted: #8a8e9e;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* `AppColors.darkBackground`. Matched to the app's dark theme so a ward
       display running at night does not flash a light rectangle first. */
    --vsync-bg: #12141a;
    --vsync-slate: #e3e6ed;
    --vsync-muted: #676b7b;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--vsync-bg);
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--vsync-bg);
  /* Only opacity and transform are animated - both composite on the GPU, so
     the fade cannot steal main-thread time from the Flutter engine starting up
     underneath it. */
  transition: opacity 260ms ease-out;
}

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

#splash img {
  width: 132px;
  height: 132px;
  /* The mark is drawn white on slate, so it needs no tint - but it is scaled
     down hard, and browsers default to a cheaper filter at that ratio. */
  image-rendering: auto;
  border-radius: 28px;
}

#splash .vsync-progress {
  width: 132px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--vsync-muted) 28%, transparent);
}

#splash .vsync-progress span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 99px;
  background: var(--vsync-slate);
  animation: vsync-slide 1.15s ease-in-out infinite;
}

@keyframes vsync-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(330%);
  }
}

/* JavaScript is off (REQ-XPL-02): the splash will never be dismissed, so this
   sits over it, above its z-index, and says why nothing is happening. */
#vsync-noscript {
  position: fixed;
  inset: auto 16px 48px 16px;
  z-index: 10000;
  margin: 0 auto;
  max-width: 480px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--vsync-slate);
  color: var(--vsync-bg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

/* An indeterminate bar that never stops is motion a vestibular-sensitive user
   cannot escape, and REQ-USA-02 takes the platform signal seriously elsewhere
   in this app. Honour it here too: the splash still shows, it just holds
   still. */
@media (prefers-reduced-motion: reduce) {
  #splash {
    transition: none;
  }

  #splash .vsync-progress span {
    width: 100%;
    animation: none;
  }
}