.x3d-canvas {
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.x3d-ready .x3d-canvas {
  opacity: 1;
}

.xbot__hero .x3d-canvas--hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  
  -webkit-mask-image: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, .28) 24px,
              rgba(0, 0, 0, .72) 52px,
              rgba(0, 0, 0, 1) 80px,
              rgba(0, 0, 0, 1) calc(100% - 64px),
              rgba(0, 0, 0, .72) calc(100% - 42px),
              rgba(0, 0, 0, .28) calc(100% - 20px),
              rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, .28) 24px,
              rgba(0, 0, 0, .72) 52px,
              rgba(0, 0, 0, 1) 80px,
              rgba(0, 0, 0, 1) calc(100% - 64px),
              rgba(0, 0, 0, .72) calc(100% - 42px),
              rgba(0, 0, 0, .28) calc(100% - 20px),
              rgba(0, 0, 0, 0) 100%);
}




.x3d-on .xbot__parallax-wrapper {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.x3d-on .xbot__parallax {
  will-change: transform;
}



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

  .x3d-on .xbot__parallax {
    transform: none !important;
  }
}