/* ============================================================
   Horizon Music Academy — 3D hero overlay (assets/js/hero-3d.js)
   Load AFTER base.css on the home page only.
   Nothing here conflicts with base.css: the module owns only the
   .hero-3d wrapper it injects inside the #hero3d mount container.
   ============================================================ */

/* absolute overlay filling the mount container (the hero section) */
.hero-3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* the overlay must never intercept the page: hero copy, CTAs and
     page scrolling stay fully interactive. The module listens for
     pointer/keyboard events on the container instead of the canvas,
     and only "consumes" pointerdown when it hits a 3D piano key. */
  pointer-events: none;
  z-index: 0;
}

/* canvas fills the overlay; display sizing comes from CSS, not inline
   styles (renderer.setSize(..., false) keeps it that way) */
.hero-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* screen-reader-only hint describing the keyboard-playable piano
   (mirrors the .sr-only pattern from base.css) */
.hero-3d__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* reduced motion: the module renders one static frame; nothing extra
   is needed here, but avoid any accidental transitions on the canvas */
@media (prefers-reduced-motion: reduce) {
  .hero-3d canvas { transition: none; }
}