/* Stage Walk - Implementation Loop walkthrough for the Method page.
   Drop-in: no changes to index.html beyond the two tags in INSTALL.md.

   Every rule is scoped under [data-sw] on #method, which stage-walk.js adds
   at runtime. With the script absent or failed, this file changes nothing.

   data-sw="walk"    motion allowed: stages dim and advance
   data-sw="static"  prefers-reduced-motion: nothing dims, nothing advances,
                     the steps still work as manual controls

   Colour comes from the page's own tokens (--accent-royal, --wire-color,
   --border-hair), so both the dark and light themes are inherited rather
   than restated here. */

/* ---- the four steps become controls ---------------------------------- */

#method[data-sw] .step-item {
  cursor: pointer;
  transition:
    background-color .42s cubic-bezier(.22, 1, .36, 1),
    border-color     .42s cubic-bezier(.22, 1, .36, 1);
}

#method[data-sw] .step-item:hover {
  border-color: color-mix(in srgb, var(--accent-royal) 55%, transparent);
}

#method[data-sw] .step-item:focus-visible {
  outline: 2px solid var(--accent-royal);
  outline-offset: 3px;
}

#method[data-sw] .step-title {
  transition: color .42s cubic-bezier(.22, 1, .36, 1);
}

#method[data-sw] .step-item.sw-on {
  background: color-mix(in srgb, var(--accent-royal) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent-royal) 62%, transparent);
}

#method[data-sw] .step-item.sw-on .step-title {
  color: var(--accent-royal);
}

/* ---- chart cards ------------------------------------------------------ */

#method[data-sw] .fc-hdr,
#method[data-sw] .fc-card,
#method[data-sw] .fc-band {
  transition:
    opacity      .42s cubic-bezier(.22, 1, .36, 1),
    border-color .42s cubic-bezier(.22, 1, .36, 1),
    box-shadow   .42s cubic-bezier(.22, 1, .36, 1);
}

/* Only the walking state recedes the cards it is not talking about.
   The resting opacity stays high: this is a shift of attention, not a
   spotlight, and the unlit cards must remain readable. */
#method[data-sw="walk"] .fc-hdr,
#method[data-sw="walk"] .fc-card,
#method[data-sw="walk"] .fc-band {
  opacity: .62;
}

#method[data-sw] .fc-hdr.sw-on,
#method[data-sw] .fc-card.sw-on,
#method[data-sw] .fc-band.sw-on {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent-royal) 68%, transparent);
  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--accent-royal) 34%, transparent);
}

/* ---- wires ------------------------------------------------------------ */

#method[data-sw] .wires path {
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}

#method[data-sw="walk"] .wires path {
  opacity: .3;
}

#method[data-sw] .wires path.sw-on {
  opacity: 1;
}

/* The lit run of wire carries the current flowing through it, reusing the
   dash idiom the return loops already use so it reads as the same system.
   Arrowheads are left solid: a dashed arrowhead just looks broken. */
#method[data-sw="walk"] .wires path.sw-on.sw-flow {
  stroke-dasharray: 8 10;
  animation: sw-flow 1.9s linear infinite;
}

@keyframes sw-flow {
  to { stroke-dashoffset: -36; }
}

/* ---- browsers without color-mix --------------------------------------
   Everything above degrades to the untouched page except the highlight,
   which would silently drop out. Restate the lit states in the two theme
   violets so the walk still reads. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  #method[data-sw] .step-item.sw-on {
    background: rgba(143, 127, 216, .13);
    border-color: rgba(143, 127, 216, .62);
  }
  #method[data-sw] .fc-hdr.sw-on,
  #method[data-sw] .fc-card.sw-on,
  #method[data-sw] .fc-band.sw-on {
    border-color: rgba(143, 127, 216, .68);
    box-shadow: 0 10px 30px -6px rgba(143, 127, 216, .34);
  }
}

@media (prefers-reduced-motion: reduce) {
  #method[data-sw] .step-item,
  #method[data-sw] .step-title,
  #method[data-sw] .fc-hdr,
  #method[data-sw] .fc-card,
  #method[data-sw] .fc-band,
  #method[data-sw] .wires path {
    transition: none;
  }
  #method[data-sw] .wires path.sw-on.sw-flow {
    animation: none;
  }
}