/* ──────────────────────────────────────────────────────────────────────────
   EcoCloud interactive schemes — premium, animated, signed.
   Auto-applied by /assets/scheme.js to every inline diagram that uses the
   .an-* smart-art classes. Not a copy of anyone's deck: the motif is EcoCloud's
   own — a governed SIGNAL that flows through the system and gets SEALED at the end.
   Pure CSS + SMIL; reduced-motion honored; theme-aware.
   Link this AFTER the page's own inline styles so the enhancements win.
   ────────────────────────────────────────────────────────────────────────── */

.scheme{ position:relative; }
.scheme svg{ overflow:visible; }

/* ── nodes: depth + a travelling "signal is here" glow ── */
.an-box{
  fill:rgba(255,255,255,.72);
  stroke:var(--gold,#E9553C); stroke-width:1.25;
  filter:drop-shadow(0 5px 13px rgba(198,60,38,.10));
  transition:stroke-width .25s ease, filter .25s ease;
}
@media (prefers-color-scheme:dark){ .an-box{ fill:rgba(30,27,24,.72); } }
.an-box.bad{ stroke:#C4483C; }
.an-box.mut{ stroke:var(--line,#d9d3c6); }
.scheme.play .an-box{ animation:schNode 6s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--i,0) * .9s); }
@keyframes schNode{
  0%,3%   { filter:drop-shadow(0 5px 13px rgba(198,60,38,.10)); stroke-width:1.25; }
  7%      { filter:drop-shadow(0 3px 22px rgba(233,85,60,.55)); stroke-width:2.1; }
  16%,100%{ filter:drop-shadow(0 5px 13px rgba(198,60,38,.10)); stroke-width:1.25; }
}
/* hover: lift the node the pointer is on, independent of the loop */
.an-box:hover{ stroke-width:2.3; filter:drop-shadow(0 8px 24px rgba(233,85,60,.42)); }

/* ── connectors: an energized, flowing wire ── */
.an-flow{
  stroke:var(--gold,#E9553C); stroke-width:1.4; fill:none; opacity:.5;
  stroke-dasharray:5 6; animation:schDash 1.05s linear infinite;
}
@keyframes schDash{ to{ stroke-dashoffset:-22; } }
.an-flow.dash{ opacity:.4; }

/* ── travelling signal particle (injected by scheme.js) ── */
.an-particle{ fill:var(--gold,#E9553C); filter:drop-shadow(0 0 5px rgba(233,85,60,.9)); }

/* ── LIVE badge (injected) ── */
.scheme-badge{
  position:absolute; top:9px; right:12px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; color:var(--gold,#E9553C); pointer-events:none; z-index:2;
}
.scheme-badge i{
  width:6px; height:6px; border-radius:50%; background:var(--gold,#E9553C);
  box-shadow:0 0 0 0 rgba(233,85,60,.5); animation:schPulse 1.8s ease-out infinite;
}
@keyframes schPulse{
  0%  { box-shadow:0 0 0 0 rgba(233,85,60,.5); }
  70% { box-shadow:0 0 0 7px rgba(233,85,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(233,85,60,0); }
}

/* ── signed seal (injected at the terminal .an-box.ok) — the EcoCloud moment ── */
.an-seal{ transform-box:fill-box; transform-origin:center; opacity:0; }
.an-seal-ring{ transform-box:fill-box; transform-origin:center; opacity:0; }
.scheme.play .an-seal{ animation:schSeal 6s cubic-bezier(.4,0,.2,1) infinite; }
.scheme.play .an-seal-ring{ animation:schRing 6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes schSeal{
  0%,3%  { opacity:0; transform:scale(.4) rotate(-16deg); }
  9%     { opacity:1; transform:scale(1.16) rotate(0); }
  15%,100%{ opacity:1; transform:scale(1) rotate(0); }
}
@keyframes schRing{
  0%,3% { opacity:0; transform:scale(.4); }
  10%   { opacity:.7; transform:scale(1); }
  20%   { opacity:0; transform:scale(2.1); }
  100%  { opacity:0; }
}

/* ── replay affordance (injected) ── */
.scheme-replay{
  position:absolute; bottom:8px; right:10px; z-index:2;
  font-family:var(--mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:.04em;
  color:var(--ink2,#8C8676); background:transparent; border:1px solid var(--line,rgba(23,24,28,.14));
  border-radius:7px; padding:3px 9px; cursor:pointer; opacity:.55;
  transition:opacity .2s, border-color .2s, color .2s;
}
.scheme-replay:hover{ opacity:1; color:var(--gold,#E9553C); border-color:var(--gold,#E9553C); }
.scheme-replay:focus-visible{ outline:2px solid var(--gold,#E9553C); outline-offset:2px; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .an-flow{ animation:none; }
  .scheme.play .an-box, .scheme.play .an-seal, .scheme.play .an-seal-ring{ animation:none; }
  .an-particle{ display:none; }
  .scheme-badge i{ animation:none; }
  .an-seal{ opacity:1; transform:none; }
}