/* Shared sea-rising loading screen overlay (see loading-screen.js).
   Shown immediately on open, covers the page while the real auth
   check runs, then fades out once the animation and auth both finish.

   NOTE: loaded with a `?v=N` cache-busting suffix — bump N here and in
   loading-screen.js (and both HTML pages' <link>/<script> tags) whenever
   either file changes, see the note at the top of loading-screen.js. */
#loading-overlay {
  position: fixed; inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 600ms ease-in-out;
}
#loading-overlay.loading-overlay-hide {
  opacity: 0;
  pointer-events: none;
}
#loading-overlay .loading-frame-stack {
  position: relative;
  width: min(80vw, 400px);
  aspect-ratio: 2172 / 724;
}
#loading-overlay .loading-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* The front layer crossfades in over the back layer for each new frame
   (see loading-screen.js), so the fill rise reads as smooth motion
   instead of a slideshow of discrete stills. */
#loading-overlay .loading-frame-front {
  opacity: 0;
  transition: opacity 180ms linear;
}