/* ==========================================================================
   Keler — outbound flow diagram, motion layer
   Enhance-in-place. The scene is the page's own markup in #wedge-outbound;
   css/styles.css owns every static style. This file adds only the two things
   that exist for motion. Nothing here dims, hides or moves anything on its
   own — the dormant state is applied by diagram.js as inline style, so a page
   carrying this stylesheet without JavaScript renders exactly as it does now.
   No @import, no external references.
   ========================================================================== */

/* The travelling packet: a short dash injected into the page's own connector
   <svg>, riding the same pathLength="1" geometry as the connector line.
   diagram.js creates it only when the timeline runs, and removes it on
   destroy(). It is never present in the static page. */
.kf-packet-path {
  stroke: var(--color-aegean, #2e5aac);
  stroke-width: 2px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

/* Terminal beat: one registration square that expands out of the 05 node and
   fades, leaving the page's own static Aegean node as the resting state.
   Absolutely positioned, so it is not a flex item and cannot shift the
   numeral inside the node. */
.diagram__stage--here .diagram__node {
  position: relative;
}

.kf-halo {
  position: absolute;
  inset: -7px;
  border: 1px solid var(--color-aegean, #2e5aac);
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion is gated in JavaScript, not here. Every animated value is
   written by GSAP as an inline style, which a stylesheet rule cannot reach.
   diagram.js checks prefers-reduced-motion before it dims anything, so the
   reduced-motion state is the page's own static state, untouched. */