/* =====================================================================
   walkers.css, 2026-10-22: the Crawlloween crowd. See walkers.js.
   Every layer ignores the pointer and sits under the nav, the drawer and
   the modals (nav and drawer are z 50+ in components.css).
   ===================================================================== */

.cw-walker, .cw-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity var(--dur-base) var(--ease-standard);
  will-change: transform;
}
.cw-walker.is-on, .cw-ghost.is-on { opacity: 1; }

.cw-walker { height: 118px; }
.cw-ghost  { height: 96px; transition-duration: var(--dur-slow); }

.cw-clip {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.cw-walker .cw-clip--hop { position: absolute; left: 0; top: 0; visibility: hidden; }
.cw-walker.is-hop .cw-clip--hop { visibility: visible; }
.cw-walker.is-hop .cw-clip:not(.cw-clip--hop) { visibility: hidden; }

/* speech bubble: a cream paper slip with an ink border, like the cut-outs */
.cw-bubble {
  position: fixed;
  left: 0; top: 0;
  z-index: 41;
  max-width: 220px;
  padding: 8px 12px;
  background: var(--bone);
  color: var(--text-on-accent);
  border: 2px solid var(--text-on-accent);
  border-radius: 14px;
  box-shadow: 3px 3px 0 var(--ember);
  font: var(--fw-bold) var(--fs-sm) / 1.3 var(--font-sans);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.cw-bubble.is-on { opacity: 1; }
.cw-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px; left: 16px;
  width: 14px; height: 14px;
  background: var(--bone);
  border-right: 2px solid var(--text-on-accent);
  border-bottom: 2px solid var(--text-on-accent);
  transform: rotate(45deg);
}
.cw-bubble.is-left::after { left: auto; right: 16px; }

/* the button they land on dips, then springs back */
.cw-stomped { animation: cw-stomp 260ms var(--ease-standard); }
@keyframes cw-stomp {
  0%   { transform: translateY(0) scale(1, 1); }
  35%  { transform: translateY(3px) scale(1.02, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ------------------------------------------------------- footer lane --- */

.site-footer { position: relative; overflow-x: clip; }

.cw-lane {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  pointer-events: none;
}
.cw-stroller {
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 96px;
  animation: cw-stroll 24s linear 1 both;
}
.cw-lane.is-paused .cw-stroller { animation-play-state: paused; }
@keyframes cw-stroll {
  from { transform: translateX(-160px); }
  to   { transform: translateX(100vw); }
}

.cw-lane--still { display: flex; justify-content: flex-end; gap: var(--sp-5); padding-right: var(--gutter); }
.cw-lane--still .cw-stroller { position: relative; animation: none; }

@media (max-width: 760px) {
  .cw-walker { height: 72px; }
  .cw-ghost  { height: 64px; }
  .cw-stroller { height: 64px; }
  .cw-bubble { max-width: 170px; font-size: var(--fs-xs); padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-stomped { animation: none; }
}