/* ── CTA animation — footer CTA plants: sprout on first view, then sway ── Markup: "CTA BOTANICAL …" code modules · js/cta-animation.js adds .is-grown. Variants: --flip mirrored (left vine) · --h horizontal (mobile top/bottom). */ .cta-anim { display: inline-block; width: 100%; color: var(--light-green); overflow: visible; } .cta-anim .cta-anim__svg { display: block; width: 100%; height: auto; } .cta-anim--flip .cta-anim__svg { transform: scaleX(-1); } /* vine size (tune height here); each vine hugs the text-column side */ .cta-anim:not(.cta-anim--h) .cta-anim__svg { width: auto; height: 30rem; max-width: 100%; margin-inline: auto; } .cta-anim--flip:not(.cta-anim--h) .cta-anim__svg { margin-right: 0; } .cta-anim:not(.cta-anim--h):not(.cta-anim--flip) .cta-anim__svg { margin-left: 0; } .cta-anim--h .cta-anim__svg { max-width: 34.375rem; margin-inline: auto; } /* hidden until .is-grown — only while the JS runs (.eos-anim on ) */ .eos-anim .cta-anim:not(.is-grown) .cta-anim__svg { clip-path: inset(100% 0 0 0); opacity: 0; } .eos-anim .cta-anim--h:not(.is-grown) .cta-anim__svg { clip-path: inset(0 100% 0 0); } /* sway is live from frame one (negative half-period delay) — no handoff jump */ .cta-anim.is-grown .cta-anim__svg { transform-origin: bottom center; animation: eos-sprout 1.4s ease-out both, eos-sway 5.5s ease-in-out -2.75s infinite alternate; } .cta-anim--flip.is-grown .cta-anim__svg { animation: eos-sprout 1.4s ease-out both, eos-sway-flip 5.5s ease-in-out -2.75s infinite alternate; } .cta-anim--h.is-grown .cta-anim__svg { animation: eos-sprout-h 1.4s ease-out both; } /* sprout only */ @keyframes eos-sprout { from { clip-path: inset(100% 0 0 0); opacity: 0; } 8% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes eos-sprout-h { from { clip-path: inset(0 100% 0 0); opacity: 0; } 8% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes eos-sway { from { transform: rotate(-2.25deg); } to { transform: rotate(2.25deg); } } @keyframes eos-sway-flip { from { transform: scaleX(-1) rotate(-2.25deg); } to { transform: scaleX(-1) rotate(2.25deg); } } @media (prefers-reduced-motion: reduce) { .eos-anim .cta-anim:not(.is-grown) .cta-anim__svg { clip-path: none; opacity: 1; } .cta-anim.is-grown .cta-anim__svg, .cta-anim--flip.is-grown .cta-anim__svg, .cta-anim--h.is-grown .cta-anim__svg { animation: none; } }