/* The interactive 3D desk (desk.js) that lives inside #hero-visual on the home page.
   Copied from the component part of the desk demo page. The demo's page and preview rules and
   its .desk-hint / .desk-loading rules are left out: those elements no longer exist.
   Changes from the demo are marked "site:" below. */

/* The stage is the desk's place in the layout. The canvas spills out of it, to the page's
   left and right edges and above and below, and lets clicks through. Thrown things fly over
   the page instead of being cut off at a box. Don't put the stage inside overflow: hidden. */
.desk-stage {
  position: relative;
  width: 100%;
  /* site: the demo centred the stage with max-width + margin and gave it its own height
     (min(84vh, 860px), min 460px). Here it fills #hero-visual, which has a height of its own. */
  height: 100%;
}
.desk-canvas {
  position: absolute; /* left, top, width and height are set by the script */
  display: block;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.desk-canvas.is-ready { opacity: 1; }
html.desk-grab, html.desk-grab * { cursor: grab !important; }
html.desk-button, html.desk-button * { cursor: pointer !important; }
html.desk-dragging, html.desk-dragging * { cursor: grabbing !important; user-select: none; }

.desk-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px; text-align: center;
  color: var(--muted); /* site: the demo's --muted is replaced by the site's own --muted */
  font-size: 15px;
}

/* ---- site: fitting it into the hero. Nothing below is in the demo. ---- */

/* #hero-visual gets its size from hero-visual.css (on phones from its aspect-ratio). The stage
   is placed against it (inset: 0), so it always covers the whole box and takes no space itself. */
.hero-art > .desk-stage { position: absolute; inset: 0; }

/* styles.css still has rules for the old hero canvas (.hero-art canvas): position: relative,
   z-index: 2, its own fade, and on phones a stretched size. Out-rank them for the desk canvas.
   The script sets left, top, width and height itself, as inline styles. */
.hero-art .desk-canvas { position: absolute; z-index: 5; inset: auto; transition: opacity 0.8s ease; }

/* hero-visual.css turns pointer events on for the empty box. The desk doesn't need that: it
   listens on the window and works out for itself what is under the pointer. With it on, the
   box would block clicks on anything behind it. */
.hero-art#hero-visual,
.hero-art#hero-visual .desk-stage { pointer-events: none; }