/* The 3D stage and the label pins laid over it. */

/* ---- Stage ------------------------------------------------------------- */

.stage {
  position: absolute;
  inset: 0;
}

.stage__canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  opacity: 0;
  transition: opacity var(--dur-5) var(--ease-estate);
}

.stage__canvas:active {
  cursor: grabbing;
}

.stage__canvas:focus-visible {
  outline: 2px solid var(--amber-800);
  outline-offset: -4px;
}

[data-state="ready"] .stage__canvas {
  opacity: 1;
}

/* ---- Labels ------------------------------------------------------------

   The layer the pins are laid out on; the pins themselves are in pins.css. */

/* Its own stacking context, low in the page: a pin's z-index (by depth) never
   lifts it over the page chrome, so the model's pins pass under the index. */
.labels {
  --pin-hit: 32px; /* the button's size: what a pointer can hit */
  --pin-dot: 7px; /* the marker that is seen */
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-estate); /* arrives with the model, not before it */
}

[data-state="ready"] .labels {
  opacity: 1;
}

/* On arrival the pins and their names rise in as the camera's arrival move
   settles, not before it. Later entrances (a change of names setting) start
   at once: ui.js marks the page as arrived. */
:root:not([data-arrived]) .labels {
  --pins-enter-delay: 900ms;
}

/* A finger gets a 44px target; the marker that is seen stays the size it was. */
@media (pointer: coarse), (max-width: 640px) {
  .labels {
    --pin-hit: 44px;
  }
}