/* products-art.css — animated per-card motifs for the Products section
   (product_art.rs). Decorative, aria-hidden inline SVG that sits behind the
   card content at low opacity and inherits the card's --accent through
   currentColor. Every product area has its own drawing and its own motion, so
   no two cards animate alike. Each rest state is fully static; motion is a
   single orchestrated reveal (keyed off the site's data-motion + .reveal.is-in
   state, like site.css) plus a gentle hover re-trigger on the livelier ones.
   Everything is disabled under prefers-reduced-motion. */

/* The art container inherits the accent so SVG currentColor resolves to it. */
.product-card__art { color: var(--accent); }

.pa {
  position: absolute; top: -16px; right: -14px;
  width: 150px; height: 150px;
  opacity: .14; overflow: visible;
  transition: opacity .4s var(--ease-out);
}

/* =====================================================================
   Static rest states — each motif draws correctly with no motion at all.
   ===================================================================== */

/* scans — dot grid + light bar */
.pa__dots circle { fill: currentColor; opacity: .55; }
.pa__sweep { transform: translateX(-24px); opacity: 0; }
.pa__sweep rect { fill: currentColor; }

/* secrets — redaction bars over a key */
.pa--redact .pa__bar { fill: currentColor; fill-opacity: .5; transform-box: fill-box; transform-origin: left center; }
.pa--redact .pa__key-bow { fill: none; stroke: currentColor; stroke-opacity: .7; stroke-width: 3; }
.pa--redact .pa__key-stem { stroke: currentColor; stroke-opacity: .7; stroke-width: 3; stroke-linecap: round; fill: none; }

/* infrastructure — node graph */
.pa__edges line { stroke: currentColor; stroke-width: 1.4; stroke-opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa__nodes circle { fill: currentColor; fill-opacity: .85; }

/* devices — radio ripple */
.pa__waves circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-opacity: .5; transform-box: view-box; transform-origin: 30px 92px; }
.pa__origin { fill: currentColor; }

/* fixes — merge / pull request */
.pa--merge .pa__trunk, .pa--merge .pa__branch { stroke: currentColor; stroke-width: 2.4; stroke-opacity: .55; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa--merge .pa__mnodes circle { fill: currentColor; fill-opacity: .85; }
.pa--merge .pa__mnode--merge { transform-box: fill-box; transform-origin: center; }

/* pipelines — staged flow */
.pa--flow .pa__stage { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-opacity: .5; stroke-width: 1.6; }
.pa--flow .pa__rails line { stroke: currentColor; stroke-opacity: .4; stroke-width: 1.6; }
.pa--flow .pa__token { fill: currentColor; }

/* templates — stamped grid */
.pa--stamp .pa__cell { fill: currentColor; fill-opacity: .1; stroke: currentColor; stroke-opacity: .45; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }

/* sbom — layered slabs */
.pa--layers .pa__slab { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-opacity: .5; stroke-width: 1.5; stroke-linejoin: round; }

/* compliance — shield + check */
.pa--shield .pa__shield { fill: currentColor; fill-opacity: .07; stroke: currentColor; stroke-opacity: .45; stroke-width: 1.6; }
.pa--shield .pa__check { stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* sla — gauge */
.pa--gauge .pa__gauge-track { stroke: currentColor; stroke-opacity: .25; stroke-width: 3; fill: none; stroke-linecap: round; }
.pa--gauge .pa__gauge-fill { stroke: currentColor; stroke-opacity: .7; stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa--gauge .pa__needle { transform-box: view-box; transform-origin: 60px 86px; }
.pa--gauge .pa__needle line { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pa--gauge .pa__gauge-hub { fill: currentColor; }

/* cra — clock */
.pa--clock .pa__dial { fill: none; stroke: currentColor; stroke-opacity: .5; stroke-width: 2; }
.pa--clock .pa__ticks line { stroke: currentColor; stroke-opacity: .45; stroke-width: 2; stroke-linecap: round; }
.pa--clock .pa__hand { transform-box: view-box; transform-origin: 60px 60px; }
.pa--clock .pa__hand line { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pa--clock .pa__clock-hub { fill: currentColor; }

/* dashboards — bars + sparkline */
.pa--bars .pa__bar-v { fill: currentColor; fill-opacity: .4; transform-box: fill-box; transform-origin: bottom; }
.pa--bars .pa__spark { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-opacity: .8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* notifications — bell + pulse */
.pa--bell .pa__ping { fill: none; stroke: currentColor; stroke-width: 2; stroke-opacity: .5; transform-box: view-box; transform-origin: 60px 54px; }
.pa--bell .pa__bell { transform-box: view-box; transform-origin: 60px 32px; }
.pa--bell .pa__bell-body { fill: currentColor; fill-opacity: .08; stroke: currentColor; stroke-opacity: .55; stroke-width: 2; stroke-linejoin: round; }
.pa--bell .pa__bell-clapper { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-width: 2; }

/* api — braces + tokens */
.pa--braces .pa__brace { fill: none; stroke: currentColor; stroke-opacity: .55; stroke-width: 2.4; stroke-linecap: round; }
.pa--braces .pa__tok { fill: currentColor; fill-opacity: .55; }
.pa--braces .pa__caret { fill: currentColor; fill-opacity: .8; }

/* teams — people + links */
.pa--people .pa__links line { stroke: currentColor; stroke-width: 1.6; stroke-opacity: .45; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa--people .pa__person circle { fill: currentColor; fill-opacity: .8; }
.pa--people .pa__person path { fill: none; stroke: currentColor; stroke-opacity: .6; stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center bottom; }
.pa--people .pa__person { transform-box: view-box; }

/* =====================================================================
   Motion — one reveal moment per motif, varied per area.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .product-card:hover .pa { opacity: .22; }

  /* scans — bar sweeps across the dot field */
  html[data-motion="on"] .reveal.is-in .pa--sweep .pa__sweep { animation: pa-sweep 2s var(--ease-out) .2s both; }

  /* secrets — redaction bars wipe across from the left */
  html[data-motion="on"] .reveal.is-in .pa--redact .pa__bar { animation: pa-wipe .55s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--redact .pa__bar:nth-child(2) { animation-delay: .12s; }
  html[data-motion="on"] .reveal.is-in .pa--redact .pa__bar:nth-child(3) { animation-delay: .24s; }

  /* infrastructure — edges draw in, one after another */
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line { animation: pa-draw .8s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line:nth-child(2) { animation-delay: .1s; }
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line:nth-child(3) { animation-delay: .2s; }
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line:nth-child(4) { animation-delay: .3s; }
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line:nth-child(5) { animation-delay: .4s; }
  html[data-motion="on"] .reveal.is-in .pa--graph .pa__edges line:nth-child(6) { animation-delay: .5s; }

  /* devices — ripples bloom outward */
  html[data-motion="on"] .reveal.is-in .pa--ripple .pa__wave { animation: pa-ripple 2.2s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--ripple .pa__wave:nth-child(2) { animation-delay: .12s; }
  html[data-motion="on"] .reveal.is-in .pa--ripple .pa__wave:nth-child(3) { animation-delay: .24s; }
  html[data-motion="on"] .reveal.is-in .pa--ripple .pa__wave:nth-child(4) { animation-delay: .36s; }

  /* fixes — trunk then branch draw, merge node lands with a pulse */
  html[data-motion="on"] .reveal.is-in .pa--merge .pa__trunk { animation: pa-draw .7s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--merge .pa__branch { animation: pa-draw .7s var(--ease-out) .35s both; }
  html[data-motion="on"] .reveal.is-in .pa--merge .pa__mnode--merge { animation: pa-pop .5s var(--ease-out) 1s both; }

  /* pipelines — stages fade in, then a token flows through them */
  html[data-motion="on"] .reveal.is-in .pa--flow .pa__stage { animation: pa-fade-in .5s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--flow .pa__stage:nth-child(2) { animation-delay: .12s; }
  html[data-motion="on"] .reveal.is-in .pa--flow .pa__stage:nth-child(3) { animation-delay: .24s; }
  html[data-motion="on"] .reveal.is-in .pa--flow .pa__token { animation: pa-flow 2.4s var(--ease-out) .4s both; }

  /* templates — cells stamp into place, row-major */
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell { animation: pa-stamp .5s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(1) { animation-delay: 0s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(2) { animation-delay: .06s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(3) { animation-delay: .12s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(4) { animation-delay: .18s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(5) { animation-delay: .24s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(6) { animation-delay: .3s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(7) { animation-delay: .36s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(8) { animation-delay: .42s; }
  html[data-motion="on"] .reveal.is-in .pa--stamp .pa__cell:nth-child(9) { animation-delay: .48s; }

  /* sbom — slabs settle down into a stack, top-down */
  html[data-motion="on"] .reveal.is-in .pa--layers .pa__slab { animation: pa-settle .6s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--layers .pa__slab:nth-child(2) { animation-delay: .14s; }
  html[data-motion="on"] .reveal.is-in .pa--layers .pa__slab:nth-child(3) { animation-delay: .28s; }

  /* compliance — check draws in across the shield */
  html[data-motion="on"] .reveal.is-in .pa--shield .pa__check { animation: pa-draw .7s var(--ease-out) .25s both; }

  /* sla — gauge arc fills while the needle swings up */
  html[data-motion="on"] .reveal.is-in .pa--gauge .pa__gauge-fill { animation: pa-draw 1.1s var(--ease-out) .2s both; }
  html[data-motion="on"] .reveal.is-in .pa--gauge .pa__needle { animation: pa-swing 1.1s var(--ease-out) .2s both; }

  /* cra — clock hand sweeps round like a countdown */
  html[data-motion="on"] .reveal.is-in .pa--clock .pa__hand { animation: pa-tick 1.4s var(--ease-out) .2s both; }

  /* dashboards — bars grow up, then the sparkline draws across */
  html[data-motion="on"] .reveal.is-in .pa--bars .pa__bar-v { animation: pa-grow .6s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--bars .pa__bar-v:nth-child(2) { animation-delay: .1s; }
  html[data-motion="on"] .reveal.is-in .pa--bars .pa__bar-v:nth-child(3) { animation-delay: .2s; }
  html[data-motion="on"] .reveal.is-in .pa--bars .pa__bar-v:nth-child(4) { animation-delay: .3s; }
  html[data-motion="on"] .reveal.is-in .pa--bars .pa__spark { animation: pa-draw .9s var(--ease-out) .45s both; }

  /* notifications — bell swings while a pulse ring expands out */
  html[data-motion="on"] .reveal.is-in .pa--bell .pa__bell { animation: pa-ring-swing 1.4s var(--ease-out) .3s both; }
  html[data-motion="on"] .reveal.is-in .pa--bell .pa__ping { animation: pa-ping 1.8s var(--ease-out) .3s both; }

  /* api — tokens type in, caret blinks */
  html[data-motion="on"] .reveal.is-in .pa--braces .pa__tok { animation: pa-type .4s steps(1) both; }
  html[data-motion="on"] .reveal.is-in .pa--braces .pa__tok:nth-child(1) { animation-delay: .25s; }
  html[data-motion="on"] .reveal.is-in .pa--braces .pa__tok:nth-child(2) { animation-delay: .55s; }
  html[data-motion="on"] .reveal.is-in .pa--braces .pa__caret { animation: pa-blink 1s steps(1) .85s 3; }

  /* teams — links draw in, then people pop into place */
  html[data-motion="on"] .reveal.is-in .pa--people .pa__links line { animation: pa-draw .7s var(--ease-out) .3s both; }
  html[data-motion="on"] .reveal.is-in .pa--people .pa__person { animation: pa-pop .5s var(--ease-out) both; }
  html[data-motion="on"] .reveal.is-in .pa--people .pa__person:nth-child(2) { animation-delay: 0s; }
  html[data-motion="on"] .reveal.is-in .pa--people .pa__person:nth-child(3) { animation-delay: .12s; }
  html[data-motion="on"] .reveal.is-in .pa--people .pa__person:nth-child(4) { animation-delay: .24s; }

  /* hover re-triggers the continuous motifs so the grid stays alive */
  .product-card:hover .pa--sweep .pa__sweep { animation: pa-sweep 2s var(--ease-out); }
  .product-card:hover .pa--ripple .pa__wave { animation: pa-ripple 2.2s var(--ease-out); }
  .product-card:hover .pa--ripple .pa__wave:nth-child(2) { animation-delay: .12s; }
  .product-card:hover .pa--ripple .pa__wave:nth-child(3) { animation-delay: .24s; }
  .product-card:hover .pa--ripple .pa__wave:nth-child(4) { animation-delay: .36s; }
  .product-card:hover .pa--flow .pa__token { animation: pa-flow 2.4s var(--ease-out); }
  .product-card:hover .pa--clock .pa__hand { animation: pa-tick 1.4s var(--ease-out); }
  .product-card:hover .pa--bell .pa__bell { animation: pa-ring-swing 1.4s var(--ease-out); }
  .product-card:hover .pa--bell .pa__ping { animation: pa-ping 1.8s var(--ease-out); }
}

/* ---- keyframes ---- */
@keyframes pa-sweep {
  0%   { transform: translateX(-24px); opacity: 0; }
  12%  { opacity: .9; }
  88%  { opacity: .9; }
  100% { transform: translateX(132px); opacity: 0; }
}

@keyframes pa-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes pa-ripple {
  0%   { transform: scale(.25); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pa-wipe {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes pa-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pa-flow {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(72px); opacity: 0; }
}

@keyframes pa-stamp {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pa-settle {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes pa-swing {
  from { transform: rotate(-78deg); }
  to   { transform: rotate(0deg); }
}

@keyframes pa-tick {
  from { transform: rotate(-150deg); }
  to   { transform: rotate(60deg); }
}

@keyframes pa-grow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

@keyframes pa-ring-swing {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(11deg); }
  45%      { transform: rotate(-8deg); }
  70%      { transform: rotate(4deg); }
}

@keyframes pa-ping {
  0%   { transform: scale(.3); opacity: 0; }
  30%  { opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes pa-type {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pa-blink {
  0%, 49%  { opacity: .8; }
  50%, 100% { opacity: 0; }
}

/* ---- reduced motion: no animation, hold a clean static rest state ---- */
@media (prefers-reduced-motion: reduce) {
  .pa, .pa * { animation: none !important; }
  .pa__sweep { opacity: 0 !important; }
  .pa__wave { transform: none !important; opacity: 1 !important; }
  .pa__edges line, .pa--shield .pa__check, .pa--merge .pa__trunk, .pa--merge .pa__branch,
  .pa--gauge .pa__gauge-fill, .pa--bars .pa__spark, .pa--people .pa__links line { stroke-dashoffset: 0 !important; }
  .pa--redact .pa__bar, .pa--stamp .pa__cell, .pa--bars .pa__bar-v,
  .pa--merge .pa__mnode--merge, .pa--people .pa__person { transform: none !important; opacity: 1 !important; }
  .pa--redact .pa__bar { transform: scaleX(1) !important; }
  .pa--flow .pa__stage { transform: none !important; opacity: 1 !important; }
  .pa--flow .pa__token { opacity: 1 !important; }
  .pa--layers .pa__slab { transform: none !important; opacity: 1 !important; }
  .pa--gauge .pa__needle, .pa--clock .pa__hand, .pa--bell .pa__bell { transform: none !important; }
  .pa--bell .pa__ping { opacity: .5 !important; transform: none !important; }
  .pa--braces .pa__tok { opacity: 1 !important; transform: none !important; }
  .pa--braces .pa__caret { opacity: 0 !important; }
}