/* Custom Agents, Why Atlas: the jigsaw painting and its zoom (r17g; client 198 ... 311, 352, 368, 369, 389, 396, 397, 399, 400, 401).
   One painting (p_agents_jig_*.webp, 1536 x 1024): she is seen from behind, reaching up with both hands to press the robot piece (one
   ordinary-sized piece) into a wall-size board; one pose only, her hands on the piece throughout. The robot piece is one plain vector
   piece in the footer colour (its outline traced from the painted piece), the same smooth surface at every zoom. Layers, bottom to
   top: the plate (the painting with the piece's slot empty), the piece and its shadow, her figure, and two closer repaints of the
   seated scene (z1, z2; the piece cut out of them except under her fingers) so the zoom stays sharp. All sit in the painting's own
   coordinates (percentages of 1536 x 1024); ca-jig.js scales the whole. Prefix ca-jz-. */
.ca-jz{padding:0;background:var(--dusk)}
.ca-jz-pin{position:relative;height:420vh} /* r17h: 320vh of scroll: the press, the committed zoom (never outrun by the scroll) and the held footer-colour screen (ca-jig.js) */
.ca-jz-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#a7a9a3}
.ca-jz-stage{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0}
.ca-jz-stage img,.ca-jz-stage svg{position:absolute;display:block;max-width:none;overflow:visible;user-select:none;-webkit-user-drag:none}
.ca-jz-plate{left:0;top:0;width:100%;height:100%}
.ca-jz-z1{left:30.729%;top:15.039%;width:37.5%;height:37.5%}
.ca-jz-z2{left:45.378%;top:29.395%;width:8.203%;height:8.203%}
.ca-jz-z1,.ca-jz-z2{opacity:0;visibility:hidden}
/* the robot piece (its box in the painting: 685, 240, 152 x 199); it tilts about the line under her fingertips (y 335) */
.ca-jz-tile,.ca-jz-shade{left:44.596%;top:23.438%;width:9.896%;height:19.434%;transform-origin:49.342% 47.739%}
.ca-jz-shade{filter:blur(3px);opacity:0}
.ca-jz-her{left:36.784%;top:31.445%;width:25.456%;height:68.555%}
/* the next section's torn edge waits until the zoom has ended (client 401); set by ca-jig.js, so reduced motion is unaffected */
.ca-jz + .torn .tear{transition:opacity .35s var(--ease)}
.ca-jz.ca-jz-hold + .torn .tear{opacity:0}
.ca-jz-dusk{position:absolute;inset:0;background:var(--dusk);opacity:0;pointer-events:none}
/* the words: laid out at their final size (the page's h2), placed and scaled by the script */
.ca-jz-txt{position:absolute;left:0;top:0;width:min(620px,calc(100% - var(--m) * 2));text-align:center;transform-origin:0 0}
.ca-jz-txt .eyebrow{margin-bottom:20px;color:rgba(255,255,255,.72)}
.ca-jz-head{margin:0;color:#fff}
.ca-jz-head span{display:block}
.ca-jz-lede{margin:26px auto 0;color:rgba(255,255,255,.84);max-width:31em}
@media (max-width:760px){.ca-jz-lede{margin-top:20px}}
/* phone (client 22 Oct: "the movement of animation in phone ... stops users from scrolling and feels like a bug ... allow scroll after
   completion quickly"): the same scene over a shorter hold (1.2 screens of scroll in place of 3.2), so the press, the committed
   zoom and the footer-colour screen each pass in a thumb's scroll; ca-jig.js reads the hold's length, its steps keep their shares */
@media (max-width:760px) and (prefers-reduced-motion:no-preference){.ca-jz-pin{height:calc(100vh + 120vh);height:calc(100svh + 120svh)}}
/* reduced motion: the finished painting (her hands on the seated piece), then the words on the footer colour below it */
@media (prefers-reduced-motion:reduce){
  .ca-jz-pin{height:auto}
  .ca-jz-stick{position:static;height:auto;overflow:visible;background:var(--dusk)}
  .ca-jz-stage{position:relative;width:100%;height:auto;aspect-ratio:3 / 2;transform:none!important;overflow:hidden}
  .ca-jz-dusk,.ca-jz-z1,.ca-jz-z2,.ca-jz-shade{display:none}
  .ca-jz-txt{position:static;transform:none!important;width:auto;max-width:calc(620px + var(--m) * 2);margin:0 auto;padding:var(--sec) var(--m)}
}