/* AOS Lite — محسّن وخفيف ومتوافق مع .aos-animate */ [data-aos]{ /* متغيرات قابلة للتعديل */ --aos-dur: .6s; --aos-delay: 0s; --aos-ease: cubic-bezier(.22,.61,.36,1); /* Smooth */ transition: transform var(--aos-dur) var(--aos-ease) var(--aos-delay), opacity var(--aos-dur) var(--aos-ease) var(--aos-delay); backface-visibility: hidden; transform-style: preserve-3d; } /* استخدام will-change فقط قبل بدء الحركة (أفضل للأداء) */ [data-aos]:not(.aos-animate){ will-change: transform, opacity; } /* ===== التأثيرات الأساسية ===== */ /* Fade Up */ [data-aos="fade-up"]{ transform: translate3d(0,18px,0); opacity: 0; } [data-aos="fade-up"].aos-animate{ transform: none; opacity: 1; } /* Fade Down */ [data-aos="fade-down"]{ transform: translate3d(0,-18px,0); opacity: 0; } [data-aos="fade-down"].aos-animate{ transform: none; opacity: 1; } /* Fade Right / Left */ [data-aos="fade-right"]{ transform: translate3d(18px,0,0); opacity: 0; } [data-aos="fade-right"].aos-animate{ transform: none; opacity: 1; } [data-aos="fade-left"]{ transform: translate3d(-18px,0,0); opacity: 0; } [data-aos="fade-left"].aos-animate{ transform: none; opacity: 1; } /* Zoom In */ [data-aos="zoom-in"]{ transform: scale(.94); opacity: 0; } [data-aos="zoom-in"].aos-animate{ transform: none; opacity: 1; } /* Flip Up (خفيف + منظور) */ [data-aos="flip-up"]{ transform: perspective(900px) rotateX(8deg) translateY(6px); transform-origin: bottom; opacity: .4; } [data-aos="flip-up"].aos-animate{ transform: none; opacity: 1; } /* ===== إعدادات مدة وتأخير (خرائط جاهزة) ===== */ /* يمكنك ضبطها من الـHTML: data-aos-duration="800" أو data-aos-delay="300" */ [data-aos-duration="300"] { --aos-dur: .3s; } [data-aos-duration="400"] { --aos-dur: .4s; } [data-aos-duration="600"] { --aos-dur: .6s; } [data-aos-duration="800"] { --aos-dur: .8s; } [data-aos-duration="1000"]{ --aos-dur: 1s; } [data-aos-delay="100"] { --aos-delay: .1s; } [data-aos-delay="200"] { --aos-delay: .2s; } [data-aos-delay="300"] { --aos-delay: .3s; } [data-aos-delay="400"] { --aos-delay: .4s; } [data-aos-delay="500"] { --aos-delay: .5s; } [data-aos-delay="600"] { --aos-delay: .6s; } [data-aos-delay="700"] { --aos-delay: .7s; } [data-aos-delay="800"] { --aos-delay: .8s; } [data-aos-delay="900"] { --aos-delay: .9s; } [data-aos-delay="1000"]{ --aos-delay: 1s; } /* ===== تقليل الحركة (إتاحة) ===== */ @media (prefers-reduced-motion: reduce){ [data-aos]{ transition: none !important; transform: none !important; opacity: 1 !important; } } /* ===== فallback بلا جافاسكريبت (اختياري) ===== */ /* لو تحب عدم إخفاء العناصر عند تعطيل JS، أضف class="no-js" إلى من السيرفر */ html.no-js [data-aos]{ transform: none !important; opacity: 1 !important; }