/* ============================================================
   Kahchunk — loading-hero stage + Build-it button
   The canvas spans the whole page behind the content; shapes drop,
   pile against the headline, and (on Build-it / scroll) fall through.
   ============================================================ */

/* Stage = the whole page. Canvas sits behind; content sits above. */
.page { position: relative; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.page > *:not(.hero-canvas):not(.hero__cta) { position: relative; z-index: 1; }

/* Build-it floats at the hero pivot (JS sets left/top); centered on the point.
   Hidden until the engine reveals it once shapes settle. */
.hero__cta {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.hero__cta:hover { transform: translate(-50%, -50%) scale(1.04); }
.hero__cta:active { transform: translate(-50%, -50%) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: none; }
}