/*! © 2026 Robert Girvin. All rights reserved. Not licensed for reuse. Formist · the device morph. */
/* the device morph: one box, moved by scroll, from the work's context to a control room wall (the product, native, dark), a studio
   display, a laptop, a tablet, and a phone. Drawn in CSS around the existing captures; units are the plate's own width (cqw). The
   screens show the product, fitted to each screen from its top, so the product's own header stays; a plate marked data-set="site"
   shows the marketing site at its own height, which scrolls with the page, whatever a page's own screen rules say. */
.mo{ --formist-given-form:1.618; position:absolute; inset:0; display:block; pointer-events:none; }
.mo .ob{ position:absolute; left:var(--x, 7cqw); top:var(--y, var(--my)); width:var(--w, 86cqw); height:var(--h, var(--mh)); border-radius:var(--rad, .2cqw); background:var(--frame, transparent); box-sizing:border-box;
  padding:var(--bezt, var(--bez, 0)) var(--bez, 0) var(--bez, 0); outline:.18cqw solid rgba(204,205,209,var(--rimo, 0));
  box-shadow:0 calc(var(--lift, 0) * 1cqw) calc(var(--lift, 0) * 2.4cqw) calc(var(--lift, 0) * -1cqw) rgba(0,0,0,.45), inset 0 0 0 calc(var(--lift, 0) * 1px) rgba(255,255,255,.09); }
.mo .bar{ position:relative; display:flex; align-items:center; gap:.5cqw; height:var(--barh, 0); overflow:hidden; padding:0 1.1cqw; box-sizing:border-box; background:#1c1c1e; border-radius:var(--srad, 0) var(--srad, 0) 0 0; }
.mo .bar i{ flex:none; width:.7cqw; height:.7cqw; border-radius:50%; background:#5a5a5e; }
.mo .bar b{ flex:none; width:40%; height:52%; margin:0 auto; border-radius:.4cqw; background:#2c2c2f; }
.mo .scr{ position:relative; display:block; height:calc(100% - var(--barh, 0)); overflow:hidden; border-radius:var(--srad, 0); background:#0b0b0b; }
.mo .ob[data-bar] .scr{ border-radius:0 0 var(--srad, 0) var(--srad, 0); }
.mo .scr img{ position:absolute; left:0; top:0; right:auto; bottom:auto; width:100%; height:auto; object-fit:fill; display:block; opacity:0; }
.mo .scr .m-ctx, .mo .scr .m-wall{ height:100%; object-fit:cover; }
.mo .scr .m-ctx{ opacity:1; }
.mo .scr img.fit{ height:100%; object-fit:cover; object-position:50% 0; }
/* before the script runs, or without it, a plate shows its first stage */
.mo[data-stages^="desk"] .scr .m-desk, .mo[data-stages^="wall"] .scr .m-wall{ opacity:1; }
.mo .sea{ position:absolute; z-index:2; left:var(--bez, 0); right:var(--bez, 0); top:var(--bezt, var(--bez, 0)); bottom:var(--bez, 0); opacity:var(--seo, 0);
  background:repeating-linear-gradient(90deg, transparent 0 calc(20% - .18cqw), #050505 calc(20% - .18cqw) 20%), repeating-linear-gradient(180deg, transparent 0 calc(25% - .18cqw), #050505 calc(25% - .18cqw) 25%); }
.mo .cam{ position:absolute; z-index:3; left:50%; top:calc(var(--bezt, var(--bez, 0)) / 2 - .16cqw); width:.32cqw; height:.32cqw; margin-left:-.16cqw; border-radius:50%; background:#202024; opacity:var(--cmo, 0); }
.mo .isl{ position:absolute; z-index:3; left:50%; top:calc(var(--bez, 0) + 1cqw); width:6cqw; height:1.7cqw; margin-left:-3cqw; border-radius:1cqw; background:#000; opacity:var(--iso, 0); }
.mo .bmp{ position:absolute; z-index:-1; width:3cqw; height:3cqw; border-radius:1.2cqw; background:#3d3d40; opacity:var(--rgo, 0); }
.mo .bmp.nw{ left:-.45cqw; top:-.45cqw; } .mo .bmp.ne{ right:-.45cqw; top:-.45cqw; } .mo .bmp.sw{ left:-.45cqw; bottom:-.45cqw; } .mo .bmp.se{ right:-.45cqw; bottom:-.45cqw; }
.mo .stand{ position:absolute; left:50%; top:100%; width:28%; margin-left:-14%; height:calc(var(--w, 0) * .17); opacity:var(--sto, 0); background:linear-gradient(90deg, #9c9da1, #cfd0d3 16%, #e3e4e6 50%, #cfd0d3 84%, #9c9da1); }
.mo .stand::before{ content:""; position:absolute; left:0; right:0; top:0; height:1.4cqw; background:linear-gradient(rgba(0,0,0,.3), transparent); }
.mo .stand::after{ content:""; position:absolute; left:-3%; right:-3%; bottom:-.7cqw; height:.9cqw; border-radius:.2cqw; background:linear-gradient(#e8e9eb, #b2b3b6); box-shadow:0 .5cqw 1cqw -.3cqw rgba(0,0,0,.35); }
.mo .base{ position:absolute; left:-5%; right:-5%; top:100%; height:1.4cqw; border-radius:0 0 1.2cqw 1.2cqw; background:linear-gradient(#3a3a3d, #1c1c1e 70%); opacity:var(--bso, 0); }
.mo .base::after{ content:""; position:absolute; left:43%; right:43%; top:0; height:40%; border-radius:0 0 .6cqw .6cqw; background:rgba(0,0,0,.45); }
/* the control room's desks, beneath the wall: four operators, two screens each, the fronts seen from behind the room, every screen a
   different part of the same product (founder, 9 Nov 2026, B1: workstations at true scale) */
.mo .cns{ position:absolute; left:-1.35%; right:-1.35%; top:calc(100% + 4.4cqw); height:.5cqw; border-radius:.15cqw; background:var(--hair); opacity:var(--seo, 0); }
.mo .cns .ws{ position:absolute; bottom:100%; width:7.55cqw; height:2.67cqw; }
.mo .cns .ws::after{ content:""; position:absolute; left:50%; bottom:0; width:.19cqw; height:.6cqw; margin-left:-.095cqw; background:#1a1a1d; }
.mo .cns .ws i{ position:absolute; top:0; width:3.7cqw; aspect-ratio:16 / 9; box-sizing:border-box; border:.08cqw solid #050506; border-radius:.07cqw; background:#0b0b0c no-repeat; background-size:400% 200%; }
.mo .cns.on .ws i{ background-image:url(/assets/ic-cr-desks.webp); }
.mo .cns .ws i:first-child{ left:0; transform:perspective(26cqw) rotateY(13deg); transform-origin:100% 50%; }
.mo .cns .ws i:last-child{ right:0; transform:perspective(26cqw) rotateY(-13deg); transform-origin:0 50%; }
/* the Human + AI label rides on the field still, inside the moving box, and fades with it */
.mo .scr .aic{ position:absolute; z-index:2; right:14px; bottom:14px; font-size:12px; line-height:1.2; letter-spacing:.01em; color:rgba(255,255,255,.6); white-space:nowrap; }
.mo .stg{ position:absolute; z-index:4; left:7cqw; bottom:14px; margin:0; font-size:12px; line-height:1.2; color:var(--quiet); }
/* the qualification the product's screens carry: what they show is a demonstration, with synthetic data */
.mo .sd{ position:absolute; z-index:4; right:7cqw; bottom:14px; margin:0; font-size:12px; line-height:1.2; color:var(--quiet); white-space:nowrap; }
/* the hold: on a desktop the row, or the figure, stays centered while the reader scrolls through the devices */
/* a hold reserves its scroll from the first paint, in CSS, so nothing beneath it moves when the script runs: the script used to
   set the height on load, and a lazy image beneath raced it (Work's first view measured 674.8 KB and then 527.9 KB, 9 Nov 2026).
   The reservation is content, not padding, so a sticky stage travels through all of it. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ [data-mo-hold]::after{ content:""; display:block; height:150vh; } }
.mo-hold > [data-mo-stick]{ position:sticky; top:calc(50vh - var(--rh, 0px) / 2); }