/* Node traversal animation
   All instance-specific values arrive as CSS custom properties set
   inline in module.html, so this file stays static and cacheable and
   multiple instances on one page can differ without any HubL in CSS. */

.deq-nodes-outer {
  display: flex;
  width: 100%;
  height: 75%;
}

.deq-nodes--left   { justify-content: flex-start; }
.deq-nodes--center { justify-content: center; }
.deq-nodes--right  { justify-content: flex-end; }

.deq-nodes {
  width: 100%;
  max-width: var(--deq-max, 355px);
  aspect-ratio: 1 / 1;
  background: var(--deq-bg, #00E9D8);
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .deq-nodes { position: relative; height: 0; padding-bottom: 100%; }
  .deq-nodes > svg { position: absolute; inset: 0; }
}

.deq-nodes > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Circles are driven by transform only — hint the compositor. */
.deq-nodes circle {
  will-change: transform;
}

/* Reduced motion is handled in JS (timeline paused at frame 0) so the
   composition still renders as designed rather than disappearing. */