/* =============================================================================
   PrivacyWall Design System — Illustrations
   Requires: pw-tokens.css, pw-base.css, pw-illustrations.js
   Drawn by ds/gen/illustrations.py; this file only sizes and reveals them.

     <span class="pw-illo" data-pw-illo="browse"></span>

   An illustration is ARTWORK, in the sense DESIGN.md gives the word: its
   palette is part of the drawing, so it does not invert in dark mode and it
   is the one place in the system a literal colour is allowed. What follows
   the theme is everything around it.
   ============================================================================= */

.pw-illo {
  display: block;
  position: relative;
  width: 100%;
  /* every scene is cropped to the same 1 : .76 box, so a row of them lines up */
  aspect-ratio: 1 / 0.76;
}

.pw-illo__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Held back until its build-in starts, so the finished picture never flashes
   first. Only set by the controller, and only when it is going to build. */
.pw-illo[data-pw-illo-pending] .pw-illo__svg { visibility: hidden; }

/* The scene's own layers are groups inside one SVG; GSAP moves them, and a
   transition on them would chase those moves. */
.pw-illo__svg[data-building] * { transition: none !important; }

/* The ground runs past the crop on purpose (it is the floor of a card), so a
   picture on its own needs a frame to end where the drawing ends. */
.pw-illo--framed {
  overflow: hidden;
  border-radius: var(--pw-radius-xl);
  background: var(--pw-bg-subtle);
}