/* scroll-scenes.css — sizing for mid-page scroll-revealed WebGL scenes.
   Companion module: assets/js/_shared/scroll-scenes.js
   Drop a `<div class="scroll-scene" data-scene="<id>" data-tier-min="2"></div>`
   between sections on a tier-2+ page. */

.scroll-scene {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 3rem auto;
  max-width: 1280px;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(170, 26, 51, 0.08) 0%,
    rgba(170, 26, 51, 0.03) 40%,
    rgba(0, 0, 0, 0) 75%);
  border-radius: 12px;
  overflow: hidden;
  contain: layout style paint;
}

.scroll-scene canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

@media (max-width: 768px) {
  .scroll-scene { height: 200px; margin: 2rem auto; }
}

/* prefers-reduced-motion: hide canvas, keep the soft glow as a divider */
@media (prefers-reduced-motion: reduce) {
  .scroll-scene canvas { display: none; }
  .scroll-scene { height: 24px; margin: 2rem auto; }
}