/* Motion. Everything here only applies under html.motion (not set when the visitor asks for reduced motion),
   so without JS or with reduced motion every element simply shows. Only transform and opacity are animated.
   2026-11-12: one short moment on the home hero; no scroll reveal and nothing that loops forever (they made phones slow). */

/* hero: the title drops in letter by letter like blocks, then the rest follows quickly */
.motion .title .ch{display:inline-block;opacity:0;animation:drop .4s steps(5,end) forwards;animation-delay:calc(.05s * var(--i))}
@keyframes drop{0%{opacity:0;transform:translateY(-60px)}20%{opacity:1}70%{transform:translateY(6px)}100%{opacity:1;transform:none}}
.motion .hero .catch,.motion .hero .lead,.motion .hero .ctas,.motion .hero .tag{opacity:0;animation:rise .45s ease forwards}
.motion .hero .tag{animation-delay:.05s}
.motion .hero .catch{animation-delay:.35s}
.motion .hero .lead{animation-delay:.45s}
.motion .hero .ctas{animation-delay:.5s}
.motion .hero .term{opacity:0;animation:slide-in .5s cubic-bezier(.2,.9,.3,1.1) .25s forwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slide-in{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

/* picks wiggle on hover (an answer to the pointer, not a loop) */
.motion .pk:hover .e{animation:wiggle .5s ease}
@keyframes wiggle{25%{transform:rotate(-6deg) scale(1.1)}75%{transform:rotate(14deg) scale(1.1)}}

/* the sheet pops */
.motion .holo{animation:pop .22s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

/* numbers that count up get a small bump when they change */
.motion .bump{animation:bump .35s ease}
@keyframes bump{50%{transform:scale(1.15)}}

/* the title is hidden until site.js splits it into letters; if that never happens it still shows after 1 s */
.motion .title:not(.split){opacity:0;animation:show 0s 1s forwards}
@keyframes show{to{opacity:1}}