/**
 * Motion effects, kept in their own file so the layout/design stylesheet
 * (meetfatoumata.css) stays purely structural — see animations.js for the
 * JS half (scroll-reveal triggers).
 *
 * Contents:
 *   1. Testimonials marquee — infinite auto-scroll, pauses on hover/focus.
 *   2. Scroll-reveal — fade+rise on entering the viewport (formula cards).
 * Both respect prefers-reduced-motion.
 */

/* 1. Testimonials marquee ------------------------------------------------ */
.mf-testi-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.mf-testi-track{display:flex;gap:18px;width:max-content;animation:mf-marquee 46s linear infinite}
@media (min-width:768px){.mf-testi-track{gap:24px}}
.mf-testi-track .mf-testi-card{width:300px;flex:none}
@media (min-width:768px){.mf-testi-track .mf-testi-card{width:360px}}
.mf-testi-marquee:hover .mf-testi-track,
.mf-testi-marquee:focus-within .mf-testi-track{animation-play-state:paused}
@keyframes mf-marquee{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}

/* 2. Scroll-reveal -------------------------------------------------------- */
.mf-reveal{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.mf-reveal.is-visible{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
	.mf-testi-track{animation:none}
	.mf-reveal{opacity:1;transform:none;transition:none}
}