/* Reusable background layer. Import this file with robotics-hero.js. */
.robotics-hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  contain: layout paint;
}
.robotics-hero__canvas,
.robotics-hero__poster,
.robotics-hero__motion-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.robotics-hero__poster { object-fit: contain; object-position: center; opacity: 1; transition: opacity .8s ease; }
.robotics-hero__motion-poster { object-fit: contain; object-position: center; opacity: 0; }
.robotics-hero[data-animated-fallback="true"] .robotics-hero__motion-poster { opacity: 1; }
.robotics-hero[data-animated-fallback="true"] .robotics-hero__poster { opacity: 0; }
.robotics-hero__canvas { opacity: 0; transition: opacity 1.1s ease; }
.robotics-hero[data-state="ready"] .robotics-hero__canvas { opacity: 1; }
.robotics-hero[data-state="ready"] .robotics-hero__poster { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .robotics-hero__canvas, .robotics-hero__poster { transition: none; }
}