/* ============================================================================
 * Skeleton / Placeholder Loading States
 *
 * Prevents unstyled content flashes (FOUC) while JS initialises and injects
 * the global nav, breadcrumbs, mode switcher, dashboard panels, etc.
 *
 * Loaded FIRST (right after theme.css) so placeholders are painted before
 * any JS runs.  The body.loaded class is added by a tiny inline script on
 * DOMContentLoaded, which triggers the reveal transition.
 *
 * Uses design tokens from theme.css — no hardcoded colours.
 * ============================================================================ */

/* ---- 1. Global nav placeholder ------------------------------------------ */

[data-global-nav]:empty {
  display: block;
  height: 64px; /* match --nav-height */
  background: var(--panel, #121a24);
  border-bottom: 1px solid var(--border-soft, rgba(148, 163, 184, 0.15));
}

/* ---- 2. Breadcrumb placeholder ------------------------------------------ */

.breadcrumb-placeholder {
  display: block;
  height: 32px;
  background: var(--surface-muted, var(--panel, #121a24));
}

/* ---- 3. Mode-switcher placeholder --------------------------------------- */

.mode-switcher-placeholder {
  display: block;
  height: 48px;
  background: transparent;
}

/* ---- 4. Shimmer / pulse animation --------------------------------------- */

.skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Apply pulse to all empty placeholders automatically */
[data-global-nav]:empty,
.breadcrumb-placeholder,
.mode-switcher-placeholder {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ---- 5. Page body visibility — prevent flash ---------------------------- */

body:not(.loaded) .app-shell,
body:not(.loaded) .flash-card-container,
body:not(.loaded) .page,
body:not(.loaded) .layout,
body:not(.loaded) .landing,
body:not(.loaded) .hub-main,
body:not(.loaded) .exam-container,
body:not(.loaded) .paths-page,
body:not(.loaded) .settings-page,
body:not(.loaded) .dash-main {
  opacity: 0;
}

/* Smooth reveal once JS marks body as loaded */
.app-shell,
.flash-card-container,
.page,
.layout,
.landing,
.hub-main,
.exam-container,
.paths-page,
.settings-page,
.dash-main {
  transition: opacity 0.3s ease;
}

body.loaded .app-shell,
body.loaded .flash-card-container,
body.loaded .page,
body.loaded .layout,
body.loaded .landing,
body.loaded .hub-main,
body.loaded .exam-container,
body.loaded .paths-page,
body.loaded .settings-page,
body.loaded .dash-main {
  opacity: 1;
}

/* ---- 6. Reduced motion preference -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-global-nav]:empty,
  .breadcrumb-placeholder,
  .mode-switcher-placeholder,
  .skeleton-pulse {
    animation: none;
  }

  .app-shell,
  .flash-card-container,
  .page,
  .layout,
  .landing,
  .hub-main,
  .exam-container,
  .paths-page,
  .settings-page,
  .dash-main {
    transition: none;
  }
}