:root {
  --vx-model-3d-css: 1;
}

[data-vx-model-3d] {
  isolation: isolate;
  min-height: min(860px, 100svh);
  overflow: clip;
  position: relative;
}

[data-vx-model-canvas],
[data-vx-model-poster] {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

[data-vx-model-canvas] {
  opacity: 0;
  transition: opacity 240ms ease;
}

[data-vx-model-poster] {
  opacity: 1;
  transition: opacity 240ms ease;
}

[data-vx-model-state="ready"] [data-vx-model-canvas] {
  opacity: 1;
}

[data-vx-model-state="ready"] [data-vx-model-poster] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  [data-vx-model-canvas] {
    display: none;
  }

  [data-vx-model-state="ready"] [data-vx-model-poster] {
    opacity: 1;
    visibility: visible;
  }
}