/* ─────────────────────────────────────────────────────────────────────────────
   The mechanism diagrams, on their own.

   Shared by the public Try AI page and by each demo's own page, which load
   different stylesheets otherwise. Kept apart from both so a diagram is defined
   once: the two pages use the same partials, and a copy of these rules would
   drift the moment one page was adjusted.

   Positioned absolutely inside a fixed stage, because an arrow's numbers come
   from the boxes' pixel positions and a flex child has none. The stage scrolls
   sideways rather than shrinking: these stop being readable long before they
   stop fitting.
   ───────────────────────────────────────────────────────────────────────────── */

.wg-stage{margin:24px 32px;border:1px solid var(--line);border-radius:12px;background:#fcfbf8;overflow-x:auto;}
.wg-diagram{position:relative;margin:0 auto;}
/* ── pieces every diagram uses ── */
.wg-diagram .lbl{position:absolute;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.wg-diagram .box{position:absolute;box-sizing:border-box;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:10px;}
.wg-diagram .box b{font-size:15px;font-weight:600;color:var(--ink);}
.wg-diagram .box span{font-size:12.5px;line-height:1.35;color:var(--muted);}
.wg-diagram .cap{position:absolute;font-size:12.5px;line-height:17px;color:var(--muted);}
.wg-diagram .claim{position:absolute;box-sizing:border-box;padding:0 18px;display:flex;align-items:center;font-size:14px;color:var(--body);border-radius:0 10px 10px 0;}

/* the travelling dash: one rule, every arrow, nothing in the markup */
.wg-diagram svg path[marker-end]{stroke-dasharray:9 11;animation:taDash 1.5s linear infinite;}
@keyframes taDash{to{stroke-dashoffset:-20}}
@keyframes taBlip{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes taPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.6);opacity:1}}
@keyframes taScan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(92px);opacity:0}}
@keyframes taCut{0%{width:0;opacity:0}18%{opacity:1}100%{opacity:1}}
@keyframes taGlow{0%,100%{box-shadow:0 0 0 0 rgba(14,116,144,0)}50%{box-shadow:0 0 0 5px rgba(14,116,144,.14)}}
@keyframes taFound{0%,100%{box-shadow:0 0 0 0 rgba(138,28,19,0)}45%{box-shadow:0 0 0 4px rgba(138,28,19,.2)}}
@keyframes taToken{0%,100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}45%{box-shadow:0 0 0 4px rgba(15,118,110,.2)}}
@keyframes taBarrier{to{stroke-dashoffset:-28}}
@keyframes taSettle{0%{opacity:.25;transform:translateY(3px)}22%,100%{opacity:1;transform:translateY(0)}}
@keyframes taFlag{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.35)}50%{box-shadow:0 0 0 6px rgba(180,83,9,0)}}
@keyframes taCaret{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes taRan{0%,68%{opacity:0}80%,100%{opacity:1}}
@keyframes taGrow{0%{transform:scaleY(.08)}55%,100%{transform:scaleY(1)}}
@keyframes taTalk{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes taOut{0%{opacity:.2}35%{opacity:1}70%,100%{opacity:.2}}
@keyframes taIn{0%,45%{opacity:.2}80%{opacity:1}100%{opacity:.2}}
@keyframes taHop{0%,100%{background:#efece4;color:#8b8598}16%{background:#e2dcd0;color:#6b6577}}
@keyframes taDrift{from{transform:translateX(-10px);opacity:.45}to{transform:translateX(0);opacity:1}}
@keyframes taArrive{0%,100%{opacity:.5}20%{opacity:1}}
@keyframes taFill{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
@keyframes taLand{0%,60%{opacity:.3}75%,100%{opacity:1}}
@keyframes taCount{0%{opacity:.35}100%{opacity:1}}

/* The class names come straight from the design canvas, scoped to the stage so that
   generic ones (.bar, .strip, .in, .out, .v) cannot reach anything else on the site. */
.wg-diagram .drift{animation:taDrift 2.4s ease-in-out infinite alternate;}
.wg-diagram .hit{animation:taPulse 1.8s ease-in-out infinite;}
.wg-diagram .hit2{animation-delay:.3s}.wg-diagram .hit3{animation-delay:.6s}
.wg-diagram .scan{animation:taScan 2.8s ease-in-out infinite;}
.wg-diagram .strip{animation:taCut 3.2s ease-out infinite;}
.wg-diagram .strip2{animation-delay:.35s}.wg-diagram .strip3{animation-delay:.7s}
.wg-diagram .cite{animation:taGlow 2.6s ease-in-out infinite;}
.wg-diagram .found{animation:taFound 3.2s ease-in-out infinite;}
.wg-diagram .tok{animation:taToken 3.2s ease-in-out infinite;}
.wg-diagram .f2,.wg-diagram .t2{animation-delay:.45s}
.wg-diagram .f3,.wg-diagram .t3{animation-delay:.9s}
.wg-diagram .barrier{animation:taBarrier 2.4s linear infinite;}
.wg-diagram .travel{animation:taOut 3s ease-in-out infinite;}
.wg-diagram .swap{animation:taBlip 4s ease-in-out infinite;}
.wg-diagram .chip{animation:taSettle 3.6s ease-out infinite;}
.wg-diagram .c2{animation-delay:.3s}.wg-diagram .c3{animation-delay:.6s}
.wg-diagram .needsettle{animation:taSettle 3.6s ease-out infinite,taFlag 2.4s ease-in-out infinite;animation-delay:.9s,.9s;}
.wg-diagram .caret{animation:taCaret 1s step-end infinite;}
.wg-diagram .ran{animation:taRan 3.6s ease-out infinite;}
.wg-diagram .bar{transform-origin:bottom;animation:taGrow 3.6s ease-out infinite;}
.wg-diagram .b2{animation-delay:.18s}.wg-diagram .b3{animation-delay:.36s}.wg-diagram .b4{animation-delay:.54s}
.wg-diagram .v{transform-origin:center;animation:taTalk 1.1s ease-in-out infinite;}
.wg-diagram .v2{animation-delay:.15s}.wg-diagram .v3{animation-delay:.3s}.wg-diagram .v4{animation-delay:.45s}
.wg-diagram .v5{animation-delay:.6s}.wg-diagram .v6{animation-delay:.22s}.wg-diagram .v7{animation-delay:.38s}
.wg-diagram .out{animation:taOut 3s ease-in-out infinite;}
.wg-diagram .in{animation:taIn 3s ease-in-out infinite;}
.wg-diagram .hop{animation:taHop 3.4s ease-in-out infinite;}
.wg-diagram .h2{animation-delay:.34s}.wg-diagram .h3{animation-delay:.68s}
.wg-diagram .h4{animation-delay:1.02s}.wg-diagram .h5{animation-delay:1.36s}
.wg-diagram .src{animation:taArrive 3.6s ease-in-out infinite;}
.wg-diagram .s2{animation-delay:.25s}.wg-diagram .s3{animation-delay:.5s}.wg-diagram .s4{animation-delay:.75s}
.wg-diagram .conf{transform-origin:left;animation:taFill 3.6s ease-out infinite;}
.wg-diagram .k2{animation-delay:.3s}.wg-diagram .k3{animation-delay:.6s}
.wg-diagram .landed{animation:taLand 3.6s ease-out infinite;}
.wg-diagram .tick{animation:taCount 2.2s ease-in-out infinite alternate;}

/* The greyed four-hop pipeline must NOT flow: half the point of drawing it is that the
   live path below is the only one carrying anything. */
.wg-diagram svg.still path[marker-end]{stroke-dasharray:none;animation:none;}

@media (prefers-reduced-motion:reduce){
  .wg-diagram svg path[marker-end]{stroke-dasharray:none;animation:none;}
  .wg-diagram [class]{animation:none;opacity:1;}
}