/* The 3D model block.
 *
 * A box in the document that reserves the space, holding the poster. The model
 * itself is drawn on the shared canvas behind the page, scissored to this box -
 * so there is nothing here that draws, only something that says how much room
 * to leave and what to show while there is nothing drawn yet.
 */
.ds-model3d{
  position: relative;
  width: 100%;
  overflow: hidden;
  /* The stage draws behind the document, so the box itself must not paint a
     background over it. */
  background: transparent;
}

/* The poster, filling the box until the model replaces it.
 *
 * Kept in the document rather than swapped out for the canvas: it carries the
 * description a screen reader reads and a crawler indexes, and on a browser
 * with no WebGL it is simply what the block is. */
.ds-model3d .ds-model3d-poster{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .45s ease;
}

/* Faded rather than removed once there is a model to see.
 *
 * Removed would reflow the page at the moment a model lands, which is the one
 * moment somebody is looking at it. Left in place and made invisible, the box
 * keeps its height and the description stays where assistive technology can
 * still reach it. */
.ds-model3d[data-ds-model-state="ready"] .ds-model3d-poster{
  opacity: 0;
  pointer-events: none;
}

/* Nothing to draw with, or the file would not load. The poster is the block. */
.ds-model3d[data-ds-model-state="none"] .ds-model3d-poster,
.ds-model3d[data-ds-model-state="failed"] .ds-model3d-poster{ opacity: 1 }

/* A box with no poster at all still has to reserve its space, and there is
   nothing in it to do that - the canvas behind is not in the flow. */
.ds-model3d:not(:has(img)){ min-height: 1px }

@media (prefers-reduced-motion: reduce){
  .ds-model3d .ds-model3d-poster{ transition: none }
}

/* The canvas a block draws into where the page's shared one is switched off.
   Fills the box behind the poster, which fades over it the same way. */
.ds-model3d-own{
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}