/* =========================================================
   Page Loader CSS
   Romm Coffee — coffee beans loading overlay between pages.

   Works with:
   - Pages/Shared/_Layout.cshtml  (#pageLoader markup)
   - wwwroot/js/page-loader.js
========================================================= */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);

  background: color-mix(
    in srgb,
    var(--color-background, #f7efe7) 92%,
    transparent
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* The 120ms delay keeps instant navigations from flashing
     the overlay — it only appears if the load takes a moment. */
  transition:
    opacity var(--transition-base, 220ms ease) 120ms,
    visibility 0ms linear 340ms;
}

.page-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;

  transition:
    opacity var(--transition-base, 220ms ease) 120ms,
    visibility 0ms linear 120ms;
}

.page-loader-anim {
  width: clamp(120px, 20vw, 180px);
  aspect-ratio: 1 / 1;
}

.page-loader-text {
  margin: 0;

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary, #8b5e3c);
}

/* =========================================================
   Reduced Motion
   page-loader.js also skips the overlay entirely, this is
   just a CSS safety net.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    display: none !important;
  }
}