/* =========================================================================
   hero-motion.css  ·  Additive hero motion for the homepage.
   100% reversible: every rule is scoped under .hero-motion-on, a class that
   hero-motion.js adds at runtime. Remove the <script> include (or the file)
   and none of these rules apply, so the hero renders exactly as it did before.
   Nothing here overrides existing hero styles; it only adds.
   ========================================================================= */

/* Headline words start hidden ONLY when motion is on (so no-JS shows normal text) */
.hero-motion-on .hero-title .w {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    will-change: transform, opacity;
}
.hero-motion-on .hero-title .w.in {
    transform: none;
    opacity: 1;
    transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.27, 1), opacity 0.9s ease;
}

/* Sub-headline + CTAs ease up just after the headline */
.hero-motion-on .hero-sub,
.hero-motion-on .hero-ctas {
    opacity: 0;
    transform: translateY(12px);
    will-change: transform, opacity;
}
.hero-motion-on .hero-sub.in,
.hero-motion-on .hero-ctas.in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.84, 0.27, 1);
}

/* Elements the script gently transforms each frame */
.hero-motion-on .hero-product-stack,
.hero-motion-on .hero-mark-glow,
.hero-motion-on .hero-bg-deco { will-change: transform; }

/* Faint drifting motes (added by JS into .hero-visual) */
.hero-mote {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(0, 131, 62, 0.5), rgba(0, 131, 62, 0) 70%);
}

/* Anyone who prefers reduced motion gets the calm, static hero */
@media (prefers-reduced-motion: reduce) {
    .hero-motion-on .hero-title .w,
    .hero-motion-on .hero-sub,
    .hero-motion-on .hero-ctas {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .hero-mote { display: none !important; }
}