/* ================================================================
   LOADER — loader.css
   ================================================================ */

#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg, #f4f3f0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition:
    opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
    visibility 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

[data-theme="dark"] #page-loader {
  background: #08090c;
}

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

/* ── Monogram ── */
.loader-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  animation: loaderFadeUp 600ms 100ms cubic-bezier(0.215, 0.61, 0.355, 1)
    forwards;
}

.loader-logo-img {
  width: clamp(90px, 22vw, 140px);
  height: clamp(90px, 22vw, 140px);
  object-fit: contain;
  display: block;
}

/* ── Gold rule ── */
.loader-rule {
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue, #0050f0) 30%,
    var(--blue, #0050f0) 70%,
    transparent 100%
  );
  animation: loaderRule 700ms 500ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* ── Animations ── */
@keyframes loaderFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderRule {
  to {
    width: clamp(160px, 40vw, 280px);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .loader-mark {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .loader-rule {
    animation: none;
    width: 240px;
  }
  #page-loader.hidden {
    transition: none;
  }
}