/* OrcasAgent outcome-motion — shared public-site animation primitive.
   Progressive enhancement contract: the CSS DEFAULT is the complete final
   composition (no-JS, CSP-blocked-JS, and reduced-motion users all get a
   finished still). Animation runs only when the controller marks the
   document (html.om-js) and the instance (.om-live), the instance is
   on-screen (:not(.om-off)), the page is visible (html:not(.om-hidden)),
   and the viewer allows motion. Scene geometry + keyframe timing are the
   reviewed staging grammar (OA-ANIM-01..06), colors remapped to site tokens. */

.om{
  --om-line:var(--b3);
  --om-mint:var(--mint);
  --om-soft:var(--highlight);
  --om-muted:var(--muted);
  --om-amber:#d6a93d;
  --om-coral:#ed705c;
  --om-panel:var(--hover);
  --om-loop:10s;
  position:relative;
  aspect-ratio:760/500;
  min-height:200px;
  padding:10px;
  overflow:hidden;
}
.om-scene{display:block;width:100%;height:100%}
.om-scene text{user-select:none}

/* ---- shared strokes ---- */
.om .guide,.om .factory-rail,.om .lineage-rail{fill:none;stroke:var(--om-line);stroke-width:2}
.om .micro-label{fill:var(--om-muted);font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.12em}
.om .label-center{text-anchor:middle}
.om .signal,.om .lineage-marks circle{fill:var(--om-mint)}
.om .evidence-path,.om .handoff-path,.om .selected-link{fill:none;stroke:var(--om-mint);stroke-width:3;stroke-linecap:round}
.om .boundary{fill:none;stroke:var(--om-amber);stroke-width:2}
.om .boundary-line,.om .release-gate{stroke:var(--om-amber);stroke-width:4}
.om .trust-context circle,.om .trust-context path,.om .human-mark,.om .receipt,
.om .release-checks,.om .release-receipt,.om .factory-station,.om .factory-seal,
.om .mesh-node,.om .handoff-docket,.om .recovery-loop,.om .escalation-mark{
  fill:none;stroke:var(--om-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.om .approval-pulse{fill:none;stroke:var(--om-mint);stroke-width:3}
.om .receipt line{stroke:var(--om-mint)}
.om .mesh-links path{fill:none;stroke:var(--om-line);stroke-width:2}
.om .factory-station circle{stroke:var(--om-line)}
.om .factory-packet,.om .release-docket{fill:var(--om-panel);stroke:var(--om-soft);stroke-width:2}
.om .factory-packet line,.om .release-docket line{stroke:var(--om-muted);stroke-width:2}
.om .deviation path{fill:none;stroke:var(--om-amber);stroke-width:3}
.om .deviation circle{fill:var(--canvas);stroke:var(--om-amber);stroke-width:4}
.om .recovery-loop{stroke:var(--om-mint)}
.om .escalation-mark{stroke:var(--om-coral)}

/* guide scene (Guided Workbench): chat resolves into a scaffolded plan */
.om .guide-bubble,.om .guide-scaffold,.om .guide-mark{fill:none;stroke:var(--om-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.om .guide-bubble rect{fill:var(--om-panel)}
.om .guide-bubble line{stroke:var(--om-muted);stroke-width:2}
.om .guide-bubble.guide-plan rect{stroke:var(--om-mint)}
.om .guide-mark circle:first-child{fill:var(--om-mint);stroke:none}
.om .guide-link{fill:none;stroke:var(--om-mint);stroke-width:3;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:0}
.om .guide-station circle{stroke:var(--om-line)}
.om .guide-station{fill:none;stroke:var(--om-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.om .guide-seal{fill:none;stroke:var(--om-mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- COMPLETE FINAL COMPOSITION (the default, per reviewed reduced states) ---- */
.om .trust-signal{transform:translateX(560px)}
.om .trust-pulse{opacity:.45}
.om .trust-context,.om .trust-receipt{opacity:1}
.om .trust-evidence,.om .mesh-evidence,.om .care-evidence{stroke-dasharray:180;stroke-dashoffset:0}
.om .selected-node,.om .handoff-docket{opacity:1}
.om .selected-node{stroke:var(--om-mint)}
.om .handoff-path{stroke-dasharray:280;stroke-dashoffset:0}
.om .mesh-node.muted-node{opacity:.42}
.om .factory-packet{transform:translateX(558px)}
.om .factory-seal{opacity:1}
.om .release-docket{transform:translateX(450px)}
.om .release-checks,.om .release-receipt{opacity:1}
.om .release-pulse{opacity:0}
.om .deviation{opacity:1}
.om .recovery-loop{opacity:1}
.om .escalation-mark{opacity:0}
.om .guide-ask,.om .guide-plan{opacity:1}
.om .guide-mark{opacity:1}
.om .guide-station{opacity:1}
.om .guide-seal{opacity:1}

/* ---- animation (enhancement; gated) ---- */
html.om-js .om.om-live .trust-signal{animation:om-trust-signal var(--om-loop) linear infinite}
html.om-js .om.om-live .trust-pulse{animation:om-approval-pulse var(--om-loop) linear infinite}
html.om-js .om.om-live .trust-context{animation:om-context-resolve var(--om-loop) linear infinite}
html.om-js .om.om-live .trust-evidence{animation:om-draw-evidence var(--om-loop) linear infinite}
html.om-js .om.om-live .trust-receipt{animation:om-receipt-appear var(--om-loop) linear infinite}
html.om-js .om.om-live .mesh-signal{animation:om-mesh-signal var(--om-loop) linear infinite}
html.om-js .om.om-live .selected-link{animation:om-selected-link var(--om-loop) linear infinite}
html.om-js .om.om-live .selected-node{animation:om-selected-node var(--om-loop) linear infinite}
html.om-js .om.om-live .handoff-path{animation:om-handoff-path var(--om-loop) linear infinite}
html.om-js .om.om-live .handoff-docket{animation:om-handoff-docket var(--om-loop) linear infinite}
html.om-js .om.om-live .mesh-evidence{animation:om-draw-evidence var(--om-loop) linear infinite}
html.om-js .om.om-live .factory-packet{animation:om-factory-packet var(--om-loop) linear infinite}
html.om-js .om.om-live .factory-station:nth-of-type(1){animation:om-station-1 var(--om-loop) linear infinite}
html.om-js .om.om-live .factory-station:nth-of-type(2){animation:om-station-2 var(--om-loop) linear infinite}
html.om-js .om.om-live .factory-station:nth-of-type(3){animation:om-station-3 var(--om-loop) linear infinite}
html.om-js .om.om-live .factory-seal{animation:om-factory-seal var(--om-loop) linear infinite}
html.om-js .om.om-live .release-docket{animation:om-release-docket var(--om-loop) linear infinite}
html.om-js .om.om-live .release-checks{animation:om-release-checks var(--om-loop) linear infinite}
html.om-js .om.om-live .release-pulse{animation:om-approval-pulse var(--om-loop) linear infinite}
html.om-js .om.om-live .release-receipt{animation:om-release-receipt var(--om-loop) linear infinite}
html.om-js .om.om-live .deviation{animation:om-deviation var(--om-loop) linear infinite}
html.om-js .om.om-live .recovery-loop{animation:om-recovery-loop var(--om-loop) linear infinite}
html.om-js .om.om-live .care-evidence{animation:om-draw-evidence var(--om-loop) linear infinite}
html.om-js .om.om-live .escalation-mark{animation:om-escalation var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-ask{animation:om-guide-ask var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-mark{animation:om-guide-mark var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-plan{animation:om-guide-plan var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-link{animation:om-guide-link var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-station:nth-of-type(1){animation:om-guide-st1 var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-station:nth-of-type(2){animation:om-guide-st2 var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-station:nth-of-type(3){animation:om-guide-st3 var(--om-loop) linear infinite}
html.om-js .om.om-live .guide-seal{animation:om-guide-seal var(--om-loop) linear infinite}

/* pause states: user pause, offscreen, hidden tab */
.om.om-paused *,.om.om-off *,html.om-hidden .om *{animation-play-state:paused !important}

/* Motion preference is respected: the finished still by default, never a
   frozen start, and never auto-play. The compact ▸ control remains visible so
   a reduced-motion viewer can explicitly OPT IN per scene (om-user-motion). */
@media (prefers-reduced-motion:reduce){
  .om:not(.om-user-motion) *{animation:none !important}
  .om:not(.om-user-motion) .om-scene *{transition:none !important}
}

/* ---- keyframes (staging grammar, verbatim timings) ---- */
@keyframes om-trust-signal{0%,8%{transform:translateX(0)}30%,47%{transform:translateX(295px)}64%,90%{transform:translateX(560px)}100%{transform:translateX(0)}}
@keyframes om-context-resolve{0%,20%{opacity:.2}31%,58%{opacity:1}70%,100%{opacity:.25}}
@keyframes om-approval-pulse{0%,43%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.8)}58%,100%{opacity:0;transform:scale(2.4)}}
@keyframes om-draw-evidence{0%,54%{stroke-dashoffset:180}70%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:180}}
@keyframes om-receipt-appear{0%,61%{opacity:.15}75%,92%{opacity:1}100%{opacity:.15}}
@keyframes om-mesh-signal{0%,10%{transform:translateX(0)}38%,58%{transform:translateX(264px)}72%,90%{transform:translate(522px,-80px)}100%{transform:none}}
@keyframes om-selected-link{0%,22%{stroke:var(--om-line)}36%,86%{stroke:var(--om-mint)}100%{stroke:var(--om-line)}}
@keyframes om-selected-node{0%,26%{opacity:.35}42%,86%{opacity:1}100%{opacity:.35}}
@keyframes om-handoff-path{0%,44%{stroke-dashoffset:280}66%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:280}}
@keyframes om-handoff-docket{0%,52%{opacity:.2}68%,92%{opacity:1}100%{opacity:.2}}
@keyframes om-factory-packet{0%,8%{transform:translateX(0)}24%,32%{transform:translateX(98px)}45%,54%{transform:translateX(288px)}68%,78%{transform:translateX(478px)}88%,94%{transform:translateX(558px)}100%{transform:none}}
@keyframes om-station-1{0%,16%,36%,100%{stroke:var(--om-line)}24%,31%{stroke:var(--om-mint)}}
@keyframes om-station-2{0%,38%,58%,100%{stroke:var(--om-line)}46%,54%{stroke:var(--om-mint)}}
@keyframes om-station-3{0%,60%,84%,100%{stroke:var(--om-line)}70%,79%{stroke:var(--om-mint)}}
@keyframes om-factory-seal{0%,72%{opacity:.15;transform:scale(.7)}84%,94%{opacity:1;transform:scale(1)}100%{opacity:.15}}
@keyframes om-release-docket{0%,10%{transform:translateX(0)}32%,55%{transform:translateX(252px)}70%,92%{transform:translateX(450px)}100%{transform:none}}
@keyframes om-release-checks{0%,22%{opacity:.15}36%,62%{opacity:1}78%,100%{opacity:.15}}
@keyframes om-release-receipt{0%,65%{opacity:.12}78%,94%{opacity:1}100%{opacity:.12}}
@keyframes om-deviation{0%,15%{opacity:.15}28%,58%{opacity:1}76%,100%{opacity:.15}}
@keyframes om-recovery-loop{0%,30%{opacity:.12;transform:rotate(0)}48%,70%{opacity:1;transform:rotate(360deg)}86%,100%{opacity:.15;transform:rotate(360deg)}}
@keyframes om-escalation{0%,62%{opacity:0}74%,88%{opacity:1}100%{opacity:0}}
@keyframes om-guide-ask{0%{opacity:.15;transform:translateX(-12px)}8%,90%{opacity:1;transform:none}100%{opacity:.15}}
@keyframes om-guide-mark{0%,12%{opacity:.35}18%,86%{opacity:1}100%{opacity:.35}}
@keyframes om-guide-plan{0%,16%{opacity:.15;transform:translateX(12px)}26%,90%{opacity:1;transform:none}100%{opacity:.15}}
@keyframes om-guide-link{0%,32%{stroke-dashoffset:220}46%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:220}}
@keyframes om-guide-st1{0%,42%{opacity:.3}50%,92%{opacity:1}100%{opacity:.3}}
@keyframes om-guide-st2{0%,52%{opacity:.3}60%,92%{opacity:1}100%{opacity:.3}}
@keyframes om-guide-st3{0%,62%{opacity:.3}70%,92%{opacity:1}100%{opacity:.3}}
@keyframes om-guide-seal{0%,74%{opacity:0;transform:scale(.7)}84%,94%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* transform-origin discipline for rotation/scale keyframes */
.om .recovery-loop,.om .approval-pulse,.om .factory-seal,.om .guide-seal{transform-box:fill-box;transform-origin:center}

/* ---- compact controls (JS-injected only; WCAG 2.2.2 pause affordance) ---- */
.om-ctl{
  position:absolute;right:8px;bottom:8px;display:flex;gap:6px;z-index:2;
}
.om-ctl button{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--mono);color:var(--highlight);
  background:rgba(0,26,20,.78);border:1px solid var(--b2);border-radius:6px;cursor:pointer;
}
.om-ctl button:hover{border-color:var(--mint);color:var(--ink)}

/* ---- responsive label legibility (page-viewport keyed to layout collapse) ---- */
@media(max-width:560px){
  .om .micro-label{font-size:26px}
}