/* Sylo, the zoom scene (builder B8; client 208/209, 314): the painting hangs, the scroll moves the camera to the white page her card
   projects above the slot and pushes into it; the page, faint like a hologram at rest, firms up into the white section. Default (no script, phone, reduced motion): the painting, then the white section in
   flow. The pinned layout applies only when sy-zoom.js adds .sy-pin-on (desktop). */
.sy-zoom{position:relative;background:var(--bg)}
.sy-zpaint{position:relative;width:min(calc(100% - var(--m) * 2),1180px);margin:0 auto;aspect-ratio:3 / 2;overflow:hidden;background:#111;box-shadow:0 50px 100px rgba(0,0,0,.55)}
.sy-zpaint img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:55.31% 33.59%;will-change:transform}
.sy-zcard{position:relative;margin-top:clamp(64px,8vw,184px);padding:calc(var(--sec) - 20px) 0 calc(var(--sec) + 30px)}
.sy-zcard .sy-gt-h{margin-bottom:clamp(28px,3vw,44px)}

.sy-pin-on .sy-ztrack{height:380vh}
.sy-pin-on .sy-zpin{position:sticky;top:0;height:100vh;overflow:hidden}
.sy-pin-on .sy-zpaint{position:absolute;left:0;top:0;margin:0;transform-origin:55.31% 33.59%;will-change:transform,filter;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.sy-pin-on .sy-zcard{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;transform-origin:0 0;overflow:hidden;will-change:transform;
  --h:1;background:rgba(244,244,242,calc(1 - var(--h) * .62))}
.sy-pin-on .sy-zbody{height:100%;padding-top:var(--navh);opacity:calc(1 - var(--h) * .5)}
.sy-pin-on .sy-gt-h{margin-bottom:clamp(18px,2.4vh,32px)}
.sy-pin-on .sy-stage{width:min(100%,calc((100vh - 330px) * 1328 / 600))}
.sy-pin-on .sy-cap{margin-top:clamp(36px,6vh,64px)}

/* the ID card: her photo (a crop of the painting: her head and shoulders) beside the diagram (client 239) */
.sy-zbody{display:grid;grid-template-columns:minmax(0,1fr);row-gap:28px}
.sy-idph{position:relative;width:min(240px,40%);aspect-ratio:.86;border-radius:14px;overflow:hidden;background:#d9dbda;box-shadow:inset 0 0 0 1px rgba(14,15,15,.1)}
/* her ID photo (client r18: match the agent outside): her head and shoulders cut from the opening painting itself, its mesh half as it is there (p_sylo_id.webp: the painting's x 372-716, y 0-400, at 2x) */
.sy-idph img{position:absolute;max-width:none;width:100%;height:100%;left:0;top:0;object-fit:cover}
@media (min-width:761px){
  .sy-zbody{grid-template-columns:clamp(220px,22%,320px) minmax(0,1fr);column-gap:clamp(32px,3.4vw,56px);align-items:start}
  .sy-idph{width:100%;margin-top:6px}
}
.sy-pin-on .sy-zbody{align-content:center;align-items:center}
/* client r20 "headline not centered, not looking like other sections": the heading across the whole card, centred, in the sections'
   own heading (h2, each line rising once) */
.sy-zcard .sy-gt-h{grid-column:1 / -1;text-align:center;justify-self:center}
/* client r20 "give ascii bg in light and dim colors behind it diagram when zoomed in, fade that in gradually at the end of
   transition": ones and zeros behind the card's content, faint ink on the light ground, flickering like static; quieter behind
   the heading, the portrait, the diagram's parts and the sentence (sy-ascii.js); --asc fades it in at the end of the zoom (sy-zoom.js) */
.sy-ascii{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;opacity:var(--asc,0);transition:opacity .9s var(--ease)}
.sy-pin-on .sy-ascii{transition:none}
.sy-zbody{position:relative}
.sy-pin-on .sy-idph{margin-top:0}
.sy-pin-on .sy-idtx{display:flex;flex-direction:column;justify-content:center}
.sy-pin-on .sy-stage{width:min(100%,calc((100vh - 330px) * 1328 / 600))}

/* phone (client 22 Oct "running the zoom on phones"; sy-zoom.js adds .sy-pin-ph at 760 px and under): the desktop's held scene,
   clipped sideways only, so the white section (the card, all of it) can run on below the held screen; the script sets where the box
   is held (its top) and the section's bottom padding (the card's length past the screen), so what follows comes after it */
.sy-pin-ph .sy-ztrack{height:calc(100vh + 140vh)}
.sy-pin-ph .sy-zpin{position:sticky;top:0;height:100vh;overflow:visible;overflow-x:clip}
.sy-pin-ph .sy-zpaint{position:absolute;left:0;top:0;margin:0;will-change:transform,filter}
.sy-pin-ph .sy-zcard{position:absolute;left:0;top:0;width:100%;margin:0;transform-origin:0 0;--h:1;background:rgba(243,244,244,calc(1 - var(--h) * .62))}
.sy-pin-ph .sy-zbody{opacity:calc(1 - var(--h) * .5)}
.sy-pin-ph .sy-ascii{transition:none}