/* ============================================================
   Hero collage (MVP1) — canvas layer inside .hero-wrap.
   Engine modules live in /lab/js/ (production entry: live.js).
   ============================================================ */

/* The canvas draws its labels/coordinates in LabMono — same Geist Mono
   files the site already ships, under the name the engine uses. */
@font-face {
  font-family: LabMono;
  src: url('../fonts/GeistMono-Regular.ttf') format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: LabMono;
  src: url('../fonts/GeistMono-Medium.ttf') format("truetype");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: LabMono;
  src: url('../fonts/GeistMono-Bold.ttf') format("truetype");
  font-weight: 700; font-display: swap;
}

.hero-wrap #hero-collage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The canvas fills the whole hero, so "none" here meant a touch anywhere in
     the hero was swallowed by the collage and the page could not be scrolled
     past it on a phone. pan-y hands vertical panning back to the browser while
     the canvas still receives horizontal drags and taps; pinch-zoom keeps the
     page zoomable. A drag that turns into a scroll fires pointercancel, which
     physics.js already treats as pointer-up. */
  touch-action: pan-y pinch-zoom;
}

/* Hero copy paints above the canvas (DOM order) but must not eat the
   canvas's pointer events — except the real CTA. */
.hero-wrap .grid { pointer-events: none; }
.hero-wrap .grid .button-nav2 { pointer-events: auto; }

/* ---- Mobile ------------------------------------------------------------
   On a phone the canvas stops being an overlay: the hero becomes a column
   with the copy first and the collage flowing underneath the Apply button.
   That alone frees up scrolling, and pointer-events:none guarantees a touch
   anywhere over the collage pans the page rather than dragging a window. */
@media (max-width: 991px) {
  .hero-wrap {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero-wrap .grid.container { order: 1; }
  /* An empty spacer div (272px padding top and bottom) reserved vertical room
     for the canvas back when it was an absolute overlay. The canvas now flows
     in the document, so it is 544px of dead space — and as a flex item with
     the default order it sorted ahead of the copy, pushing the hero title most
     of the way down the screen. */
  .hero-wrap > .grid:not(.container) { display: none; }
  .hero-wrap #hero-collage-canvas {
    order: 2;
    position: relative;
    inset: auto;
    height: 70vh;
    min-height: 420px;
    margin-top: 48px;
    touch-action: auto;      /* nothing to intercept now */
    pointer-events: none;    /* never swallow a scroll */
  }
}