/* ============================================================
   THE HAND — the architect's directional line.
   One firelight gesture, drawn by hand, that guides the eye
   through the site: down between sections, toward a doorway,
   or ghosted in the background. Source: a single charcoal arrow,
   recolored to firelight, rotated/flipped into 8 gestures
   (assets/hand/<dir>.png). Keep it deliberate — never sloppy.
   ============================================================ */

.hand {
  --hand-w: 150px;
  display: block;
  width: var(--hand-w);
  height: auto;
  pointer-events: none;
  user-select: none;
  /* ghosted in — a whisper of firelight, no hard glow */
  filter: none;
}

/* ---- SEAM: the descender baked INTO the boundary between sections ----
   No band, no height of its own. The seam is a zero-height line sitting
   exactly between two sections; the hand is absolutely centered on that
   line so it STRADDLES it — half in the section above, arrowhead crossing
   down into the next so the eye is carried across. Ghosted faint. */
.hand-seam {
  position: relative;
  height: 0;
  margin: 0;
  z-index: 20;
  pointer-events: none;
}
.hand-seam .hand {
  position: absolute;
  left: 50%;
  top: 0;
  --hand-w: clamp(96px, 9vw, 140px);
  --lean: 0px;            /* horizontal nudge off-center */
  --rot: 0deg;            /* tilt */
  --flip: 1;             /* -1 mirrors the stroke for shape variety */
  --op: 0.07;            /* ghosted */
  transform: translate(calc(-50% + var(--lean)), -50%) rotate(var(--rot)) scaleX(var(--flip));
  opacity: var(--op);
}
/* default leans if a seam carries no inline vars (kept as a fallback) */
.hand-seam--left  .hand { --lean: -9%; --rot: -7deg; }
.hand-seam--right .hand { --lean: 9%;  --rot: 6deg; }

/* draw-in: the stroke wipes toward its arrowhead as it enters view.
   Rides the site's existing .reveal/.is-visible IntersectionObserver. */
.hand-seam.reveal .hand {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms cubic-bezier(.22,.61,.36,1);
}
.hand-seam.reveal.is-visible .hand { clip-path: inset(0 0 0 0); }

/* ---- AIM: a small hand pointing at a doorway (a CTA, a link) ---- */
.hand-aim {
  --hand-w: 84px;
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
}

/* ---- GHOST: the hand sketched faint in the background ---- */
.hand--ghost {
  position: absolute;
  z-index: 0;
  opacity: 0.06;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .hand-seam.reveal .hand { clip-path: none; transition: none; }
}
@media (max-width: 640px) {
  .hand-seam .hand { --hand-w: clamp(80px, 22vw, 120px) !important; --lean: 0px !important; }
}