/* The 3D Pib (pib3d.js). #host only gets .pib3d once he's drawn his first frame; until then, or if
   WebGL isn't available, the SVG shows as usual.

   The SVG stays in the layout, invisible, since the page measures it. The canvas is bigger than
   #blob-wrap to leave room for raised arms and a hat in the air. These numbers put one 3D unit (the
   body's radius) at 98 of the SVG's units, with the body centred where the SVG's is. */
#pib3d-canvas { display: none; position: absolute; left: -63.33%; top: -63.7%; width: 226.67%; height: 185.1%; pointer-events: none; }
#pib3d-shadow { display: none; position: absolute; left: 50%; top: 96.5%; width: 57.33%; height: 4.88%; border-radius: 50%; background: rgba(0,0,0,.3); transform: translate(-50%, -50%); pointer-events: none; }
#host.pib3d #pib3d-canvas, #host.pib3d #pib3d-shadow { display: block; }
#host.pib3d #blob { visibility: hidden; }
/* he turns round to leave in 3D, so the SVG's mirror flip isn't needed */
#host.pib3d.leaving #blob-wrap { transform: none; }

/* Copies of Pib around the page (pib-copy.js), mounted with Pib3D.mount or data-pib3d: the same box
   around the copy's SVG as the stage's, on the copy's own container. */
.pib3d-canvas { display: none; position: absolute; left: -63.33%; top: -63.7%; width: 226.67%; height: 185.1%; pointer-events: none; }
.pib3d-shadow { display: none; position: absolute; left: 50%; top: 96.5%; width: 57.33%; height: 4.88%; border-radius: 50%; background: rgba(0,0,0,.3); transform: translate(-50%, -50%); pointer-events: none; }
.pib3d > .pib3d-canvas, .pib3d > .pib3d-shadow { display: block; }
.pib3d > svg.pib-copy { visibility: hidden; }