/* public/css/scene.css — Three.js canvas layout for the hero section */

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none; /* hero text and CTAs must be clickable through canvas */
  touch-action: none;   /* prevents scroll interference on touch devices */
  z-index: 0;
}

#hero {
  position: relative;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 1; /* sits above canvas */
}

/* Static fallback image shown when WebGL is unavailable (e.g. old iOS, low-end Android) */
#hero-canvas-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* shown only by hero.js when WebGL check fails */
  z-index: 0;
  opacity: 0.35;
}