/* ═══════════════════ PAGE LOADER — cinematic sub-second reveal ═══════════════════
 * Timeline (~0.95s total, driven by GSAP in js/loader.js):
 *   0.00–0.20  backdrop gradient + stage lift-in (scale 0.94 → 1, blur 12 → 0)
 *   0.05–0.55  wordmark writes LTR (expo.out easing, animates --reveal)
 *   0.45–0.75  wordmark trails off with blur + x-slide (no second mask)
 *   0.55–0.95  icon hands off to hero-logo slot as a shared element
 *   0.95       loaderDone; loader fades out (handled by morph-logo)
 * ─────────────────────────────────────────────────────────── */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(224, 64, 251, 0.10), transparent 58%),
    radial-gradient(100% 70% at 50% 58%, rgba(124, 77, 255, 0.08), transparent 62%),
    var(--bg-deep, #06060e);
  opacity: 1;
  will-change: opacity;
}

.page-loader.is-hiding {
  pointer-events: none;
}

/* Soft aura behind the mark — fades with the loader */
.page-loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vw, 720px);
  height: min(62vw, 720px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251, 4, 144, 0.18), transparent 62%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Stage — LTR flex: icon on left, wordmark on right */
.page-loader-stage {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  height: clamp(88px, 15vw, 150px);
  direction: ltr;
  will-change: transform, opacity, filter;
  opacity: 0;
}

/* ── Icon (magenta NW mark) ── */
.loader-icon {
  height: 100%;
  width: auto;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 0 28px rgba(251, 4, 144, 0.45));
}

/* ── Wordmark wrapper — revealed via animatable --reveal custom property ── */
.loader-wordmark-wrap {
  height: 100%;
  overflow: visible;
  --reveal: 0;
  -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--reveal) * 100%),
      transparent calc(var(--reveal) * 100% + 5%),
      transparent 100%);
  mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--reveal) * 100%),
      transparent calc(var(--reveal) * 100% + 5%),
      transparent 100%);
  will-change: opacity, filter, transform;
}

.loader-wordmark {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
}

/* Register --reveal so GSAP (and CSS) can animate it smoothly */
@property --reveal {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* ── Reduced motion: snap to rendered state, skip effects ── */
@media (prefers-reduced-motion: reduce) {
  .page-loader-stage { opacity: 1; }
  .loader-wordmark-wrap {
    --reveal: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}