/* Scroll motion, see CLAUDE.md. */
.ls-motion-rise,.ls-stagger-rise>*{--ls-m-y:20px;--ls-m-dur:.75s}
.ls-motion-drop,.ls-stagger-drop>*{--ls-m-y:-16px;--ls-m-dur:.75s}
[class*=ls-motion-slide],[class*=ls-stagger-slide]>*{--ls-m-x:-72px;--ls-m-dur:.875s;--ls-m-delay:.2s}
.ls-motion-slide-right,.ls-stagger-slide-right>*{--ls-m-x:72px}
.ls-motion-lift,.ls-stagger-lift>*{--ls-m-y:120px;--ls-m-dur:1s;--ls-m-ease:cubic-bezier(.2,.8,.2,1)}
:is([class*=ls-motion-],[class*=ls-stagger-]>*).is-wait{opacity:0}
:is([class*=ls-motion-],[class*=ls-stagger-]>*).is-in{animation:ls-motion var(--ls-m-dur,.5s) var(--ls-m-ease,ease-out) calc(var(--ls-m-delay,0s) + var(--ls-m-i,0) * var(--ls-m-step,70ms)) backwards}
@keyframes ls-motion{from{opacity:0;transform:translate(var(--ls-m-x,0),var(--ls-m-y,0)) scale(var(--ls-m-s,1))}}
@keyframes ls-move{from{transform:translateY(var(--ls-m-y)) scale(var(--ls-m-s,1))}}
@media print{:is([class*=ls-motion-],[class*=ls-stagger-]>*).is-wait{opacity:1}}
/* On load, under html.js only: the Home hero (h1 and laptop: transform only, LCP) and .ls-enter. */
@media (prefers-reduced-motion:no-preference){
.js .ls-enter{--ls-m-y:20px;animation:ls-motion .5s ease-out backwards}
.js .ls-home-hero h1{--ls-m-y:10px;animation:ls-move .75s ease-out backwards}
.js .ls-home-hero .ls-text-lg{--ls-m-y:10px;animation:ls-motion .75s ease-out .15s backwards}
.js .ls-home-hero .ls-actions-row{animation:ls-motion .5s ease-out .3s backwards}
.js .ls-home-hero .ls-devices>*{--ls-m-y:16px;--ls-m-s:.96;animation:ls-motion 1s cubic-bezier(.2,.8,.2,1) var(--ls-m-delay,0s) backwards}
.js .ls-home-hero .ls-laptop{animation-name:ls-move}
.ls-home-hero .ls-tablet{--ls-m-delay:.2s}
.ls-home-hero .ls-phone{--ls-m-delay:.35s}
@media (min-width:922px){.js .ls-home-hero :is(h1,.ls-text-lg){--ls-m-y:20px}.js .ls-home-hero .ls-devices>*{--ls-m-y:32px}}
}