/*
 * =============================================================================
 * Motion state gates (Dash + CSS) — no UI transition keyframes here
 * =============================================================================
 *
 * data-page-motion (on #sci-page-shell)
 *   "prep"  — route transition: page loader visible, #_pages_content hidden
 *             until pageEnter() after Dash loading is idle.
 *
 * data-page-revealed (on #_pages_content)
 *   "1"     — pageEnter finished; cube-loading may dim on in-page refresh.
 *
 * Spinner markup lives in layout.py (.sci-page-route-loader); styles in custom.css.
 *
 * =============================================================================
 */

/* Page area is the only scroll container (navbar stays pinned above). */
#sci-page-shell {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 28px;
}

/* Route loader: absolute inside the shell. During prep the page content is
   display:none, so the shell collapses to the visible viewport area and the
   spinner stays centered on screen regardless of the page's natural height. */
.sci-page-route-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(231, 236, 255, 0.08);
  background:
    radial-gradient(520px 280px at 50% 38%, rgba(45, 125, 255, 0.14), transparent 68%),
    radial-gradient(360px 200px at 50% 62%, rgba(46, 230, 166, 0.08), transparent 70%),
    rgba(7, 11, 20, 0.78);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

#sci-page-shell[data-page-motion="prep"] .sci-page-route-loader {
  display: flex;
}

#sci-page-shell[data-page-motion="prep"] #_pages_content {
  display: none !important;
}