/* Reframe motion engine v2, companion styles. Pairs with assets/js/motion-v2.js.
   Loads after reframe-ui.css. Everything resolves under prefers-reduced-motion. */

/* SVG draw-in: strokes trace once the wrapper earns .mv2-drawn */
[data-svg-draw] .mv2-stroke { /* dasharray and offset are set inline by JS */ }
[data-svg-draw].mv2-drawn .mv2-stroke { stroke-dashoffset: 0 !important; }

/* nodes (circles, rects, labels) pop after the strokes lead */
[data-svg-draw] .mv2-node {
  opacity: 0;
  transform: scale(.86);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.4,.4,1);
}
[data-svg-draw].mv2-drawn .mv2-node { opacity: 1; transform: none; }

/* scroll-linked helpers driven by --mp (0 at entry, 1 at exit) */
[data-progress] { --mp: 0; }
.mv2-rise    { transform: translateY(calc((1 - var(--mp)) * 44px)); }
.mv2-fade    { opacity: calc(.25 + var(--mp) * .75); }
.mv2-rule    { transform: scaleX(var(--mp)); transform-origin: 0 50%; }
.mv2-drift-l { transform: translateX(calc((1 - var(--mp)) * -32px)); }
.mv2-drift-r { transform: translateX(calc((1 - var(--mp)) * 32px)); }

/* sticky step sequencer states */
[data-steps] > * {
  opacity: .38;
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
[data-steps] > .is-active { opacity: 1; transform: translateX(4px); }

/* soft accent glow the hero can breathe with */
@keyframes mv2-breathe { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
.mv2-breathe { animation: mv2-breathe 6s ease-in-out infinite; }

/* status blink for live mono readouts */
@keyframes mv2-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.mv2-blink { animation: mv2-blink 1.6s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-svg-draw] .mv2-stroke { stroke-dashoffset: 0 !important; transition: none !important; }
  [data-svg-draw] .mv2-node { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-progress] { --mp: 1; }
  .mv2-rise, .mv2-rule, .mv2-drift-l, .mv2-drift-r { transform: none !important; }
  .mv2-fade { opacity: 1 !important; }
  [data-steps] > * { opacity: 1 !important; transform: none !important; }
  .mv2-breathe, .mv2-blink { animation: none !important; }
}