/* ============================================================
   hero3d — interactive CVIG letters / shadow / moving-light figure.
   Pairs with assets/js/hero3d.js. Uses the palette tokens from
   style.css (--line, --muted, --surface, --r, --f-sans).
   ============================================================ */

.hero3d{
  margin:0;
}

.hero3d__stage{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r, 4px);
  background:var(--surface, #fff);
  /* allow vertical page scroll on touch; horizontal drags + taps move the light */
  touch-action:pan-y pinch-zoom;
}

.hero3d__stage canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  cursor:crosshair;
  outline:none;
}
.hero3d__stage canvas.is-dragging{ cursor:grabbing; }
.hero3d__stage canvas:focus-visible{
  box-shadow:inset 0 0 0 2px var(--accent, #1d4ed8);
}

/* Static image: visible until the WebGL canvas is live, and again on fallback */
.hero3d__fallback{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero3d.is-live .hero3d__fallback{ display:none; }

.hero3d.is-fallback .hero3d__fallback{ display:block; }
.hero3d.is-fallback canvas{ display:none; }
/* Interaction hints in the caption don't apply to the static image */
.hero3d.is-fallback .hero3d__hint{ display:none; }

.hero3d figcaption{
  margin-top:.6rem;
  font-family:var(--f-sans, system-ui, sans-serif);
  font-size:.82rem;
  line-height:1.45;
  color:var(--muted, #6b7280);
}