/* Page loader styles - polished, responsive, dark-mode aware */
:root{
  --loader-bg: #ffffff;
  --loader-ring: rgba(2,6,23,0.08);
  --loader-accent: #0d47a1;
  --loader-logo-size: 92px;
}

html[data-theme='dark'] {
  --loader-bg: var(--surface, #071226);
  --loader-ring: rgba(255,255,255,0.06);
  --loader-accent: #d4af37;
}

#page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--loader-bg);
  z-index:99999;
  transition:opacity .6s ease, visibility .6s ease;
}

#page-loader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* centred stack */
.page-loader-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-direction:column;
}

.loader-ring{
  width:calc(var(--loader-logo-size) + 30px);
  height:calc(var(--loader-logo-size) + 30px);
  border-radius:50%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* animated ring element that rotates; logo stays static above it */
.loader-ring .ring-anim{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:4px solid var(--loader-ring);
  border-top-color:var(--loader-accent);
  border-right-color:var(--loader-accent);
  box-shadow:0 6px 18px rgba(2,6,23,0.06);
  animation:rotateRing 1s linear infinite;
}

.loader-ring .loader-logo{
  width:var(--loader-logo-size);
  height:var(--loader-logo-size);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:transparent;
  animation:logoPulse 1.8s ease-in-out infinite;
  position:relative;
  z-index:2;
}
.loader-ring .loader-logo img{width:72%;height:auto;display:block}

@keyframes rotateRing{to{transform:rotate(360deg)}}
@keyframes logoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.9}}

#page-content{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
#page-content.loaded{opacity:1;transform:translateY(0)}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .loader-ring,.loader-logo{animation:none}
  #page-loader{transition:none}
  #page-content{transition:none}
}

/* Make sure loader doesn't hide page accessibility - provide focus outline */
#page-loader:focus{outline:2px solid rgba(212,175,55,0.18);outline-offset:4px}