/* ==== Vega Security: animated studio pictures ("card-anim", owner 2026-10-16 01:41-02:04 UTC; mockups ../mockups/card-anim/, netsec-v2/) ====
   Seven studio pictures (audits, VoIP, access control, fibre optics, project management, video surveillance, network security). Markup
   (build.py ca_overlay(), from src/card-anim/cards/<key>.html via card_anim.expand), right after the <picture>s, in every box that shows
   the studio picture (.ph of a card, camera-page thumbnail, figure.shot of a page):
     <!--ca:KEY--><span class="ca cx CLS" data-ca="KEY" aria-hidden="true"><span class="ca-s"> ...layers in master px... </span></span><!--/ca-->
   .ca-s is a 1254 x 1254 px stage (the studio master's own pixels), placed over the VISIBLE picture like object-fit:cover by card-anim.js
   (the same placement as intercom-anim.js), so coordinates measured on the master serve every size and both themes (the dark master is
   aligned to the light one). Planes (.ca-p) carry a matrix3d: screens are drawn flat and projected onto the photographed screen.
   Base styles = the FINAL frame. Animations only run on .cx.go (card-anim.js, unless reduced motion) and are paused on .cx.off (off
   screen). Without JS the stage stays hidden = the plain picture. Everything is absolutely positioned: no layout shift.
   The intercom overlay (intercom-anim.css/.js) is separate; .cx keeps these rules off it. Loaded only on pages that have an overlay. */

/* ---- core ---- */
:has(>.ca){position:relative}
.ca{position:absolute;inset:0;pointer-events:none;overflow:hidden;transform-origin:50% 50%;transition:transform .6s ease}
.svc:hover .ca{transform:scale(1.06)}                                   /* follows .svc:hover .ph img */
.ca-s{position:absolute;left:0;top:0;width:1254px;height:1254px;transform-origin:0 0;visibility:hidden;
  font:400 16px/1.2 "Noto Sans",system-ui,sans-serif;color:#E8EEF4;-webkit-font-smoothing:antialiased}
.ca-on>.ca-s{visibility:visible}                                        /* placed by the script */
.ca-s i,.ca-s b,.ca-s em,.ca-s small{font-style:normal}
.ca-p{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden}
.ca-p.v{overflow:visible}
.ca-a{position:absolute}
.ca-l{display:var(--pic-light,block)}.ca-d{display:var(--pic-dark,none)}  /* theme tokens of theme.py, like the two <picture>s */
.cx:not(.go) *,.cx:not(.go) *::before,.cx:not(.go) *::after{animation:none!important}
.cx.off *,.cx.off *::before,.cx.off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.cx *,.cx *::before,.cx *::after{animation:none!important;transition:none!important}}

/* LEDs (also what network-security's blinking LEDs become: same --x/--y idea, here in master px via data-at) */
.ca-led{position:absolute;width:var(--s,10px);height:var(--s,10px);translate:-50% -50%;border-radius:50%;background:var(--off,#1c1f22)}
.ca-led::after{content:"";position:absolute;inset:-120%;border-radius:50%;
  background:radial-gradient(circle,#fff 0 8%,var(--c) 19%,color-mix(in srgb,var(--c) 45%,transparent) 33%,transparent 68%)}
.ca-led.nb{background:none}                                             /* glow only, over an LED of the picture */
.ca-s .g{--c:#6BFF7A}.ca-s .a{--c:#FFB13B}.ca-s .r{--c:#FF3B30}
.ca-off{position:absolute;width:var(--s,24px);height:var(--s,24px);translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,var(--off) 0 42%,color-mix(in srgb,var(--off) 75%,transparent) 56%,transparent 72%);opacity:0}
/* generic LED behaviours (network-security) */
.ca-led.act::after{animation:led-act var(--t,1.3s) var(--d,0s) infinite step-end}
.ca-led.lnk::after{animation:led-lnk var(--t,6s) var(--d,0s) infinite step-end}
.ca-led.hb::after{animation:led-hb var(--t,2s) var(--d,0s) infinite ease-in-out alternate}
.ca-led.al::after{animation:led-al var(--t,9s) var(--d,0s) infinite step-end}
@keyframes led-act{0%{opacity:1}9%{opacity:0}14%{opacity:1}31%{opacity:0}35%{opacity:1}39%{opacity:0}43%{opacity:1}62%{opacity:0}70%{opacity:1}84%{opacity:0}88%{opacity:1}}
@keyframes led-lnk{0%{opacity:1}91%{opacity:0}93%{opacity:1}95%{opacity:0}97%{opacity:1}}
@keyframes led-hb{0%{opacity:1}100%{opacity:.15}}
@keyframes led-al{0%{opacity:1}94%{opacity:0}97%{opacity:1}}
/* a screen: emitted light + a faint glass sheen above the content */
.scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 52%)}
.ca-s .T{animation-duration:var(--T);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:linear}

/* ==== 6. Security and network audits: certifier autotest -> PASS (9 s) ==== */
.au{--T:9s}
.au-scr{background:radial-gradient(130% 100% at 25% 15%,#14283c,#08111b 72%);font-size:14px}
.au-hd{position:absolute;left:0;top:0;width:100%;height:34px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#15314d;font-weight:700;font-size:16px}
.au-hd em{margin-left:auto;font-weight:400;font-size:13px;color:#A9C0D4}
.au-bat{width:26px;height:13px;border:2px solid #A9C0D4;border-radius:3px;position:relative}
.au-bat::after{content:"";position:absolute;inset:2px 5px 2px 2px;background:#5BD38A;border-radius:1px}
.au-wm{position:absolute;left:10px;top:44px;width:154px}
.au-wm i{display:block;position:relative;height:19px;font-size:12px;line-height:19px;color:#A9C0D4}
.au-wm i::before{content:attr(data-n);position:absolute;left:2px}
.au-wm i::after{content:attr(data-n);position:absolute;right:2px}
.au-wm b{position:absolute;left:16px;right:16px;top:7px;height:5px;border-radius:3px;background:var(--c);transform-origin:0 50%;
  animation-name:au-wire;animation-delay:calc(var(--k)*.32s + .25s)}
.au-wm .w{background:repeating-linear-gradient(90deg,var(--c) 0 9px,#F2F2F2 9px 14px)}
@keyframes au-wire{0%{transform:scaleX(0)}5%,100%{transform:scaleX(1)}}
.au-r{position:absolute;left:174px;top:44px;width:146px}
.au-r small{display:block;font-size:12px;color:#A9C0D4}
.au-n{display:block;font-size:30px;font-weight:700;line-height:1.1}
@property --au-n{syntax:"<integer>";inherits:false;initial-value:47}
.au-n::before{counter-reset:au var(--au-n);content:counter(au) " m";animation:au-len var(--T) linear infinite both}
.ca:not(.go) .au-n::before{counter-reset:au 47}
@keyframes au-len{0%,4%{--au-n:0}46%,100%{--au-n:47}}
.au-chips{display:flex;gap:6px;margin:8px 0 10px}
.au-chip{display:block;padding:3px 8px;border-radius:11px;font-size:13px;font-weight:700;line-height:16px}
.au-gb{background:#1C5FA8;animation-name:au-in1}.au-poe{background:#1E7B49;animation-name:au-in2}
@keyframes au-in1{0%,26%{opacity:0}29%,100%{opacity:1}}
@keyframes au-in2{0%,38%{opacity:0}41%,100%{opacity:1}}
.au-bars{display:flex;align-items:flex-end;gap:7px;height:46px;padding-left:2px}
.au-bars i{display:block;width:16px;height:var(--h);background:linear-gradient(#5BE08F,#2BA35D);border-radius:2px 2px 0 0;transform-origin:50% 100%;
  animation-name:au-bar;animation-delay:calc(var(--k)*.4s + 1.6s)}
@keyframes au-bar{0%{transform:scaleY(.05)}8%,100%{transform:scaleY(1)}}
.au-st{position:absolute;left:12px;bottom:28px;font-size:12px;color:#A9C0D4}
.au-prog{position:absolute;left:12px;right:12px;bottom:14px;height:8px;border-radius:4px;background:#1D3348;overflow:hidden}
.au-prog i{position:absolute;inset:0;background:#3B9EFF;transform-origin:0 50%;animation-name:au-prog}
@keyframes au-prog{0%{transform:scaleX(0)}57%,100%{transform:scaleX(1)}}
.au-pass{position:absolute;left:0;top:34px;width:100%;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(90% 80% at 50% 40%,#0F2A1E,#08111b 75%);animation-name:au-pass}
@keyframes au-pass{0%,59%{opacity:0}62%,100%{opacity:1}}
.au-pass svg{width:104px;height:104px;animation-name:au-pop}
@keyframes au-pop{0%,60%{transform:scale(.55)}65%{transform:scale(1.08)}69%,100%{transform:scale(1)}}
.au-pass path{stroke-dasharray:70;animation-name:au-chk}
@keyframes au-chk{0%,61%{stroke-dashoffset:70}68%,100%{stroke-dashoffset:0}}
.au-pass b{font-size:46px;line-height:1;margin-top:6px;color:#45DB7E;letter-spacing:.04em}
.au-pass small{font-size:13px;color:#A9C0D4;margin-top:6px}
.au-l1{--off:#3a3c3d;animation-name:au-blink}                           /* amber LED: flashes while testing */
.au-l2{--off:#3b3d3f;animation-name:au-blink2}                          /* remote unit's green LED */
@keyframes au-blink{0%{opacity:1}4%{opacity:0}8%{opacity:1}12%{opacity:0}16%{opacity:1}20%{opacity:0}24%{opacity:1}28%{opacity:0}32%{opacity:1}36%{opacity:0}40%{opacity:1}44%{opacity:0}48%{opacity:1}52%{opacity:0}56%{opacity:1}59%,100%{opacity:0}}
@keyframes au-blink2{0%{opacity:0}6%{opacity:1}12%{opacity:0}18%{opacity:1}24%{opacity:0}30%{opacity:1}36%{opacity:0}42%{opacity:1}48%{opacity:0}54%{opacity:1}59%,100%{opacity:0}}

/* ==== 7. VoIP: incoming call -> "You have 1 voicemail" (10 s), printed dial keys ==== */
.vo{--T:10s}
.vo-scr{background:radial-gradient(120% 110% at 20% 10%,#16222e,#0A1016 70%);font-size:14px}
.vo-bar{position:absolute;left:0;top:0;width:100%;height:28px;display:flex;align-items:center;padding:0 12px;font-size:13px;color:#AFC0CF;background:rgba(255,255,255,.05)}
.vo-bar em{margin-left:auto}
.vo-call,.vo-vm{position:absolute;left:0;top:28px;width:100%;bottom:0}
.vo-call{opacity:0;animation-name:vo-call}
@keyframes vo-call{0%,51%{opacity:1}54%,100%{opacity:0}}
.vo-vm{animation-name:vo-vm}
@keyframes vo-vm{0%,52%{opacity:0}56%,100%{opacity:1}}
.vo-ic{position:absolute;left:20px;top:26px;width:74px;height:74px;border-radius:50%;background:#1F8A4C;display:grid;place-items:center}
.vo-ic svg{width:40px;height:40px;animation-name:vo-ring}
.vo-ic::before,.vo-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #39C774;animation:vo-wave 1.25s linear infinite}
.vo-ic::after{animation-delay:.62s}
@keyframes vo-wave{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes vo-ring{0%,2%,6%,10%,14%,18%,22%,26%,30%,34%,38%,42%,46%,50%{transform:rotate(0)}1%,5%,9%,13%,17%,21%,25%,29%,33%,37%,41%,45%,49%{transform:rotate(-14deg)}3%,7%,11%,15%,19%,23%,27%,31%,35%,39%,43%,47%{transform:rotate(14deg)}}
.vo-tx{position:absolute;left:112px;top:22px;right:8px}
.vo-tx small{display:block;font-size:14px;color:#AFC0CF}
.vo-tx b{display:block;font-size:30px;font-weight:700;line-height:1.15;margin:2px 0}
.vo-tx em{display:block;font-size:16px;color:#D5DEE6}
.vo-sk{position:absolute;left:10px;right:10px;bottom:10px;height:34px;display:flex;gap:10px}
.vo-sk i{flex:1;display:grid;place-items:center;border-radius:6px;font-size:14px;font-weight:700}
.vo-sk .ok{background:#1F8A4C}.vo-sk .no{background:#B3261E}.vo-sk .ls{background:#1F5FA8;flex:0 0 46%}
.vo-vm .vo-ic{background:#253545}
.vo-vm .vo-ic::before,.vo-vm .vo-ic::after{display:none}
.vo-vm .vo-ic svg{animation:none}
.vo-badge{position:absolute;right:-4px;top:-4px;width:26px;height:26px;border-radius:50%;background:#E5484D;font:700 15px/26px "Noto Sans",sans-serif;text-align:center}
.vo-vm .vo-tx b{font-size:24px}
.vo-k{position:absolute;width:50px;height:36px;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#D4D8DC;opacity:.9}
.vo-k b{font-size:17px;font-weight:700;line-height:1}
.vo-k small{font-size:7.5px;letter-spacing:.06em;line-height:1;margin-top:2px;min-height:7px}
.vo-lk{position:absolute;width:46px;height:30px;translate:-50% -50%;border-radius:6px;opacity:0;
  background:radial-gradient(closest-side,rgba(120,255,160,.85),rgba(60,220,120,.45) 60%,rgba(60,220,120,0));mix-blend-mode:screen;animation-name:vo-lk}
@keyframes vo-lk{0%{opacity:1}3%{opacity:.1}6%{opacity:1}9%{opacity:.1}12%{opacity:1}15%{opacity:.1}18%{opacity:1}21%{opacity:.1}24%{opacity:1}27%{opacity:.1}30%{opacity:1}33%{opacity:.1}36%{opacity:1}39%{opacity:.1}42%{opacity:1}45%{opacity:.1}48%{opacity:1}51%,100%{opacity:0}}
.vo-msg{--off:#121314;--s:30px;animation-name:vo-msg}                   /* message LED (red, in the picture): off during the call */
@keyframes vo-msg{0%,55%{opacity:1}57%,100%{opacity:0}}

/* ==== 9. Fibre splicer: fibres approach, lid closes, zoom, align, arc, OK + loss, lid opens (9 s) ==== */
.fo{--T:9s}
.fo-lid{background-size:100% 100%;opacity:0}  /* full-frame opaque states (no soft edge); static = lid open (the picture) */
.fo-lid.h{animation-name:fo-lh}.fo-lid.c{animation-name:fo-lc}
@keyframes fo-lh{0%,16%{opacity:0}17.5%,20%{opacity:1}20.5%,74%{opacity:0}74.5%,76.5%{opacity:1}78%,100%{opacity:0}}
@keyframes fo-lc{0%,18%{opacity:0}19.5%,74.5%{opacity:1}76%,100%{opacity:0}}
.fo-scr{background:#11161B;font-size:13px}
.fo-v{position:absolute;left:0;width:100%;height:68px;overflow:hidden;background:linear-gradient(#C9D3DB,#AEBBC6)}
.fo-v.y{top:70px}
.fo-v>em{position:absolute;left:6px;top:3px;font-size:11px;font-weight:700;color:#3B4A57;z-index:2}
.fo-z{position:absolute;inset:0;transform-origin:50% 50%;transform:scale(1.8);animation-name:fo-zoom}
@keyframes fo-zoom{0%,21%{transform:scale(1)}32%,100%{transform:scale(1.8)}}
.fo-f{position:absolute;top:26px;height:16px;width:200px;border-radius:3px;
  background:linear-gradient(#4E5A65,#AEB9C2 22%,#F4F7F9 42%,#C9D2D9 50%,#F4F7F9 58%,#AEB9C2 78%,#4E5A65)}
.fo-f.l{left:-50px}.fo-f.r{left:150px}
.fo-v .l{animation-name:fo-l}.fo-v .r{animation-name:fo-r}
.fo-v.y .r{animation-name:fo-ry}
@keyframes fo-l{0%{translate:-120px 0}18%,43%{translate:-6px 0}47%{translate:-2px 0}53%,100%{translate:0 0}}
@keyframes fo-r{0%{translate:120px 6px}18%,33%{translate:6px 6px}42%,43%{translate:6px 0}47%{translate:2px 0}53%,100%{translate:0 0}}
@keyframes fo-ry{0%{translate:120px -4px}18%,35%{translate:6px -4px}43%{translate:6px 0}47%{translate:2px 0}53%,100%{translate:0 0}}
.fo-j{position:absolute;left:138px;top:24px;width:24px;height:20px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));animation-name:fo-j}
@keyframes fo-j{0%,52%{opacity:0}56%,100%{opacity:1}}
.fo-arc{position:absolute;left:100px;top:-6px;width:100px;height:80px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,#fff 0 18%,rgba(190,170,255,.85) 40%,rgba(150,120,255,0));animation-name:fo-arc}
@keyframes fo-arc{0%,46%{opacity:0}47%{opacity:1}48%{opacity:.55}49%{opacity:1}50%{opacity:.7}51%{opacity:1}52.5%{opacity:.4}54%,100%{opacity:0}}
.fo-st{position:absolute;left:0;top:140px;width:100%;bottom:0;display:flex;align-items:center;gap:8px;padding:0 10px;background:#141B22}
.fo-st>span{display:flex;align-items:center;gap:8px;position:absolute;left:10px;right:10px;top:0;bottom:0}
.fo-run{color:#AFC0CF;opacity:0;animation-name:fo-run}
@keyframes fo-run{0%,55%{opacity:1}57%,100%{opacity:0}}
.fo-ok{animation-name:fo-ok}
@keyframes fo-ok{0%,56%{opacity:0}59%,100%{opacity:1}}
.fo-ok b{font-size:20px;color:#45DB7E}
.fo-ok em{margin-left:auto;font-size:13px;color:#E8EEF4}
.fo-ok svg,.fo-ok i svg{width:20px;height:20px;flex:none}
.fo-ok i{display:flex;align-items:center;gap:4px;font-size:12px;color:#AFC0CF}
.fo-dots::after{content:"";animation:fo-dots 1.2s steps(4) infinite}
@keyframes fo-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.fo-pw{--s:7px;--off:#2a2e31}                                           /* power: lit */
.fo-ht{--s:7px;--off:#2a2e31}
.fo-ht::after{opacity:0;animation:fo-ht var(--T) linear infinite both}  /* amber: flashes from approach to arc */
@keyframes fo-ht{0%,18%{opacity:0}19%{opacity:1}23%{opacity:0}27%{opacity:1}31%{opacity:0}35%{opacity:1}39%{opacity:0}43%{opacity:1}47%,53%{opacity:1}54%,100%{opacity:0}}

/* ==== 10. Project management: tasks ticking -> Gantt progressing, milestone (10 s) ==== */
.pm{--T:10s}
.pm-scr{background:#F3F5F8;color:#1B2530;font-size:16px}
.pm-scr.scr::after{background:linear-gradient(118deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%),linear-gradient(0deg,rgba(0,0,0,.06),rgba(0,0,0,0))}
.pm-hd{position:absolute;left:0;top:0;width:100%;height:46px;display:flex;align-items:center;gap:10px;padding:0 18px;background:#fff;border-bottom:1px solid #DDE3EA;font-weight:700;font-size:19px}
.pm-hd::before{content:"";width:10px;height:22px;border-radius:2px;background:#A7181A}
.pm-hd em{margin-left:auto;font-weight:400;font-size:15px;color:#5B6570}
.pm-t,.pm-g{position:absolute;left:0;top:46px;width:100%;bottom:0;padding:6px 18px}
.pm-t{opacity:0;animation-name:pm-t}
@keyframes pm-t{0%,44%{opacity:1}47%,100%{opacity:0}}
.pm-g{animation-name:pm-g}
@keyframes pm-g{0%,45%{opacity:0}48%,100%{opacity:1}}
.pm-t>i{display:flex;align-items:center;height:60px;border-bottom:1px solid #E3E8EE;font-size:19px}
.pm-c{margin-left:auto;position:relative;width:136px;height:30px}
.pm-c u{position:absolute;inset:0;display:grid;place-items:center;border-radius:15px;font-size:14px;font-weight:700;text-decoration:none}
.pm-c .cd{background:#D9F3E3;color:#11703A}.pm-c .cp{background:#FFEFD1;color:#8F5400}.pm-c .cl{background:#E8EBEF;color:#55606B}
.pm-c u+u{animation-name:var(--n)}
@keyframes pm-c1{0%,13%{opacity:0}15%,100%{opacity:1}}
@keyframes pm-c2{0%,23%{opacity:0}25%,100%{opacity:1}}
@keyframes pm-c3{0%,33%{opacity:0}35%,100%{opacity:1}}
.pm-wk{display:flex;margin-left:150px;height:22px;font-size:12px;color:#7A8591}
.pm-wk i{flex:1;text-align:center}
.pm-g>b{display:flex;align-items:center;height:52px;font-weight:400;font-size:16px;border-bottom:1px solid #E6EAEF;position:relative}
.pm-g>b>span{width:150px;flex:none}
.pm-bar{position:absolute;left:calc(150px + var(--s)*36.75px);width:calc(var(--l)*36.75px);top:15px;height:22px;border-radius:5px;background:#D5DEE8;overflow:hidden;
  transform-origin:0 50%;animation-name:pm-bar;animation-delay:calc(var(--k)*.15s)}
@keyframes pm-bar{0%,47%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.pm-bar i{position:absolute;inset:0;background:var(--c,#2F80ED);transform-origin:0 50%;transform:scaleX(var(--p));animation-name:pm-fill}
@keyframes pm-fill{0%,55%{transform:scaleX(0)}78%,100%{transform:scaleX(var(--p))}}
.pm-now{position:absolute;left:calc(150px + 5.4*36.75px);top:0;bottom:6px;width:2px;background:#A7181A;animation-name:pm-now}
@keyframes pm-now{0%,50%{translate:-110px 0;opacity:0}53%{opacity:1}78%,100%{translate:0 0;opacity:1}}
.pm-ms{position:absolute;left:calc(150px + 7.55*36.75px);top:12px;width:28px;height:28px}
.pm-ms svg{width:100%;height:100%}
.pm-ms .d{animation-name:pm-d}.pm-ms .c{animation-name:pm-ok}
@keyframes pm-d{0%,82%{opacity:1}84%,100%{opacity:0}}
@keyframes pm-ok{0%,82%{opacity:0;transform:scale(.4)}86%{opacity:1;transform:scale(1.15)}89%,100%{opacity:1;transform:scale(1)}}

/* ==== 11. Access control: place finger -> scan -> access granted, LED red -> green (7 s); printed digits ==== */
.ac{--T:7s}
.ac-w{position:absolute;left:52px;top:150px;width:216px;height:222px;border-radius:16px;background:radial-gradient(110% 90% at 50% 30%,#0E1F2C,#060D14 75%);
  box-shadow:0 0 0 1px rgba(140,180,210,.18) inset;overflow:hidden;font-size:15px;text-align:center}
.ac-tx{position:absolute;left:0;width:100%;top:12px;height:22px}
.ac-tx b{position:absolute;inset:0;font-weight:700;font-size:16px}
.ac-tx .p{color:#BFD3E3;opacity:0;animation-name:ac-p}
@keyframes ac-p{0%,46%{opacity:1}48%,100%{opacity:0}}
.ac-tx .y{color:#4BE08A;animation-name:ac-y}
@keyframes ac-y{0%,47%{opacity:0}50%,100%{opacity:1}}
.ac-fp{position:absolute;left:53px;top:44px;width:110px;height:136px}
.ac-fp svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:3.2;stroke-linecap:round}
.ac-fp .dim{stroke:#2B4559;animation:ac-br 1.4s ease-in-out infinite alternate}
@keyframes ac-br{to{stroke:#3A5C75}}
.ac-fp .lit{stroke:#3CCBF5;clip-path:inset(0 0 0 0);opacity:0;animation-name:ac-lit}
@keyframes ac-lit{0%,10%{clip-path:inset(0 0 100% 0);opacity:1}42%{clip-path:inset(0 0 0 0);opacity:1}47%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.ac-fp .ok{stroke:#3FD883;opacity:.28;animation-name:ac-gr}
@keyframes ac-gr{0%,43%{opacity:0}47%{opacity:1}55%,100%{opacity:.28}}
.ac-scan{position:absolute;left:36px;width:144px;top:44px;height:3px;border-radius:2px;background:#9BEBFF;box-shadow:0 0 10px 3px rgba(60,200,245,.7);opacity:0;animation-name:ac-scan}
@keyframes ac-scan{0%,10%{translate:0 0;opacity:0}11%{opacity:1}41%{translate:0 134px;opacity:1}43%,100%{translate:0 134px;opacity:0}}
.ac-ck{position:absolute;left:68px;top:72px;width:80px;height:80px;animation-name:ac-ck}
@keyframes ac-ck{0%,48%{opacity:0;transform:scale(.5)}53%{opacity:1;transform:scale(1.1)}57%,100%{opacity:1;transform:scale(1)}}
.ac-bt{position:absolute;left:0;width:100%;bottom:12px;font-size:12px;color:#7F98AC}
.ac-led{--s:16px;--off:#141516;animation-name:ac-led}                      /* green over the picture's red LED */
@keyframes ac-led{0%,48%{opacity:0}50%,100%{opacity:1}}
.ac-k{position:absolute;width:34px;height:34px;translate:-50% -50%;display:grid;place-items:center;font-size:27px;font-weight:400;color:#EDEFF1;line-height:1}
.ac-k::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(closest-side,#2E2F2F 64%,rgba(46,47,47,0))}
.ac-k b{position:relative;font-weight:400}

/* ==== 12. Video surveillance: the lens follows the pointer on both axes (desktop) / slow Lissajous scan; REC LED; static when reduced ==== */
@property --ex{syntax:"<number>";inherits:true;initial-value:0}
@property --ey{syntax:"<number>";inherits:true;initial-value:0}
.cc-sock{background-size:100% 100%}
.ca-eye{position:absolute;perspective:520px}
.ca-eye i{position:absolute;inset:0;background-size:100% 100%;
  transform:translate(calc(var(--ex)*22px),calc(var(--ey)*15px)) rotateY(calc(var(--ex)*30deg)) rotateX(calc(var(--ey)*-22deg))}
.ca-eye.idle{animation:cc-sx 6.7s ease-in-out infinite alternate,cc-sy 4.9s ease-in-out -1.6s infinite alternate}   /* touch: Lissajous scan */
@keyframes cc-sx{0%{--ex:-.62}100%{--ex:.62}}
@keyframes cc-sy{0%{--ey:-.48}100%{--ey:.48}}
.cc-rec{--s:46px;background:radial-gradient(circle at 44% 42%,#c98a86 0 3%,rgba(201,138,134,0) 9%),radial-gradient(circle,#6e2320 0 18%,#4a1715 32%,#3a2523 37%,#cfc6c6 43%,#E1DDDD 49%,rgba(226,222,222,0) 60%);animation:cc-rec 1.1s steps(1) infinite}
@keyframes cc-rec{0%{opacity:0}55%{opacity:1}}                              /* REC: the picture's red LED blinks; static = lit */
.cx:not(.go) .ca-eye{--ex:0!important;--ey:0!important}
.cx:not(.go) .ca-eye i{transform:none}                                   /* static: no 3-D layer at all (= the picture) */

/* ==== Network security: blinking LEDs of picture C (mockups/netsec-v2; behaviours led-act / lnk / hb / al above) ==== */
.ns .ca-led{--off:#262B27;border-radius:35%}                           /* unlit dot on the device (both themes: it sits on the product) */
.ns .ca-led::after{inset:-110%;background:radial-gradient(circle,var(--c) 0 20%,color-mix(in srgb,var(--c) 50%,transparent) 30%,transparent 68%)}
.ns .g{--c:#7CFF6B}.ns .a{--c:#FFB534}