/* Services page: "instrument plate" figures (inc/service-art.php).
   Colours are tokens so the fixed dark shell (hero) and the fixed light
   canvas (.vx-light-canvas, the detail sections) both work. No OS-driven
   switch — values are picked by which section wraps the figure. */

:root{
  --sa-plate:#151515;
  --sa-line:rgba(255,255,255,.13);
  --sa-quiet:rgba(255,255,255,.34);
  --sa-quiet-fill:rgba(255,255,255,.055);
  --sa-ember-fill:rgba(239,91,12,.16);
  --sa-text:rgba(243,243,243,.66);
  --sa-text-dim:rgba(243,243,243,.42);
  --sa-dot:rgba(255,255,255,.16);
  --sa-white:rgba(243,243,243,.78);
}
.vx-light-canvas{
  --sa-plate:#f7f7f6;
  --sa-line:rgba(17,17,17,.14);
  --sa-quiet:rgba(17,17,17,.36);
  --sa-quiet-fill:rgba(17,17,17,.05);
  --sa-ember-fill:rgba(194,65,12,.13);
  --sa-text:rgba(17,17,17,.66);
  --sa-text-dim:rgba(17,17,17,.44);
  --sa-dot:rgba(17,17,17,.14);
  --sa-white:rgba(17,17,17,.5);
}

/* ---------- Layout: text left, figure right ---------- */
.svc-block{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(32px,5vw,56px);align-items:center}
.svc-block-text{min-width:0}
.svc-art{margin:0;justify-self:end;width:100%;max-width:500px}
.svc-art .sa{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:960px){
  .svc-block{grid-template-columns:1fr;gap:28px}
  .svc-art{order:-1;justify-self:start;max-width:440px}
}

/* ---------- Plate ---------- */
.sa-plate{fill:var(--sa-plate);stroke:var(--sa-line);stroke-width:1}
.sa-dot{fill:var(--sa-dot)}
/* the glow behind each plate strengthens with the phase: planning is quiet, compounding glows */
.sa-glow-a{stop-color:#EF5B0C;stop-opacity:0}
.sa-glow-b{stop-color:#EF5B0C;stop-opacity:0}
.sa-p2 .sa-glow-a{stop-opacity:.07}
.sa-p3 .sa-glow-a{stop-opacity:.14}

/* ---------- Marks ---------- */
.sa-fig line,.sa-fig path,.sa-fig circle,.sa-fig rect,.sa-fig polygon,.sa svg>line{stroke-linecap:round}
.sa-h{fill:none;stroke:var(--sa-line);stroke-width:1}
.sa-n{fill:none;stroke:var(--sa-quiet);stroke-width:1.2}
.sa-a{fill:none;stroke:var(--accent);stroke-width:1.7}
.sa-af{fill:var(--sa-ember-fill);stroke:var(--accent);stroke-width:1.3}
.sa-as{fill:var(--accent);stroke:none}
.sa-nf{fill:var(--sa-quiet-fill);stroke:var(--sa-quiet);stroke-width:1}
.sa-w{fill:var(--sa-white);stroke:none}
.sa-t{fill:var(--sa-text);font:500 10px "Sora",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.sa-tm{fill:var(--sa-text-dim)}
.sa-ta{fill:var(--accent)}
.sa svg>*{vector-effect:none}

/* ---------- Motion (off for prefers-reduced-motion; finished art is what no-JS visitors see) ---------- */
@media (prefers-reduced-motion:no-preference){
  .svc-art.sa-anim .sa-draw{stroke-dasharray:1;stroke-dashoffset:1}
  .svc-art.sa-anim.in-view .sa-draw{animation:sa-draw 1.7s cubic-bezier(.22,1,.36,1) var(--d,.2s) forwards}
  .svc-art.sa-anim .sa-rise{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
  .svc-art.sa-anim.in-view .sa-rise{animation:sa-rise .9s cubic-bezier(.22,1,.36,1) var(--d,.2s) forwards}
  .svc-art.sa-anim .sa-rise-x{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
  .svc-art.sa-anim.in-view .sa-rise-x{animation:sa-rise-x 1s cubic-bezier(.22,1,.36,1) var(--d,.2s) forwards}
  .svc-art.sa-anim .sa-grow{transform:scale(.4);opacity:0}
  .svc-art.sa-anim.in-view .sa-grow{animation:sa-grow 1.1s cubic-bezier(.22,1,.36,1) .3s forwards}
  .svc-art.in-view .sa-pulse{transform-box:fill-box;transform-origin:center;animation:sa-pulse 2.8s ease-out infinite}
  .svc-art.in-view .sa-pulse-r{transform-box:fill-box;transform-origin:center;animation:sa-pulse 2.8s ease-out 1s infinite}
  .svc-art.in-view .sa-w{animation:sa-tw 3.2s ease-in-out var(--d,0s) infinite}
  .svc-art.in-view circle.sa-as[style*="--d"]{animation:sa-tw 2.4s ease-in-out var(--d,0s) infinite}
}
@keyframes sa-draw{to{stroke-dashoffset:0}}
@keyframes sa-rise{to{transform:scaleY(1)}}
@keyframes sa-rise-x{to{transform:scaleX(1)}}
@keyframes sa-grow{to{transform:scale(1);opacity:1}}
@keyframes sa-pulse{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
@keyframes sa-tw{0%,100%{opacity:.35}50%{opacity:1}}