:root {
  --dh-z-loader-overlay: 800;
  --dh-z-loader-scoped: 5;
}
/* ========================================================================
   Deskhund — Walking mascot loader (shared across all surfaces)
   Modes:
     .dh-loader                — inline (centers in parent, ~140px wide)
     .dh-loader--lg            — large (220px, for full-page overlays)
     .dh-loader--overlay       — full-screen overlay (white bg, z-index 900)
     .dh-loader--scoped        — fills a relatively-positioned parent (AJAX containers)
   The mascot walks in place with a 1.15s bounce + rotate cycle.
   Respects prefers-reduced-motion.
   ======================================================================== */
.dh-loader {
  --dh-loader-w: 140px;
  --dh-loader-speed: 1.15s;
  position: relative;
  display: inline-grid;
  place-items: center;
  gap: 14px;
  pointer-events: none;
}
.dh-loader--lg { --dh-loader-w: 220px; gap: 18px; }
.dh-loader--sm { --dh-loader-w: 96px; gap: 10px; }

.dh-loader__stage {
  width: min(var(--dh-loader-w), 70vw, 80%);
  max-width: 100%;
  aspect-ratio: 1000 / 531;
  position: relative;
  display: grid;
  place-items: center;
}
.dh-loader__stage::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -8%;
  height: 7%;
  border-radius: 999px;
  background: rgba(42, 33, 28, 0.14);
  filter: blur(2px);
  animation: dh-loader-shadow var(--dh-loader-speed) ease-in-out infinite;
  will-change: transform, opacity;
}
.dh-loader__dog {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 82%;
  animation: dh-loader-walk var(--dh-loader-speed) ease-in-out infinite;
  will-change: transform;
  /* No box-shadow / filter directly on the dog — Codex pointed out that
     compositor-friendly transforms only. */
}
.dh-loader__label {
  margin: 0;
  color: var(--dh-green-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: var(--dh-font);
  text-align: center;
}
.dh-loader__label--muted { color: var(--dh-text-muted); }

@keyframes dh-loader-walk {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12.5%    { transform: translate3d(1px, -3px, 0) rotate(-0.8deg); }
  25%      { transform: translate3d(0, 0, 0) rotate(0deg); }
  37.5%    { transform: translate3d(-1px, -2px, 0) rotate(0.7deg); }
  50%      { transform: translate3d(0, 0, 0) rotate(0deg); }
  62.5%    { transform: translate3d(1px, -3px, 0) rotate(-0.7deg); }
  75%      { transform: translate3d(0, 0, 0) rotate(0deg); }
  87.5%    { transform: translate3d(-1px, -2px, 0) rotate(0.8deg); }
}
@keyframes dh-loader-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.14; }
  25%, 75% { transform: scaleX(0.88); opacity: 0.10; }
  50%      { transform: scaleX(1); opacity: 0.14; }
}

/* Reduced motion — show static mascot + spinning ring for unambiguous "loading" signal */
@media (prefers-reduced-motion: reduce) {
  .dh-loader__dog, .dh-loader__stage::after { animation: none; }
  .dh-loader__stage::before {
    content: "";
    position: absolute;
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid #C8EFDB;
    border-top-color: var(--dh-green);
    animation: dh-loader-spin 0.9s linear infinite;
    bottom: -20%;
  }
  @keyframes dh-loader-spin { to { transform: rotate(360deg); } }
}

/* ---------- Overlay variant — full screen ---------- */
.dh-loader--overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--dh-z-loader-overlay);
  pointer-events: auto;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 180ms ease;
}
.dh-loader--overlay[data-open="true"] { opacity: 1; }

/* ---------- Scoped variant — fills a positioned parent ---------- */
.dh-loader--scoped {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  z-index: var(--dh-z-loader-scoped);
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.dh-loader--scoped[hidden] { display: none; }

/* Mobile sizing */
@media (max-width: 640px) {
  .dh-loader { --dh-loader-w: 120px; }
  .dh-loader--lg { --dh-loader-w: 180px; }
  .dh-loader--sm { --dh-loader-w: 80px; }
}