/* ============================================================
   The butterfly — a visitor on the case study pages.
   Appearance only; assets/butterfly.js decides where it goes.
   ============================================================ */

/* The layer sits at the document's origin, so the butterfly lives in
   page coordinates: once it lands, it scrolls with the paper it landed
   on, the way a real one would sit on a real sheet. */
.bfly {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 40;            /* over the document, under the grain and veil */
  pointer-events: none;
}
/* The flat layer (and the shadow, in both renderers). max-width: none,
   explicitly — the site reset caps every svg at 100% of its parent, the
   layer is 0 wide, and a 0-wide svg paints nothing at all, overflow:
   visible or not. Scoped to the direct child: the 3D wings carry their
   own sized svgs and must not be squeezed to a pixel. */
.bfly > svg { position: absolute; overflow: visible; width: 1px; height: 1px; max-width: none; }
.bfly__shadow { transition: none; }

/* — the 3D renderer —
   The stage holds the perspective; everything under it keeps its 3D
   (preserve-3d) so the four hinged wings and the body share one space. */
.bf3,
.bf3__body,
.bf3__wing {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.bf3__wing {
  transform-origin: 0 0;   /* the hinge: the body line runs through the origin */
  backface-visibility: visible;
}
/* Each wing has two faces, back to back; each shows only from its own side,
   so a raised wing turned past the viewer shows its paler underside. */
.bf3__face {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  backface-visibility: hidden;
}
.bf3 svg { max-width: none; }

/* — the WebGL renderer — a canvas over the window. Fixed, so it stays put
   while the page scrolls; the butterfly is placed on it by the camera. */
.bfly__gl {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  max-width: none;
}