/* Motion layer. Only loaded by sites with "animations": true in their JSON. Everything is fully visible without JavaScript; motion.js adds .motion to before anything is hidden. Reduced-motion users get none of it. */ @keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}} @keyframes lift{from{transform:translateY(14px);}to{transform:none;}} @keyframes settle{from{transform:scale(1.08);}to{transform:scale(1);}} /* hero: slow photo settle, copy and form rise in on load. The H1 only moves (no fade) so it paints at once for Google's LCP. */ .hero-photo img{animation:settle 14s cubic-bezier(.2,.7,.2,1) both;} .hero-copy > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;} .hero-copy > h1{animation-name:lift;} .hero-copy > :nth-child(1){animation-delay:.05s;} .hero-copy > :nth-child(2){animation-delay:.1s;} .hero-copy > :nth-child(3){animation-delay:.2s;} .hero-copy > :nth-child(4){animation-delay:.3s;} .hero-copy > :nth-child(5){animation-delay:.4s;} .hero .quote{animation:rise .8s .3s cubic-bezier(.2,.7,.2,1) both;} /* inner page headers */ .page-head .wrap > *{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;} .page-head .wrap > h1{animation-name:lift;} .page-head .wrap > :nth-child(2){animation-delay:.08s;} .page-head .wrap > :nth-child(3){animation-delay:.16s;} /* scroll reveal: motion.js tags the elements and staggers siblings with --d */ .motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms);} .motion .reveal.in{opacity:1;transform:none;} /* hover polish */ .btn:hover{transform:translateY(-2px);} .svc .photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1);} .svc:hover .photo img{transform:scale(1.05);} .card .ico,.trust-item svg{transition:transform .3s cubic-bezier(.2,.7,.2,1);} .card:hover .ico{transform:translateY(-2px) scale(1.08);} .trust-item:hover svg{transform:scale(1.12);} .step-num{transition:transform .3s cubic-bezier(.2,.7,.2,1);} .step:hover .step-num{transform:scale(1.1);} @media (prefers-reduced-motion:reduce){ .hero-photo img,.hero-copy > *,.hero .quote,.page-head .wrap > *{animation:none !important;} .motion .reveal{opacity:1;transform:none;transition:none;} .svc:hover .photo img,.card:hover .ico,.trust-item:hover svg,.step:hover .step-num,.btn:hover{transform:none;} }