/* hero-motion.v1.css — entrance + ambient motion for the hero product mockups.
   Pairs with hero-motion.v1.js (count-up + stepper). Everything is wrapped in a
   prefers-reduced-motion:no-preference query, so users who ask for reduced motion
   get the plain, fully-visible static hero. New filename (uncached). */

@media (prefers-reduced-motion: no-preference) {

    /* --- entrance: the hero mockup fades + rises into place on load --- */
    body.home .hero-panel,
    body.product .product-hero-visual .mockup-card {
        animation: heroRise 0.75s cubic-bezier(0.2, 0.75, 0.2, 1) both;
    }
    @keyframes heroRise {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: none; }
    }

    /* --- floating badges (homepage): fade in, then a slow continuous drift.
           opacity:0 lives inside this query so reduced-motion keeps them visible. */
    body.home .hero-float { opacity: 0; }
    body.home .hero-float-paye {
        animation: heroFade 0.6s 0.5s forwards, heroDrift 5.0s ease-in-out 1.1s infinite;
    }
    body.home .hero-float-pay {
        animation: heroFade 0.6s 0.8s forwards, heroDrift 5.6s ease-in-out 1.4s infinite;
    }
    @keyframes heroFade  { to { opacity: 1; } }
    @keyframes heroDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}