/* ==========================================================================
   figure-host.css — where the scanned figure stands, on whichever page hosts it.

   TWO HOSTS TODAY: the work page's field, where it is placed by one of five
   anchors and measured in vh, and the home page's HUD map box, where
   css/hud.css owns a 283x142px frame and this only has to centre a 52px figure
   inside it. Nothing below names either page — js/figure-host.js writes the
   numbers and the unit, and picks the placement class.

   THE MODULE WRITES NUMBERS, THIS FILE OWNS THE GEOMETRY. Everything that
   changes is a custom property on the host; the five placements are five
   classes. That split is what keeps js/figure-host.js from carrying a table of
   `left`/`right`/`top`/`bottom` strings — a placement is a class name there and
   the anchoring lives here, in the language that has anchoring in it.

   WHY THE BOX IS SQUARE. The renderer is asked to `contain` the model inside
   whatever frame it is given, so the frame's SHORTER side is what decides how
   tall the figure comes out. A square frame makes that the same number on both
   axes, which is what lets one `size` dial mean one thing.
   ========================================================================== */

.wfig{
  position: absolute;
  width: var(--wfig-size, 34vh);
  height: var(--wfig-size, 34vh);
  z-index: var(--wfig-z, 45);
  opacity: var(--wfig-opacity, 1);
  /* THE FIELD IS DRAGGED THROUGH THIS ELEMENT. .wgrid is one big pointer
     target — the drag, the wheel and the dwell test all read from it — and an
     element sitting on top of it that accepts events is a rectangle of the
     page where the field cannot be picked up. */
  pointer-events: none;
  /* The colour treatment. Both of these are inert at their defaults, so a
     figure set to `normal` costs nothing: `mix-blend-mode: normal` does not
     even promote the layer. */
  mix-blend-mode: var(--wfig-blend, normal);
  filter: var(--wfig-filter, none);
}

.wfig canvas{
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------- the five placements --------------------------------------
   The margins are ignored in the centre, which is the one position that is not
   measured from an edge. */
/* THE NUDGE IS ITS OWN PAIR OF PROPERTIES, composed into every transform that
   places a host rather than replacing it. Three writers want this transform —
   the centring here, the column travel in css/block2.css, and js/figure-host.js
   writing fig.x / fig.y — and the only way all three survive is if none of them
   owns the whole string. */
.wfig{ --wfig-dx: 0px; --wfig-dy: 0px; }
.wfig--center{
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) translate(var(--wfig-dx), var(--wfig-dy));
}
.wfig--top-left, .wfig--top-right,
.wfig--bottom-left, .wfig--bottom-right{
  transform: translate(var(--wfig-dx), var(--wfig-dy));
}
.wfig--top-left    { left:  var(--wfig-mx, 4vh); top:    var(--wfig-my, 4vh); }
.wfig--top-right   { right: var(--wfig-mx, 4vh); top:    var(--wfig-my, 4vh); }
.wfig--bottom-left { left:  var(--wfig-mx, 4vh); bottom: var(--wfig-my, 4vh); }
.wfig--bottom-right{ right: var(--wfig-mx, 4vh); bottom: var(--wfig-my, 4vh); }

/* OFF IS HIDDEN, NOT REMOVED. `display:none` would collapse the canvas to
   0x0, and the renderer solves its camera from the box it is given — a zero
   box is a divide the camera does not survive, and it would have to be
   re-solved on the way back anyway. Hiding costs one composited layer that
   draws nothing. */
.wfig.is-off{ visibility: hidden; opacity: 0; }