.divi-powers-motion-3d-scene {
  --dp-motion-perspective: 1400px;
  position: relative;
  perspective: var(--dp-motion-perspective);
  transform-style: preserve-3d;
}

.divi-powers-motion-3d-target,
.divi-powers-motion-3d-self {
  --dp-motion-rotate-x: 0deg;
  --dp-motion-rotate-y: 0deg;
  --dp-motion-scale: 1;
  --dp-motion-glare-x: 50%;
  --dp-motion-glare-y: 50%;
  --dp-motion-glare-opacity: 0;
  position: relative;
  transform: var(--dp-motion-base-transform, translateZ(0)) rotateX(var(--dp-motion-rotate-x)) rotateY(var(--dp-motion-rotate-y)) scale(var(--dp-motion-scale)) !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Legacy mode moves the pointer driver itself, so perspective must be part of
 * the element's transform rather than supplied by a stationary parent. */
.divi-powers-motion-3d-self {
  transform: perspective(var(--dp-motion-perspective, 1400px)) var(--dp-motion-base-transform, translateZ(0)) rotateX(var(--dp-motion-rotate-x)) rotateY(var(--dp-motion-rotate-y)) scale(var(--dp-motion-scale)) !important;
}

.divi-powers-motion-3d-layer {
  transform: var(--dp-motion-layer-base, translateZ(0)) translateZ(var(--dp-motion-depth, 60px)) !important;
  transform-style: preserve-3d;
  will-change: transform;
}

.divi-powers-motion-3d-glare {
  position: absolute;
  inset: 0;
  z-index: 999;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--dp-motion-glare-opacity, 0);
  background: radial-gradient(
    circle at var(--dp-motion-glare-x, 50%) var(--dp-motion-glare-y, 50%),
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 0.14) 26%,
    transparent 62%
  );
  mix-blend-mode: screen;
  transition: opacity 100ms linear;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  html:not(.divi-powers-motion-3d-builder-preview) .divi-powers-motion-3d-target,
  html:not(.divi-powers-motion-3d-builder-preview) .divi-powers-motion-3d-self {
    transform: var(--dp-motion-base-transform, none) !important;
    will-change: auto;
  }

  html:not(.divi-powers-motion-3d-builder-preview) .divi-powers-motion-3d-layer {
    transform: var(--dp-motion-layer-base, none) !important;
    will-change: auto;
  }

  html:not(.divi-powers-motion-3d-builder-preview) .divi-powers-motion-3d-glare {
    display: none;
  }
}