/* The motion pass (shared/motion.js). Everything here sits under .m-on,
   which the <head> script sets unless reduced motion or ?static=1. Transform and opacity only. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes m-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes m-grow { from { transform: scaleY(0); } }
@keyframes m-fade { from { opacity: 0; } }

/* 1. The hero copy rises in once: headline, lede, then buttons. */
.m-on .hero-copy > * { animation: m-rise 600ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 70ms); }
.m-on .hero-copy > :nth-child(2) { --i: 1; }
.m-on .hero-copy > :nth-child(3) { --i: 2; }

/* 2. Price bars grow from the baseline, left to right; the labels follow. */
.m-on .b-price.m-seen .lw path { transform-box: fill-box; transform-origin: 50% 100%; animation: m-grow 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
.m-on .b-price.m-seen .lw text { animation: m-fade 300ms var(--ease-out) both; animation-delay: 380ms; }
.m-on .b-price.m-repick .lw path { animation-duration: 320ms; animation-delay: calc(var(--i, 0) * 10ms); }
.m-on .b-price.m-repick .lw text { animation-delay: 220ms; }
.m-on .b-price.m-done .lw path, .m-on .b-price.m-done .lw text { animation: none; }
/* Before the card is seen, the bars wait at zero so nothing pops. */
.m-on .b-price:not(.m-seen) .lw path { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.m-on .b-price:not(.m-seen) .lw text { opacity: 0; }

/* 3. On a new model, the modality card stays; the three that change rise in. */
.m-on .b-grid.m-picked .b-modal { transition: none; }
.m-on .b-grid.m-picked .b-card:not(.b-modal) { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .m-on .b-grid.m-picked .b-card:not(.b-modal) { transform: translateY(6px); } }

/* 4. The prompt's dot, travelling the lime wire to the deleting group. */
.pv { position: relative; }
.m-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--lime); pointer-events: none; z-index: 2; transition: opacity 240ms var(--ease-out); }
.m-dot.m-gone { opacity: 0; }