/* Animated screen of the intercom studio picture (owner 2026-10-16 01:15 UTC; mockup ../mockups/intercom-card-v2/B2/).
   Markup (build.py Ctx.ica()): <div class="ca" data-ca="intercom" aria-hidden="true"><div class="ca-stage">...</div></div> right after the
   <picture>s, inside the box that holds them (.ph of a card or a camera-page thumbnail, figure.shot of a page). The stage is the
   1254 x 1254 studio master, placed over the visible picture by intercom-anim.js. Loaded only on pages that show the picture.
   The screen is a lit display: its colours are the same in the light and the dark theme (the picture itself is the same product). */
:has(>.ca){position:relative}
.ca{position:absolute;inset:0;pointer-events:none;transform-origin:50% 50%;transition:transform .6s ease;overflow:hidden}
.svc:hover .ca{transform:scale(1.06)}                                   /* same zoom as .svc:hover .ph img */
.ca-stage{position:absolute;left:0;top:0;width:1254px;height:1254px;transform-origin:0 0;visibility:hidden}
.ca-on .ca-stage{visibility:visible}                                    /* placed by the script; without it the picture alone (= frame 0) */
.ca-stage>*{position:absolute}

.ica-scr{left:0;top:0;transform-origin:0 0;overflow:hidden;background:linear-gradient(180deg,#151a1f 0%,#0e1215 100%);
  color:#e8edf2;font-family:"Noto Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;backface-visibility:hidden}
.ica-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(128deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 38%)}
.ica-hd{position:absolute;left:0;right:0;top:0;height:62px;display:flex;align-items:center;gap:11px;padding:0 16px 0 17px;
  border-bottom:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035)}
.ica-hd svg{color:#c9d1d9;flex:none}
.ica-hd b{font-size:25px;font-weight:700;letter-spacing:.2px}
.ica-az{margin-left:auto;font-size:15px;color:#9aa4ae;border:1px solid #3b444d;border-radius:13px;padding:3px 10px 4px}
.ica-vp{position:absolute;left:0;right:0;top:63px;height:348px;overflow:hidden}
.ica-ls{list-style:none;margin:0;padding:0;will-change:transform}
.ica-ls li{height:58px;box-sizing:border-box;display:flex;align-items:center;padding:0 58px 0 19px;font-size:22px;
  border-bottom:1px solid rgba(255,255,255,.075);white-space:nowrap}
.ica-ls b{font-weight:400}
.ica-ls li.v b{color:#8f99a3}
.ica-ls span{margin-left:auto;font-weight:700;color:#b3bcc6;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.ica-hl{position:absolute;left:7px;right:21px;top:3px;height:52px;border-radius:9px;background:rgba(255,255,255,.17);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34);will-change:transform}
.ica-hl svg{position:absolute;right:7px;top:16px;opacity:0}                    /* call hint, shown while the row rests */
.ica-sb{position:absolute;right:7px;top:71px;width:5px;height:332px;border-radius:3px;background:rgba(255,255,255,.1)}
.ica-sb i{position:absolute;left:0;top:0;width:5px;height:142px;border-radius:3px;background:rgba(255,255,255,.58);will-change:transform}
.ica-ft{position:absolute;left:0;right:0;bottom:0;height:41px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:16px;color:#a7b0ba;border-top:1px solid rgba(255,255,255,.1)}
.ica-press{border-radius:9px;opacity:0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.30),rgba(255,255,255,.06) 70%,rgba(255,255,255,0))}
@media print{.ca{display:none}}