/* ═══════════════════════════════════════════════════════════════
   PAGE LOADER — full-screen loading overlay shown while a view is
   fetching its data from the backend. Pairs with the top loading bar
   (components/LoadingBar.vue) which is rendered at the app shell.
   Animates the 10x-Developer gradient behind a muted Logo10x mark.
   ═══════════════════════════════════════════════════════════════ */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color, #fff);
  animation: page-loader-fade-in 160ms ease-out;
}

.page-loader--inline {
  position: absolute;
  min-height: 360px;
  background: transparent;
}

.page-loader__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
}

.page-loader__logo {
  position: relative;
  z-index: 2;
  width: 180px;
  font-size: 48px;
  animation: page-loader-breathe 2.2s ease-in-out infinite;
}

.page-loader__logo svg {
  width: 100%;
  height: auto;
}

/* Pulsing gradient ring behind the logo — uses the same gradient stops
   as the Logo10x SVG so it reads as part of the brand. */
.page-loader__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #0894FF 0%,
      #BD32D6 25%,
      #6462EA 40%,
      #0894FF 65%,
      #FFA304 85%,
      #0894FF 100%
    );
  filter: blur(36px);
  opacity: 0.28;
  animation: page-loader-spin 3.5s linear infinite, page-loader-pulse 2.2s ease-in-out infinite;
}

@keyframes page-loader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes page-loader-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50%      { opacity: 1;    transform: scale(1.02); }
}

@keyframes page-loader-spin {
  to { transform: rotate(360deg); }
}

@keyframes page-loader-pulse {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.38; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader__logo,
  .page-loader__pulse {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (max-width: 768px) {
  .page-loader__stage { width: 200px; height: 200px; }
  .page-loader__logo  { width: 150px; }
}