/* من الحارة للبطولة — motion.css Entrance animations for .fx-in / .fx-reveal / .fx-delay-N, and base styling for the .hero-dust canvas. .fx-in always plays once, on page load — it's meant for above-the-fold hero content the visitor sees immediately. .fx-reveal has two modes: - No JS present (assets/fx.js not loaded, or IntersectionObserver unsupported): falls back to the same auto-play-on-load animation as .fx-in, so content is never stuck invisible. - assets/fx.js present: it adds .fx-js-active to , which switches .fx-reveal to start hidden and only animate in via the .fx-visible class fx.js adds once the element scrolls into view. .hero-dust is positioned and ready either way; fx.js is what actually draws the drifting particles on it. Without fx.js it stays an inert, harmless transparent layer. */ @media (prefers-reduced-motion: no-preference){ .fx-in{ animation: fxFadeSlideUp .7s cubic-bezier(.16,.8,.24,1) both; } /* Default (no JS): auto-play on load, same as .fx-in. */ .fx-reveal{ opacity:0; animation: fxFadeSlideUp .6s cubic-bezier(.16,.8,.24,1) forwards; animation-delay: .15s; } .fx-delay-1{animation-delay:.15s;} .fx-delay-2{animation-delay:.30s;} .fx-delay-3{animation-delay:.45s;} .fx-delay-4{animation-delay:.60s;} /* JS-driven mode: hold elements hidden with no motion until fx.js marks them .fx-visible on scroll-into-view, then reuse the same keyframe + stagger delays above. */ html.fx-js-active .fx-reveal{ opacity:0; animation:none; transform:translateY(14px); } html.fx-js-active .fx-reveal.fx-visible{ animation: fxFadeSlideUp .6s cubic-bezier(.16,.8,.24,1) forwards; } } @keyframes fxFadeSlideUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} } /* Respect users who've asked for less motion: show content immediately, no animation, no delay, regardless of JS state. */ @media (prefers-reduced-motion: reduce){ .fx-in, .fx-reveal{opacity:1; animation:none; transform:none;} } .hero-dust{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }