/* Blender hero: same square composition for the poster and the live model. */
.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.main_face.hero-3d {
  width: min(70vw, 1280px);
  top: -8px;
  right: -5%;
  aspect-ratio: 1;
  pointer-events: none;
}
.hero-3d canvas, .hero-3d .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-3d canvas { opacity: 0; transition: opacity .6s; }
.hero-3d.is-ready canvas { opacity: 1; }
.hero-3d.is-ready .hero-poster { opacity: 0; }
.hero-poster { transition: opacity .6s; }
@media (max-width: 767px) {
  .main_face.hero-3d { width: 108vw; top: -3vw; right: -12vw; }
}
@media (prefers-reduced-motion: reduce) {
  .main_wheel { animation: none; }
  .hero-3d canvas, .hero-poster { transition: none; }
}

.hero-3d::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(39, 149, 236, .18), rgba(13, 79, 145, .08) 48%, transparent 70%); }