/* ============================================================
   Slider 3D — Three.js canvas overlay styles
   ============================================================ */

.hero-canvases {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero-canvas.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
}