/* Motion, from mintmark-workspace/design/work/04-motion (Parker kept M1-M7). Layered on styles.css.
   Rules: every moment plays once, finishes in under a second, and never moves text someone is reading.
   Starting states apply only under html.m (JavaScript on, reduced motion off), so without either the page is the
   static site. motion.js adds .in to a [data-m] block when it comes into view. */
:root { --out: cubic-bezier(.2, .75, .25, 1); }

@keyframes rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes show   { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow   { to { transform: scaleX(1); } }
@keyframes reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes hide   { to { opacity: 0; visibility: hidden; } }
@keyframes press  { from { opacity: 0; transform: scale(1.4) rotate(-5deg); } 70% { opacity: 1; transform: scale(.96) rotate(0); } to { opacity: 1; transform: none; } }
@keyframes drop   { from { opacity: 0; transform: translateY(-.45em); } to { opacity: 1; transform: none; } }
/* A bar that lays down over a word, then lifts off the other side. */
@keyframes pass   { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; }
                    50.1% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes ink    { 0%, 49% { color: transparent; } 50%, 100% { color: var(--text-teal); } }
@keyframes scan   { 0% { transform: translateY(-56px); opacity: 1; } 85% { transform: translateY(calc(var(--h, 400px) - 56px)); opacity: 1; }
                    100% { transform: translateY(calc(var(--h, 400px) - 56px)); opacity: 0; } }

/* A skipped block (already scrolled past on load) jumps to its end state. */
.m .skip, .m .skip *, .m .skip *::before, .m .skip *::after { animation-duration: 0s !important; animation-delay: 0s !important; }

/* M1 Mark, on load, 0.6s: the teal block lays down left to right like a redaction bar, then the i's bar drops in. */
.m [data-m=m1] .mark { clip-path: inset(0 100% 0 0); }
.m [data-m=m1].in .mark { animation: reveal 450ms var(--out) forwards; }
.m [data-m=m1] .wm .ti b { opacity: 0; transform: translateY(-.45em); }
.m [data-m=m1].in .wm .ti b { animation: drop 240ms var(--out) 360ms forwards; }

/* M2 Files, on load, 0.9s: the headline settles, the owner's record types file in one by one,
   then "What buyers want" stamps the card. */
.m [data-m=m2] .hero-copy > *, .m [data-m=m2] .files li, .m [data-m=m2] figcaption { opacity: 0; }
.m [data-m=m2] .files { opacity: 0; }
.m [data-m=m2] .files .stamp { opacity: 0; }
.m [data-m=m2].in .hero-copy > * { animation: rise 520ms var(--out) forwards; }
.m [data-m=m2].in .hero-copy > :nth-child(2) { animation-delay: 60ms; }
.m [data-m=m2].in .hero-copy > :nth-child(3) { animation-delay: 160ms; }
.m [data-m=m2].in .hero-copy > :nth-child(4) { animation-delay: 240ms; }
.m [data-m=m2].in .files { animation: show 300ms ease-out 100ms forwards; }
.m [data-m=m2].in .files li { animation: rise 360ms var(--out) forwards; }
.m [data-m=m2].in .files li:nth-child(1) { animation-delay: 200ms; }
.m [data-m=m2].in .files li:nth-child(2) { animation-delay: 270ms; }
.m [data-m=m2].in .files li:nth-child(3) { animation-delay: 340ms; }
.m [data-m=m2].in .files li:nth-child(4) { animation-delay: 410ms; }
.m [data-m=m2].in .files li:nth-child(5) { animation-delay: 480ms; }
.m [data-m=m2].in figcaption { animation: show 300ms ease-out 560ms forwards; }
.m [data-m=m2].in .files .stamp { animation: press 240ms var(--out) 660ms forwards; }

/* M3 Gains, on view, 0.7s: each teal rule draws across, and its gain rises under it. */
.m [data-m=m3] li { position: relative; border-top-color: transparent; }
.m [data-m=m3] li::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--block-teal); transform: scaleX(0); transform-origin: left; }
.m [data-m=m3] li > * { opacity: 0; }
.m [data-m=m3].in li::before { animation: grow 480ms var(--out) forwards; }
.m [data-m=m3].in li > * { animation: rise 400ms var(--out) 80ms forwards; }
.m [data-m=m3].in li:nth-child(2)::before, .m [data-m=m3].in li:nth-child(2) > * { animation-delay: 110ms; }
.m [data-m=m3].in li:nth-child(3)::before, .m [data-m=m3].in li:nth-child(3) > * { animation-delay: 220ms; }

/* M4 Scrub, on view, 0.95s: the buyer's card starts as a copy of the original. A scan line runs down it, and each
   name, number, price, and date is wiped off as the line reaches its row. "Scrubbed" stamps the card at the end.
   Hovering a row on either card highlights its twin. */
.was, .scan { display: none; }
.m .scrub { position: relative; overflow: hidden; }
.m .scan { display: block; position: absolute; left: 0; right: 0; top: 0; height: 56px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(34,184,146,0), rgba(34,184,146,.16)); border-bottom: 2px solid var(--glow);
  transform: translateY(-56px); }
.m [data-m=m4].in .scan { animation: scan 780ms linear forwards; }
.m .swap { position: relative; }
.m .swap:not(.inline) { display: block; }
.m .swap.inline { display: inline-block; }
.m .was { display: block; position: absolute; inset: 0; background: var(--white); white-space: nowrap; }
.m .was > span { position: relative; display: inline-block; }
.m .was > span::after { content: ""; position: absolute; inset: 2px -2px; background: var(--block-teal); transform: scaleX(0); transform-origin: left; }
.m [data-m=m4].in .was > span::after { animation: grow 140ms var(--out) calc(var(--d, 0) * 1ms) forwards; }
.m [data-m=m4].in .was { animation: hide 1ms linear calc(var(--d, 0) * 1ms + 170ms) forwards; }
.m [data-m=m4] .scrub .stamp { opacity: 0; }
.m [data-m=m4].in .scrub .stamp { animation: press 240ms var(--out) 700ms forwards; }
.m [data-m=m4] .arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m [data-m=m4].in .arrow path { animation: draw 320ms var(--out) 60ms forwards; }
.record dl > div { transition: background-color .15s, box-shadow .15s; }
.record dl > div.hl { background: #EAF4F0; box-shadow: -12px 0 0 #EAF4F0, 12px 0 0 #EAF4F0; }

/* M5 Passes, on view, 0.85s: the four rules draw in turn, and each example's result is laid down by a passing bar. */
.m [data-m=m5] li { position: relative; border-top-color: transparent; }
.m [data-m=m5] li::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--block-teal); transform: scaleX(0); transform-origin: left; }
.m [data-m=m5].in li::before { animation: grow 480ms var(--out) forwards; }
.m [data-m=m5] .eg .gone { position: relative; display: inline-block; color: transparent; }
.m [data-m=m5] .eg .gone::after { content: ""; position: absolute; inset: 2px -2px; background: var(--block-teal); transform: scaleX(0); }
.m [data-m=m5].in .eg .gone { animation: ink 320ms linear 200ms forwards; }
.m [data-m=m5].in .eg .gone::after { animation: pass 320ms ease-in-out 200ms forwards; }
.m [data-m=m5].in li:nth-child(2)::before { animation-delay: 80ms; }
.m [data-m=m5].in li:nth-child(3)::before { animation-delay: 160ms; }
.m [data-m=m5].in li:nth-child(4)::before { animation-delay: 240ms; }
.m [data-m=m5].in li:nth-child(2) .gone, .m [data-m=m5].in li:nth-child(2) .gone::after { animation-delay: 300ms; }
.m [data-m=m5].in li:nth-child(3) .gone, .m [data-m=m5].in li:nth-child(3) .gone::after { animation-delay: 400ms; }
.m [data-m=m5].in li:nth-child(4) .gone, .m [data-m=m5].in li:nth-child(4) .gone::after { animation-delay: 500ms; }

/* M6 Never, on view, 0.55s: a redaction bar lays down beside each thing that never goes out. */
.m [data-m=m6] .bars li::before { transform: scaleX(0); transform-origin: left; }
.m [data-m=m6].in .bars li::before { animation: grow 260ms var(--out) forwards; }
.m [data-m=m6].in .bars li:nth-child(2)::before { animation-delay: 70ms; }
.m [data-m=m6].in .bars li:nth-child(3)::before { animation-delay: 140ms; }
.m [data-m=m6].in .bars li:nth-child(4)::before { animation-delay: 210ms; }
.m [data-m=m6].in .bars li:nth-child(5)::before { animation-delay: 280ms; }

/* M7 Building, on view, 0.95s: "Your building" opens left to right with steps 1-3 inside it.
   Only then does the arrow cross the wall and step 4 arrive outside. */
.m [data-m=m7] .building { clip-path: inset(-14px 100% -4px -4px); }
.m [data-m=m7].in .building { animation: open 600ms var(--out) forwards; }
@keyframes open { to { clip-path: inset(-14px -4px -4px -4px); } }
.m [data-m=m7] .building .step, .m [data-m=m7] .step.out { opacity: 0; }
.m [data-m=m7].in .building .step { animation: rise 360ms var(--out) 150ms forwards; }
.m [data-m=m7].in .building .step:nth-of-type(2) { animation-delay: 260ms; }
.m [data-m=m7].in .building .step:nth-of-type(3) { animation-delay: 370ms; }
.m [data-m=m7] .gate path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m [data-m=m7].in .gate path { animation: draw 220ms var(--out) 580ms forwards; }
@keyframes cross { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.m [data-m=m7].in .step.out { animation: cross 280ms var(--out) 680ms forwards; }
@media (max-width: 900px) {
  @keyframes cross { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
}