/*
 * Boot backdrop + loader — covers the window between first paint and Vue
 * mounting, before the JS bundle (and its SCSS) has loaded.
 *
 * This lives in /public (NOT inlined in index.html) because Vite runs inline
 * <style> blocks through its CSS-module pipeline and rewrites them to
 * `export default "..."`, so the rules never apply. Files in /public are
 * served verbatim.
 *
 * 1. The themed background paints on the very first frame — the theme script in
 *    index.html already set .is-dark / .is-light on <html> synchronously, so a
 *    cold/slow load never flashes white (colors mirror $ag-dark-bg-base /
 *    $ag-light-bg-base in _variables.scss).
 * 2. #ag-boot-loader is a static replica of the in-app PageLoader.vue (same
 *    favicon logo, spinning ring and dots) so a fresh load looks identical to
 *    an in-app page switch. Hidden by default; revealed after a short delay
 *    (see the reveal script in index.html) so a warm/fast boot never flashes
 *    it. entry-client removes it once Vue mounts and the real PageLoader
 *    takes over.
 */

html.is-dark {
  color-scheme: dark;
}
html.is-light {
  color-scheme: light;
}
html.is-dark,
html.is-dark body {
  background-color: #1a1a1a;
}
html.is-light,
html.is-light body {
  background-color: #f8fafc;
}

#ag-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}
html.is-light #ag-boot-loader {
  background: rgba(255, 255, 255, 0.9);
}
#ag-boot-loader[data-show] {
  opacity: 1;
}
#ag-boot-loader[data-hide] {
  opacity: 0;
}

#ag-boot-loader .ag-boot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vmin, 1.5rem);
  padding: 24px;
}
#ag-boot-loader .ag-boot-logo {
  position: relative;
  width: clamp(64px, 16vmin, 88px);
  height: clamp(64px, 16vmin, 88px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#ag-boot-loader .ag-boot-logo img {
  width: clamp(40px, 10vmin, 52px);
  height: clamp(40px, 10vmin, 52px);
  max-width: none;
  object-fit: contain;
  animation: ag-boot-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(42, 168, 118, 0.4));
}
#ag-boot-loader .ag-boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #2aa876;
  border-right-color: rgba(42, 168, 118, 0.3);
  animation: ag-boot-spin 1.2s linear infinite;
}
#ag-boot-loader .ag-boot-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(42, 168, 118, 0.5);
  border-left-color: rgba(42, 168, 118, 0.2);
  animation: ag-boot-spin 1.8s linear infinite reverse;
}
#ag-boot-loader .ag-boot-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
#ag-boot-loader .ag-boot-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2aa876;
  animation: ag-boot-dot 1.4s ease-in-out infinite;
}
#ag-boot-loader .ag-boot-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
#ag-boot-loader .ag-boot-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ag-boot-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}
@keyframes ag-boot-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ag-boot-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ag-boot-loader .ag-boot-logo img,
  #ag-boot-loader .ag-boot-ring,
  #ag-boot-loader .ag-boot-ring::before,
  #ag-boot-loader .ag-boot-dots span {
    animation: none;
  }
}
