/* Three independent scenes, rendered by one Retina-resolution WebGL canvas. */
.hero-bg-motion { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-bg-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; background: #f4f8ff; transition: opacity 1.25s cubic-bezier(.22,.61,.36,1), visibility 0s 1.25s; }
.hero-bg-scene.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-bg-photo { position: absolute; inset: 0; background-position: right center; background-size: cover; background-repeat: no-repeat; }
.hero-poster-support { background-image: url('hero-support-3d.jpg'); }
.hero-poster-content { background-image: url('hero-content-3d.jpg'); }
.hero-poster-gateway { background-image: url('hero-gateway-3d.jpg'); }
.hero-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s ease; }
.hero-3d-canvas.is-ready { opacity: 1; }
@media (min-width: 901px) {
  .hero-v2 #hero-desc { min-height: 108px; }
}
@media (max-width: 1100px) {
  .hero-bg-motion::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#f7faff 0%,#f7faffe6 48%,#f7faff99 75%,#f7faff22); }
}
@media (max-width: 600px) {
  .hero-bg-photo { background-position: 75% center; }
  .hero-bg-motion::after { background: linear-gradient(180deg,#f7faffcc,#f7faffe0 36%,#f7faffc7 68%,#f7faff33); }
  .hero-v2 #hero-desc { min-height: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-scene, .hero-3d-canvas { transition: none; }
}