/* Page transition / loader styles - lightweight overlay + spinner
   Designed to integrate with existing Tailwind utilities and site's color theme.
*/

:root{
  --loader-bg: rgba(15,23,42,0.6); /* dark translucent */
  --loader-accent: #2563eb; /* primary */
}

.page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--loader-bg);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.page-loader[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}

.page-loader__card{
  background:rgba(255,255,255,0.06);
  padding:14px 18px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 8px 24px rgba(2,6,23,0.45);
}

.page-loader__spinner{
  width:36px;
  height:36px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.12);
  border-top-color:var(--loader-accent);
  animation:loader-spin 0.9s linear infinite;
}

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

/* Optional subtle content fade (body.is-loading .page-content) - add .page-content wrapper in templates to use */
.is-loading main, .is-loading header, .is-loading nav{ transition:opacity .25s ease, transform .25s ease; opacity:.5; transform:translateY(2px); }