/* Global stylesheet "Motion" (created after Base). Styles for markup that motion.js creates at runtime,
   which has no Etch block to carry a class record. Nothing here hides content: the Moderate pieces are
   additive. The GSAP reveal module's hidden states will go here later, under html.lp-motion only. */

/* Connector line */
.flow-line__svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}
.flow-line__path {
  fill: none;
  stroke: var(--color-sage-deep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 6;
}
.flow-line__path[data-tone="dark"] { stroke: var(--color-mint); }

.flow-line__node-outline {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.2;
  stroke-dasharray: 2.5 2;
}
.flow-line__node-face {
  fill: var(--color-mint);
  stroke: var(--color-ink);
  stroke-width: 1.5;
}
.flow-line__node[data-tone="dark"] :is(.flow-line__node-outline, .flow-line__node-face) { stroke: var(--color-mint); }

/* Nodes grow in as the line reaches them. Plain ease-out: the canvas's overshoot curve is bounce
   easing, which the ruleset rules out. Reduced motion: no transition, nodes simply appear. */
.flow-line__node > g {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.flow-line__node[data-on] > g { transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .flow-line__node > g { transition: transform 0.45s var(--ease-out); }
}

.flow-line__head { fill: var(--color-emerald); }
.flow-line__head[data-tone="dark"] { fill: var(--color-mint); }
.flow-line__head[data-hidden] { opacity: 0; }

/* Goal picker (Build): the "Get a quote · N goals" row fades in when the first goal is ticked.
   Used by .goal-picker__action in sections/home/02-build.css. */
@keyframes goal-picker-in { from { opacity: 0; translate: 0 -6px; } }

/* Reveal motion (sections/home/reveal.js, GSAP). Hidden only with scripting on and reduced motion off, and
   only until the script adds .lp-motion-ready (after it has applied every from-state inline). If the script
   never gets that far, the failsafe animation reveals everything after 3s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.lp-motion-ready) :is(.lp-anim-words, .lp-anim-up, .lp-anim-media, .lp-anim-stagger > *) {
    visibility: hidden;
    animation: lp-failsafe 0s linear 3s forwards;
  }
}
@keyframes lp-failsafe { to { visibility: visible; } }
/* SplitText words: inline-block so they can move; wrapping matches the unsplit heading. */
.lp-word { display: inline-block; will-change: transform, filter, opacity; }