/**
 * The 3D scene block.
 *
 * Almost nothing, on purpose. The block gives the author a canvas and a size,
 * and everything that appears inside it is theirs - a rule here that set a
 * background or a border would be a decision the scene did not ask for.
 */

.ds-scene3d{
  position:relative;
  width:100%;
  /* Only when no aspect ratio or screen height was chosen. A row height scene
     still needs something to be, or the canvas collapses to nothing. */
  min-height:320px;
  overflow:hidden;
}

/* A scene given an aspect ratio or a screen height has said what it is, so the
   floor above would only fight it. */
.ds-scene3d[style*="aspect-ratio"],
.ds-scene3d[style*="100svh"]{ min-height:0 }

.ds-scene3d-canvas{
  display:block;
  width:100%;
  height:100%;
  /* Absolute so the canvas fills a box sized by aspect-ratio rather than the
     box being sized by the canvas, which would be circular. */
  position:absolute;
  inset:0;
}

/* Transparent unless the block asked for a color, so a scene can sit over a row
   background the way any other element does. */
.ds-scene3d.has-bg .ds-scene3d-canvas{ background:var(--ds-bg) }

/* ------------------------------------------------------------------
 * A scene used as a background
 *
 * Fit says the canvas is pinned to its row rather than standing in the
 * flow, so the row's own box gives it its size and everything else in
 * the row draws over it. The row keeps its own width, which is the
 * point: the words stay at the page width while the picture runs wider.
 * --------------------------------------------------------------- */

.ds-row:has(.ds-scene3d-fit){ position:relative }

.ds-scene3d.ds-scene3d-fit{
  position:absolute;
  inset:0;
  z-index:0;
  /* The row is the height now, so the floor for a flow scene must not
     hold this one open. */
  min-height:0;
}

/* Everything beside it draws over it. Without this the columns paint in
   document order and a scene written after them would cover the words. */
.ds-row:has(.ds-scene3d-fit) .ds-col > *:not(.ds-scene3d-fit){
  position:relative;
  z-index:1;
}

/* Out to the window, whatever the row is held to. */
.ds-scene3d.ds-scene3d-bleed{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:100vw;
  max-width:100vw;
}