/* Clayton Cybernetics: animated application diagrams (src/diagrams-apps.mjs). Every class starts with da-.
   CSP-safe: all motion lives here, so prefers-reduced-motion can freeze it to a meaningful static state. */
.diagram.da { margin: 0 0 2rem; }
.da-svg { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 2px rgba(19,41,75,.08), 0 10px 30px rgba(19,41,75,.14); }
.diagram.da figcaption { margin-top: .8rem; color: #586174; font-size: .95rem; line-height: 1.5; max-width: 46em; }

/* ---- canvas ---- */
.da-bg { fill: #13294B; }
.da-gridl { fill: none; stroke: rgba(245,239,225,.045); stroke-width: 1; }
.da-gridl2 { fill: none; stroke: rgba(245,239,225,.075); stroke-width: 1; }
.da-rule { fill: none; stroke: rgba(176,141,87,.6); stroke-width: 1; }
.da-rule2 { fill: none; stroke: rgba(176,141,87,.28); stroke-width: .75; }

/* ---- type ---- */
.da-tx { font-family: "Libre Franklin", "Franklin Gothic Medium", system-ui, -apple-system, "Segoe UI", sans-serif; }
.da-lbl { font-size: 16px; font-weight: 600; fill: #F5EFE1; }
.da-sub { font-size: 14px; font-weight: 400; fill: rgba(245,239,225,.72); }
.da-sm { font-size: 14px; }
.da-it { font-style: italic; }
.da-legend { fill: rgba(245,239,225,.86); }
.da-cap { font-size: 14px; font-weight: 600; letter-spacing: .16em; fill: #B08D57; }
.da-num { font-size: 26px; font-weight: 600; fill: #F5EFE1; font-variant-numeric: tabular-nums; }
.da-pilltx { fill: rgba(245,239,225,.92); font-weight: 500; }

/* ---- nodes ---- */
.da-box { fill: #0E1F3A; stroke: rgba(245,239,225,.34); stroke-width: 1.2; }
.da-panel { fill: rgba(14,31,58,.72); }
.da-ic { fill: none; stroke: #B08D57; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.da-ic-g { stroke: #B08D57; }
.da-node-r .da-box, .da-tier-r .da-box { stroke: #B22234; stroke-width: 1.7; fill: #1a1f3d; }
.da-node-r .da-ic, .da-tier-r .da-ic { stroke: #E7C9CD; }
.da-node-g .da-box, .da-tier-g .da-box { stroke: rgba(176,141,87,.9); stroke-width: 1.5; }
.da-tier-p .da-box { stroke: rgba(245,239,225,.6); }
.da-standby .da-box { stroke-dasharray: 5 4; }
.da-db .da-box { fill: #1D3A66; }
.da-db-top { fill: #24467A !important; }
.da-dbline { fill: none; stroke: rgba(245,239,225,.3); stroke-width: 1; }
.da-ring { fill: none; stroke: rgba(176,141,87,.4); stroke-width: 1; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: da-spin 40s linear infinite; }
.da-hub { fill: #B08D57; stroke: #13294B; stroke-width: 2; }
.da-pill { fill: rgba(29,58,102,.85); stroke: rgba(245,239,225,.3); stroke-width: 1; }
.da-pill-on { fill: rgba(176,141,87,.28); stroke: #B08D57; stroke-width: 1.4; opacity: 0; animation: da-pillon 6s linear infinite; }
.da-mask { fill: #13294B; }

/* ---- wires ---- */
.da-wire { fill: none; stroke: rgba(245,239,225,.3); stroke-width: 1.3; }
.da-w-r { stroke: rgba(178,34,52,.85); }
.da-w-g { stroke: rgba(176,141,87,.75); }
.da-w-p { stroke: rgba(245,239,225,.45); }
.da-dashed { stroke-dasharray: 4 5; }
.da-arw { fill: none; stroke: rgba(245,239,225,.6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- moving tokens: a zero-length dash on a pathLength=100 path ---- */
.da-tok { fill: none; stroke-linecap: round; stroke-width: 7; stroke-dasharray: .1 300; stroke-dashoffset: 4; animation: da-s1 8s linear infinite; }
.da-halo { stroke-width: 15; opacity: .22; }
.da-c-p { stroke: #FBF8F1; } .da-h-p { stroke: #F5EFE1; }
.da-c-g { stroke: #C9A66B; } .da-h-g { stroke: #B08D57; opacity: .32; }
.da-c-r { stroke: #B22234; } .da-h-r { stroke: #F5EFE1; opacity: .55; stroke-width: 11; }
.da-dot { stroke: #13294B; stroke-width: 1; }
.da-c-pf { fill: #FBF8F1; } .da-c-gf { fill: #C9A66B; } .da-c-rf { fill: #B22234; stroke: #F5EFE1; stroke-width: 1.5; }
.da-s1 { animation-name: da-s1; } .da-s2 { animation-name: da-s2; } .da-s3 { animation-name: da-s3; }
.da-s4 { animation-name: da-s4; } .da-s5 { animation-name: da-s5; }
@keyframes da-s1 { 0% { stroke-dashoffset: 4; } 30%, 100% { stroke-dashoffset: -104; } }
@keyframes da-s2 { 0%, 30% { stroke-dashoffset: 4; } 60%, 100% { stroke-dashoffset: -104; } }
@keyframes da-s3 { 0%, 60% { stroke-dashoffset: 4; } 90%, 100% { stroke-dashoffset: -104; } }
@keyframes da-s4 { 0%, 70% { stroke-dashoffset: 4; } 95%, 100% { stroke-dashoffset: -104; } }
@keyframes da-s5 { 0% { stroke-dashoffset: 4; } 50%, 100% { stroke-dashoffset: -104; } }

/* ---- status lights ---- */
.da-led { stroke: #0E1F3A; stroke-width: 1.5; animation: da-led 3s ease-in-out infinite; }
.da-led-r { fill: #B22234; } .da-led-g { fill: #B08D57; animation-delay: -2s; } .da-led-p { fill: #F5EFE1; animation-delay: -1s; }
.da-beat { animation: da-led 2s ease-in-out infinite; }
.da-beat2 { animation: da-led 4s ease-in-out infinite; opacity: .5; }
@keyframes da-led { 0%, 100% { opacity: .3; } 15%, 35% { opacity: 1; } 60% { opacity: .3; } }
.da-ai .da-box, .da-gw .da-box { animation: da-glow 4s ease-in-out infinite; }
@keyframes da-glow { 0%, 100% { stroke: rgba(245,239,225,.34); } 50% { stroke: rgba(176,141,87,.95); } }
@keyframes da-spin { to { transform: rotate(360deg); } }

/* ---- ERP: custom module plugs in ---- */
.da-erp-new { animation: da-newmod 10s ease-in-out infinite; }
.da-new-dash { stroke: #B08D57; stroke-dasharray: 6 5; fill: rgba(14,31,58,.9); }
.da-new-solid { fill: none; stroke: #B08D57; stroke-width: 1.8; opacity: 0; animation: da-newsolid 10s ease-in-out infinite; }
.da-erp-nw { stroke: rgba(176,141,87,.8); stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: da-newwire 10s ease-in-out infinite; }
.da-erp-ntok { opacity: 0; animation: da-newtok 10s linear infinite; }
@keyframes da-newmod { 0%, 8% { opacity: 0; transform: translate(26px, 0); } 22%, 92% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, 0); } }
@keyframes da-newsolid { 0%, 36% { opacity: 0; } 44%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes da-newwire { 0%, 24% { stroke-dashoffset: 100; opacity: 1; } 40%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes da-newtok { 0%, 40% { opacity: 0; } 44%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---- data entry: papers, field highlights, scan line, counter, bars ---- */
.da-paper { fill: #FBF8F1; stroke: rgba(176,141,87,.6); stroke-width: .8; }
.da-paper-b { fill: #E7DFCC; }
.da-ink { fill: rgba(88,97,116,.55); }
.da-ink-n { fill: #1D3A66; }
.da-ink-r { fill: #B22234; }
.da-hl { fill: rgba(176,141,87,.3); stroke: #B08D57; stroke-width: 1.2; opacity: 0; animation: da-hl 10s linear infinite; }
@keyframes da-hl { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
.da-scan { fill: none; stroke: #B22234; stroke-width: 1.6; opacity: 0; animation: da-scan 10s linear infinite; }
@keyframes da-scan { 0% { opacity: 0; transform: translateY(0); } 2% { opacity: .9; } 28% { opacity: .9; transform: translateY(62px); } 30%, 100% { opacity: 0; transform: translateY(62px); } }
.da-botic { animation: da-bot 2.4s ease-in-out infinite; }
@keyframes da-bot { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.da-odo { animation: da-odo 6s steps(10, end) infinite; }
.da-odo-10 { animation-duration: 60s; }
@keyframes da-odo { from { transform: translateY(0); } to { transform: translateY(-300px); } }
.da-track { fill: rgba(245,239,225,.1); }
.da-bar { transform-box: fill-box; transform-origin: 0 50%; }
.da-bar-m { fill: rgba(245,239,225,.55); animation: da-shrink 12s ease-in-out infinite; }
.da-bar-b { fill: #B08D57; animation: da-grow 12s ease-in-out infinite; }
@keyframes da-shrink { 0% { transform: scaleX(1); opacity: 0; } 6% { opacity: 1; } 70%, 92% { transform: scaleX(.12); opacity: 1; } 100% { transform: scaleX(.12); opacity: 0; } }
@keyframes da-grow { 0% { transform: scaleX(.06); opacity: 0; } 6% { opacity: 1; } 70%, 92% { transform: scaleX(.92); opacity: 1; } 100% { transform: scaleX(.92); opacity: 0; } }

/* ---- voice: waveform and pipeline stages ---- */
.da-wv { transform-box: fill-box; transform-origin: 50% 50%; animation: da-wave 1.1s ease-in-out infinite alternate; }
.da-wv-p { fill: rgba(245,239,225,.85); }
.da-wv-g { fill: #B08D57; }
@keyframes da-wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes da-pillon { 0% { opacity: 0; } 4%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }

/* ---- timing helpers (must stay after the rules above) ---- */
.da-T6 { animation-duration: 6s; } .da-T8 { animation-duration: 8s; } .da-T10 { animation-duration: 10s; } .da-T12 { animation-duration: 12s; }
.da-dl0{animation-delay:0s}.da-dl1{animation-delay:-0.5s}.da-dl2{animation-delay:-1s}.da-dl3{animation-delay:-1.5s}
.da-dl4{animation-delay:-2s}.da-dl5{animation-delay:-2.5s}.da-dl6{animation-delay:-3s}.da-dl7{animation-delay:-3.5s}
.da-dl8{animation-delay:-4s}.da-dl9{animation-delay:-4.5s}.da-dl10{animation-delay:-5s}.da-dl11{animation-delay:-5.5s}
.da-dl12{animation-delay:-6s}.da-dl13{animation-delay:-6.5s}.da-dl14{animation-delay:-7s}.da-dl15{animation-delay:-7.5s}
.da-dl16{animation-delay:-8s}.da-dl17{animation-delay:-8.5s}.da-dl18{animation-delay:-9s}.da-dl19{animation-delay:-9.5s}
.da-dl20{animation-delay:-10s}.da-dl21{animation-delay:-10.5s}.da-dl22{animation-delay:-11s}.da-dl23{animation-delay:-11.5s}
.da-dl24{animation-delay:-12s}.da-dl25{animation-delay:-12.5s}.da-dl26{animation-delay:-13s}.da-dl27{animation-delay:-13.5s}
.da-dl28{animation-delay:-14s}.da-dl29{animation-delay:-14.5s}.da-dl30{animation-delay:-15s}.da-dl31{animation-delay:-15.5s}

.da-wd0{animation-delay:0s}.da-wd1{animation-delay:-0.085s}.da-wd2{animation-delay:-0.17s}.da-wd3{animation-delay:-0.255s}.da-wd4{animation-delay:-0.34s}
.da-wd5{animation-delay:-0.425s}.da-wd6{animation-delay:-0.51s}.da-wd7{animation-delay:-0.595s}.da-wd8{animation-delay:-0.68s}.da-wd9{animation-delay:-0.765s}
.da-wd10{animation-delay:-0.85s}.da-wd11{animation-delay:-0.935s}.da-wd12{animation-delay:-1.02s}.da-wd13{animation-delay:-1.105s}

/* ---- reduced motion: freeze to a readable static state ---- */
@media (prefers-reduced-motion: reduce) {
  .da-svg *, .da-svg { animation: none !important; }
  .da-tok { stroke-dashoffset: -50; }
  .da-hl { opacity: 1; }
  .da-pill-on { opacity: 0; }
  .da-erp-new, .da-new-solid, .da-erp-ntok { opacity: 1; }
  .da-erp-nw { stroke-dashoffset: 0; }
  .da-bar-m { transform: scaleX(.12); }
  .da-bar-b { transform: scaleX(.92); }
}