/* Motion for the home page: reveal-on-scroll, count-ups, and the hero panel's
   bars/pulses. Everything here is gated on .js-motion (set by motion.js) or on
   a keyframe, so a page without JS renders fully visible; reduced-motion
   users get the final state with no animation. */
.js-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
@keyframes mo-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes mo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes mo-spin{to{transform:rotate(360deg)}}
.mo-bar{transform-origin:left;animation:mo-grow 1.1s cubic-bezier(.2,.7,.2,1) both}
.mo-pulse{animation:mo-pulse 1.6s ease-in-out infinite}
.mo-float{animation:mo-float 5s ease-in-out infinite}
.mo-spin{animation:mo-spin 1s linear infinite}
[data-hero-grid]{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;width:100%}
@media (max-width:920px){[data-hero-grid]{grid-template-columns:1fr;gap:44px}[data-hero-visual]{max-width:460px;margin:0 auto;width:100%}}
/* light sections: the design's hover rules assume a dark ground */
[data-light] .hv0:hover{color:#000}
[data-light] .hv2:hover,[data-light] .hv8:hover{border-color:rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal]{opacity:1;transform:none;transition:none}
  .mo-bar,.mo-pulse,.mo-float,.mo-spin{animation:none}
}