/* ═══════════════════════════════════════════════════
   PHANTOM ZENITH ORIGIN — LOADER
   assets/css/loader.css
   ─────────────────────────────────────────────────
   Depends on: tokens.css

   Page-load infrastructure used by the SPA router.
   Two responsibilities:

   1. SKELETON LOADER (.skeleton-loader, .skel-block)
      Shown inside #page-root on initial page load.
      Automatically wiped when router calls root.innerHTML = ''.
      Pure CSS animation — no JS dependency.

   2. PAGE TRANSITIONS (#page-root.page-exiting / .page-entering)
      Router adds/removes these classes during page navigation.
      Uses setTimeout (not transitionend) to avoid bubbling issues
      from child elements triggering the swap prematurely.
      TRANSITION_MS in router.js matches these durations (180ms).
   ═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   SKELETON LOADER
   ───────────────────────────────────────────────── */

/* ─── CONTAINER ─── */
.skeleton-loader {
  padding: 48px 0 80px;
  animation: skeleton-fadeIn 0.3s ease both;
}

/* ─── SHIMMER BLOCKS ─── */
/* Each .skel-block is a rounded rectangle that pulses between
   two background brightness levels, simulating loading content. */
.skel-block {
  background: var(--bg-panel);
  border-radius: 8px;
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

/* ── Header region ── */
.skel-eyebrow {
  width: 280px;
  max-width: 60%;
  height: 12px;
  margin-bottom: 16px;
  border-radius: 4px;
  animation-delay: 0s;
}

.skel-title {
  width: 360px;
  max-width: 75%;
  height: 36px;
  margin-bottom: 10px;
  animation-delay: 0.1s;
}

.skel-subtitle {
  width: 480px;
  max-width: 90%;
  height: 14px;
  margin-bottom: 48px;
  border-radius: 4px;
  animation-delay: 0.15s;
}

/* ── Banner region ── */
.skel-banner {
  width: 100%;
  height: 52px;
  margin-bottom: 48px;
  animation-delay: 0.2s;
}

/* ── Content blocks ── */
.skel-card {
  width: 100%;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 12px;
}

.skel-card:nth-child(1) { animation-delay: 0.25s; }
.skel-card:nth-child(2) { animation-delay: 0.3s; }
.skel-card:nth-child(3) { animation-delay: 0.35s; }

/* ─── KEYFRAMES ─── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.15; }
}

@keyframes skeleton-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ─────────────────────────────────────────────────
   PAGE TRANSITIONS
   ───────────────────────────────────────────────── */

/* Fade-out: CSS transition driven by class, timed by setTimeout in router */
#page-root.page-exiting {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* Fade-in: CSS animation on incoming page, avoids transitionend entirely */
@keyframes pzo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#page-root.page-entering {
  animation: pzo-fade-in 0.18s ease forwards;
}