/* The SyncOps live picture from the demo itself (js/live-syncops.js). One unit (--u) = 1/1256 of the picture's width.
   Two windows of the real demo (the Jobs board in front, the Live Map behind) and the demo's own markers floating
   around them. The animation is js/case-live.js and the .cl-* motions in css/styles.css. */
.case-live.cl-syncops.cl-code{container-type:inline-size;--u:calc(100cqw / 1256);font-family:Inter,system-ui,sans-serif;
  /* the same screen shadow as the AFT picture: soft, layered - it reads between the two windows */
  --sh-screen:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(24,12,64,.07),0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(24,12,64,.13),
    0 calc(42 * var(--u)) calc(90 * var(--u)) rgba(24,12,64,.16);
  --sh-piece:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(30,40,110,.16),0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(30,40,110,.10)}
.cl-syncops.cl-code .sy-stage{position:relative;width:100%;aspect-ratio:1256/944}

/* the two windows */
.sy-win{position:absolute;border-radius:10px;overflow:hidden;box-shadow:var(--sh-screen)}
.sy-win iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;background:transparent}
.sy-map{left:calc(592 * var(--u));top:calc(130 * var(--u));width:calc(508 * var(--u));height:calc(335 * var(--u));background:#f3f4f7}
.sy-jobs{left:calc(52 * var(--u));top:calc(352 * var(--u));width:calc(758 * var(--u));height:calc(539 * var(--u));background:#eef1f7}

/* weightless: each window and the markers float on their own clock (clDrift is css/styles.css) */
@keyframes syDriftB{0%,100%{transform:translate(0,0)}40%{transform:translate(.4%,-1.6%)}75%{transform:translate(-.3%,-.6%)}}
@keyframes syFloat{0%,100%{transform:translate(0,0)}35%{transform:translate(-.2%,-1%)}70%{transform:translate(.25%,-.4%)}}
.case-live.go.cl-code .cl-drift-b{animation:syDriftB 8.2s ease-in-out -2.4s infinite}
.sy-float{position:absolute;inset:0}
.case-live.go.cl-syncops.cl-code .sy-float{animation:syFloat 7.1s ease-in-out -1s infinite}

/* ---------- the demo's markers ---------- */
.cl-syncops.cl-code .cl-s{display:block}
.cl-syncops.cl-code .cl-s img{position:absolute;max-width:none}
/* a pin: the demo's SVG (84x156, shown at half size in the demo) */
/* 15% larger than the slices were, grown round its own tip (in the 48x73 file the drop's tip is at 24,51 - 70% down) */
.cl-syncops .sy-pin{left:6%;top:4%;width:auto;height:96%;transform:scale(1.15);transform-origin:50% 70%;
  filter:drop-shadow(0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(20,30,80,.28))}
.cl-pin-cyan .sy-pin{left:16%}
/* the warning dot on a pin */
.sy-bang{position:absolute;right:2%;top:0;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:#fff;
  box-sizing:border-box;border:calc(2.4 * var(--u)) solid #f89123;color:#f89123;display:grid;place-items:center;
  font:800 calc(12 * var(--u))/1 Inter,sans-serif;box-shadow:var(--sh-piece)}
/* a technician (.mk-ava): white ring, photo, tail */
.sy-ava{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:var(--sh-piece)}
.sy-ava img{inset:calc(3 * var(--u));width:calc(100% - 6 * var(--u));height:calc(100% - 6 * var(--u));border-radius:50%;object-fit:cover}
/* a pin with its people (.mk-pill2) */
.sy-pill{position:absolute;inset:0}
.sy-pill .sy-pin{left:0;top:auto;bottom:0;height:calc(58 * var(--u));z-index:2}
.sy-pill .pbody{position:absolute;left:calc(22 * var(--u));bottom:calc(22 * var(--u));display:flex;align-items:center;
  padding:calc(5 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)) calc(14 * var(--u));border-radius:999px;
  border:calc(2 * var(--u)) solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#b3c9ff,#6d87e8) border-box;box-shadow:var(--sh-piece)}
.sy-pill .pav{position:relative;display:block;width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;overflow:hidden;
  margin-left:calc(-7 * var(--u));box-shadow:0 0 0 calc(1.7 * var(--u)) #fff}
.sy-pill .pav:first-child{margin-left:0}
.sy-pill .pav img{position:static;width:100%;height:100%;object-fit:cover}
.sy-pill.one .pbody{left:calc(20 * var(--u));bottom:calc(16 * var(--u))}
.sy-warn{position:absolute;right:0;top:0;width:calc(24 * var(--u));height:calc(21 * var(--u));background:#e5767a;color:#fff;
  clip-path:polygon(50% 0,100% 100%,0 100%);display:grid;place-items:end center;font:800 calc(12 * var(--u))/1.4 Inter,sans-serif}
/* the route: the demo's line (#56c2e4, 2.2, with its soft glow) and its white end dots */
.sy-route{display:block;width:100%;height:100%;overflow:visible;fill:none}
.sy-route path{stroke:#56c2e4;stroke-width:2.2;stroke-linecap:round}
.sy-route path.glow{stroke:#5bc9e8;stroke-width:6;opacity:.25}
.sy-route circle{fill:#a5e6f8;stroke:#fff;stroke-width:1.6}
/* fire and sparkles */
.cl-syncops .sy-fire{inset:0;width:100%;height:100%;filter:drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.25))}
.sy-star{position:absolute;inset:0;color:#cfe0ff}
.sy-star svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
/* the pin and the technician the route joins do not bob - the route's ends stay exactly on them
   (they still leave and come back with the route, in its cycle) */
.case-live.go.cl-syncops.cl-code .cl-pin-cyan,.case-live.go.cl-syncops.cl-code .cl-av-c{animation:none}
/* the Jobs screen in front casts a deeper shadow to the right, so it falls on the map window behind it and darkens
   its edge a little (Larisa, 18.10) */
.cl-syncops.cl-code .sy-jobs{box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(24,12,64,.08),
  calc(22 * var(--u)) calc(10 * var(--u)) calc(48 * var(--u)) rgba(24,12,64,.26),
  calc(48 * var(--u)) calc(28 * var(--u)) calc(120 * var(--u)) rgba(24,12,64,.24)}
/* weightless, each screen on its own path (Larisa, 18.10): the Jobs screen rises and settles slowly; the map window
   travels a small orbit of its own - round, not up and down - on a longer clock, so the two never move as one */
@keyframes syJobs{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-1.6%)}}
@keyframes syOrbit{0%,100%{transform:translate(0,0)}25%{transform:translate(1.3%,-1.6%)}50%{transform:translate(0,-3.2%)}
  75%{transform:translate(-1.3%,-1.6%)}}
.case-live.go.cl-syncops.cl-code .sy-jobs{animation:syJobs 9.5s ease-in-out infinite}
.case-live.go.cl-syncops.cl-code .sy-map{animation:syOrbit 13s linear -3s infinite}