/* ===========================================================================
   The donkey guide (homepage only, 2026-09-30). Created by
   assets/js/donkey-guide.js on 1024px+ screens; nothing here applies without it.
   Design: docs/superpowers/specs/2026-09-30-donkey-guide-design.md

   Four layers, one transform each, so no two effects fight over `transform`:
   .donkey-guide  position + closer/further scale (set by the script)
   .dg-hello      the entrance
   .dg-bob        the walking bob (set by the script)
   .dg-face       left/right facing
   =========================================================================== */

/* z-index -1 in the root stacking context paints above the page background
   and below every section, so text and solid cards always sit on top. */
.donkey-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.donkey-guide.is-here { opacity: 0.3; }

.donkey-guide .dg-hello,
.donkey-guide .dg-bob,
.donkey-guide .dg-face { width: 100%; height: 100%; }
.donkey-guide svg { display: block; width: 100%; height: 100%; }

/* "Hellooo!": springs up from small, overshoots, wiggles, settles. Replays each
   time it reappears after the visitor went back to the very top. */
.donkey-guide.is-here .dg-hello { animation: dg-hello 0.9s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes dg-hello {
  0%   { transform: translateY(60px) scale(0.2) rotate(-14deg); }
  55%  { transform: translateY(-10px) scale(1.18) rotate(8deg); }
  75%  { transform: translateY(2px) scale(0.95) rotate(-4deg); }
  100% { transform: none; }
}

.donkey-guide .dg-face { transition: transform 0.3s ease; }
.donkey-guide .dg-face.is-right { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .donkey-guide { display: none; }
}