/* SPDX-FileCopyrightText: © 2026 Aspen Bravo, LLC <https://aspenbravo.com> */
/* SPDX-License-Identifier: LicenseRef-Proprietary */

/**
 * Boot veil — a frosted translucent panel that hides the application
 * interface during the pre-authentication boot window (silent refresh
 * + dashboard render) and during the redirect-to-login window. Error
 * toasts punch through the veil via the `#toast-root` z-index
 * override below.
 *
 * The veil panel itself is vanilla CSS (no Tailwind `theme()` calls)
 * so it lives in `lib/` and is consumed by every application frontend
 * via its `lib -> ../../../lib` symlink. The companion
 * mountain-arrival animation CSS lives in each app's inline `<style>`
 * block for now (it uses Tailwind `theme()` colors) and will be
 * migrated to vanilla CSS by the planned `ats-remove-tailwind`
 * change. See `apps/ats/frontend/js/app.js` "TAILWIND MIGRATION
 * NOTES" and `openspec/changes/add-boot-veil/design.md` "Seq-2
 * sequencing".
 *
 * z-index scale (kept consistent with `apps/ats/frontend/css/styles.css`):
 *   --z-toast: 2000 (modals stack above the veil via inline z-index values
 *                     already declared in styles.css; the veil sits below
 *                     modals and toasts, above nav and content)
 *   boot-veil: 9990
 *   #toast-root override: 10000 (above the veil; below modal backdrop 1099?
 *                              No — 10000 > 1099, so toasts stack above
 *                              modals too. The existing styles.css sets
 *                              --z-toast: 2000; the override here is a
 *                              belt-and-suspenders guarantee that toasts
 *                              always render above the veil regardless of
 *                              the app's local token scale.)
 */

.boot-veil {
  position: fixed;
  inset: 0;
  background: rgba(0, 27, 68, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9990;
  opacity: 1;
  transition: opacity 400ms ease-out;
}

.boot-veil--booting {
  /* No visual change of its own; the modifier is a state flag the
     JS removes to begin the fade. Keeping it explicit so the
     "booting" state is readable in the markup. */
}

.boot-veil--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Branded logo centered in the veil. Breathes in sync with the
   mountain animation (same 2.4s ease-in-out cycle, same easing) so
   the logo and mountains read as one coordinated loading state.
   3x the nav logo size (nav logo is h-10 w-10 = 40px; this is
   120px). The entire image eases opacity (no glow filter) and
   fades out with the veil via the parent opacity transition. */
.boot-veil__logo {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  animation: boot-veil-logo-breathe 2.4s ease-in-out infinite;
}

@keyframes boot-veil-logo-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Error toasts MUST punch through the veil so failures remain visible
   during the boot window (notably the BOOT_ERROR toast on an
   unrecognized page host). This is a global rule once the stylesheet
   is loaded, which is fine — `#toast-root` is always at the bottom
   of the body and toasts always want to be on top. */
#toast-root {
  z-index: 10000;
}

/* Reduced motion: solid panel, no blur, shorter fade. The mountain
   animation itself is suppressed via `.mountain-arriving` rules in
   each app's inline `<style>` block (the animation CSS lives there
   for now); this block additionally shortens the veil fade. */
@media (prefers-reduced-motion: reduce) {
  .boot-veil {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #001b44;
    transition: opacity 200ms ease-out;
  }
  .boot-veil__logo {
    animation: none !important;
    opacity: 0.90;
  }
}