/* ===================================================================== load-animations.css (AOS ka replacement - pure CSS + 1 chhota JS) --------------------------------------------------------------------- KAISE KAAM KARTA HAI - Har [data-aos] element pehle chhupa hota hai (opacity 0 + halka shift). - Jaise hi wo screen par aata hai, us par .aos-in class lag jaati hai aur wo smoothly animate ho kar aa jaata hai. - Ek baar animate hone ke baad usay DOBARA KABHI animate nahi kiya jaata. Upar-neeche jitna marzi scroll karein, wo waise ka waisa rahega. (Purani AOS har scroll par dobara chalti thi - wahi problem thi.) - Jo content pehle se screen par hai (banner waghera) wo page khulte hi turant animate ho jaata hai. SAFETY - Chhupane wale rules sirf tab lagte hain jab par .js-anim class ho, aur wo class JavaScript lagati hai. Agar JS band ho to kuch bhi chhupta nahi - poora content normally dikhta hai. ===================================================================== */ /* ---------- Shuruati (chhupi hui) haalat ---------- */ .js-anim [data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: 1000ms; transition-delay: 0ms; transition-timing-function: cubic-bezier(.25, .4, .25, 1); will-change: opacity, transform; } .js-anim [data-aos="fade-up"] { transform: translate3d(0, 40px, 0); } .js-anim [data-aos="fade-down"] { transform: translate3d(0, -40px, 0); } .js-anim [data-aos="fade-left"] { transform: translate3d(40px, 0, 0); } .js-anim [data-aos="fade-right"] { transform: translate3d(-40px, 0, 0); } .js-anim [data-aos="zoom-in"] { transform: scale(.94); } .js-anim [data-aos="zoom-out"] { transform: scale(1.06); } .js-anim [data-aos="fade"] { transform: none; } /* ---------- Screen par aane ke baad ki haalat ---------- */ .js-anim [data-aos].aos-in { opacity: 1; transform: none; } /* Animation khatam -> browser ka memory hint hata do */ .js-anim [data-aos].aos-done { will-change: auto; } /* ---------- Durations (data-aos-duration) ---------- */ .js-anim [data-aos][data-aos-duration="50"] { transition-duration: 50ms; } .js-anim [data-aos][data-aos-duration="100"] { transition-duration: 100ms; } .js-anim [data-aos][data-aos-duration="150"] { transition-duration: 150ms; } .js-anim [data-aos][data-aos-duration="200"] { transition-duration: 200ms; } .js-anim [data-aos][data-aos-duration="250"] { transition-duration: 250ms; } .js-anim [data-aos][data-aos-duration="300"] { transition-duration: 300ms; } .js-anim [data-aos][data-aos-duration="350"] { transition-duration: 350ms; } .js-anim [data-aos][data-aos-duration="400"] { transition-duration: 400ms; } .js-anim [data-aos][data-aos-duration="450"] { transition-duration: 450ms; } .js-anim [data-aos][data-aos-duration="500"] { transition-duration: 500ms; } .js-anim [data-aos][data-aos-duration="550"] { transition-duration: 550ms; } .js-anim [data-aos][data-aos-duration="600"] { transition-duration: 600ms; } .js-anim [data-aos][data-aos-duration="650"] { transition-duration: 650ms; } .js-anim [data-aos][data-aos-duration="700"] { transition-duration: 700ms; } .js-anim [data-aos][data-aos-duration="750"] { transition-duration: 750ms; } .js-anim [data-aos][data-aos-duration="800"] { transition-duration: 800ms; } .js-anim [data-aos][data-aos-duration="850"] { transition-duration: 850ms; } .js-anim [data-aos][data-aos-duration="900"] { transition-duration: 900ms; } .js-anim [data-aos][data-aos-duration="950"] { transition-duration: 950ms; } .js-anim [data-aos][data-aos-duration="1000"] { transition-duration: 1000ms; } .js-anim [data-aos][data-aos-duration="1050"] { transition-duration: 1050ms; } .js-anim [data-aos][data-aos-duration="1100"] { transition-duration: 1100ms; } .js-anim [data-aos][data-aos-duration="1150"] { transition-duration: 1150ms; } .js-anim [data-aos][data-aos-duration="1200"] { transition-duration: 1200ms; } .js-anim [data-aos][data-aos-duration="1250"] { transition-duration: 1250ms; } .js-anim [data-aos][data-aos-duration="1300"] { transition-duration: 1300ms; } .js-anim [data-aos][data-aos-duration="1350"] { transition-duration: 1350ms; } .js-anim [data-aos][data-aos-duration="1400"] { transition-duration: 1400ms; } .js-anim [data-aos][data-aos-duration="1450"] { transition-duration: 1450ms; } .js-anim [data-aos][data-aos-duration="1500"] { transition-duration: 1500ms; } .js-anim [data-aos][data-aos-duration="1550"] { transition-duration: 1550ms; } .js-anim [data-aos][data-aos-duration="1600"] { transition-duration: 1600ms; } .js-anim [data-aos][data-aos-duration="1650"] { transition-duration: 1650ms; } .js-anim [data-aos][data-aos-duration="1700"] { transition-duration: 1700ms; } .js-anim [data-aos][data-aos-duration="1750"] { transition-duration: 1750ms; } .js-anim [data-aos][data-aos-duration="1800"] { transition-duration: 1800ms; } .js-anim [data-aos][data-aos-duration="1850"] { transition-duration: 1850ms; } .js-anim [data-aos][data-aos-duration="1900"] { transition-duration: 1900ms; } .js-anim [data-aos][data-aos-duration="1950"] { transition-duration: 1950ms; } .js-anim [data-aos][data-aos-duration="2000"] { transition-duration: 2000ms; } .js-anim [data-aos][data-aos-duration="2050"] { transition-duration: 2050ms; } .js-anim [data-aos][data-aos-duration="2100"] { transition-duration: 2100ms; } .js-anim [data-aos][data-aos-duration="2150"] { transition-duration: 2150ms; } .js-anim [data-aos][data-aos-duration="2200"] { transition-duration: 2200ms; } .js-anim [data-aos][data-aos-duration="2250"] { transition-duration: 2250ms; } .js-anim [data-aos][data-aos-duration="2300"] { transition-duration: 2300ms; } .js-anim [data-aos][data-aos-duration="2350"] { transition-duration: 2350ms; } .js-anim [data-aos][data-aos-duration="2400"] { transition-duration: 2400ms; } .js-anim [data-aos][data-aos-duration="2450"] { transition-duration: 2450ms; } .js-anim [data-aos][data-aos-duration="2500"] { transition-duration: 2500ms; } .js-anim [data-aos][data-aos-duration="2550"] { transition-duration: 2550ms; } .js-anim [data-aos][data-aos-duration="2600"] { transition-duration: 2600ms; } .js-anim [data-aos][data-aos-duration="2650"] { transition-duration: 2650ms; } .js-anim [data-aos][data-aos-duration="2700"] { transition-duration: 2700ms; } .js-anim [data-aos][data-aos-duration="2750"] { transition-duration: 2750ms; } .js-anim [data-aos][data-aos-duration="2800"] { transition-duration: 2800ms; } .js-anim [data-aos][data-aos-duration="2850"] { transition-duration: 2850ms; } .js-anim [data-aos][data-aos-duration="2900"] { transition-duration: 2900ms; } .js-anim [data-aos][data-aos-duration="2950"] { transition-duration: 2950ms; } .js-anim [data-aos][data-aos-duration="3000"] { transition-duration: 3000ms; } /* ---------- Delays (data-aos-delay) ---------- */ .js-anim [data-aos][data-aos-delay="50"] { transition-delay: 50ms; } .js-anim [data-aos][data-aos-delay="100"] { transition-delay: 100ms; } .js-anim [data-aos][data-aos-delay="150"] { transition-delay: 150ms; } .js-anim [data-aos][data-aos-delay="200"] { transition-delay: 200ms; } .js-anim [data-aos][data-aos-delay="250"] { transition-delay: 250ms; } .js-anim [data-aos][data-aos-delay="300"] { transition-delay: 300ms; } .js-anim [data-aos][data-aos-delay="350"] { transition-delay: 350ms; } .js-anim [data-aos][data-aos-delay="400"] { transition-delay: 400ms; } .js-anim [data-aos][data-aos-delay="450"] { transition-delay: 450ms; } .js-anim [data-aos][data-aos-delay="500"] { transition-delay: 500ms; } .js-anim [data-aos][data-aos-delay="550"] { transition-delay: 550ms; } .js-anim [data-aos][data-aos-delay="600"] { transition-delay: 600ms; } .js-anim [data-aos][data-aos-delay="650"] { transition-delay: 650ms; } .js-anim [data-aos][data-aos-delay="700"] { transition-delay: 700ms; } .js-anim [data-aos][data-aos-delay="750"] { transition-delay: 750ms; } .js-anim [data-aos][data-aos-delay="800"] { transition-delay: 800ms; } .js-anim [data-aos][data-aos-delay="850"] { transition-delay: 850ms; } .js-anim [data-aos][data-aos-delay="900"] { transition-delay: 900ms; } .js-anim [data-aos][data-aos-delay="950"] { transition-delay: 950ms; } .js-anim [data-aos][data-aos-delay="1000"] { transition-delay: 1000ms; } .js-anim [data-aos][data-aos-delay="1050"] { transition-delay: 1050ms; } .js-anim [data-aos][data-aos-delay="1100"] { transition-delay: 1100ms; } .js-anim [data-aos][data-aos-delay="1150"] { transition-delay: 1150ms; } .js-anim [data-aos][data-aos-delay="1200"] { transition-delay: 1200ms; } .js-anim [data-aos][data-aos-delay="1250"] { transition-delay: 1250ms; } .js-anim [data-aos][data-aos-delay="1300"] { transition-delay: 1300ms; } .js-anim [data-aos][data-aos-delay="1350"] { transition-delay: 1350ms; } .js-anim [data-aos][data-aos-delay="1400"] { transition-delay: 1400ms; } .js-anim [data-aos][data-aos-delay="1450"] { transition-delay: 1450ms; } .js-anim [data-aos][data-aos-delay="1500"] { transition-delay: 1500ms; } .js-anim [data-aos][data-aos-delay="1550"] { transition-delay: 1550ms; } .js-anim [data-aos][data-aos-delay="1600"] { transition-delay: 1600ms; } .js-anim [data-aos][data-aos-delay="1650"] { transition-delay: 1650ms; } .js-anim [data-aos][data-aos-delay="1700"] { transition-delay: 1700ms; } .js-anim [data-aos][data-aos-delay="1750"] { transition-delay: 1750ms; } .js-anim [data-aos][data-aos-delay="1800"] { transition-delay: 1800ms; } .js-anim [data-aos][data-aos-delay="1850"] { transition-delay: 1850ms; } .js-anim [data-aos][data-aos-delay="1900"] { transition-delay: 1900ms; } .js-anim [data-aos][data-aos-delay="1950"] { transition-delay: 1950ms; } .js-anim [data-aos][data-aos-delay="2000"] { transition-delay: 2000ms; } .js-anim [data-aos][data-aos-delay="2050"] { transition-delay: 2050ms; } .js-anim [data-aos][data-aos-delay="2100"] { transition-delay: 2100ms; } .js-anim [data-aos][data-aos-delay="2150"] { transition-delay: 2150ms; } .js-anim [data-aos][data-aos-delay="2200"] { transition-delay: 2200ms; } .js-anim [data-aos][data-aos-delay="2250"] { transition-delay: 2250ms; } .js-anim [data-aos][data-aos-delay="2300"] { transition-delay: 2300ms; } .js-anim [data-aos][data-aos-delay="2350"] { transition-delay: 2350ms; } .js-anim [data-aos][data-aos-delay="2400"] { transition-delay: 2400ms; } .js-anim [data-aos][data-aos-delay="2450"] { transition-delay: 2450ms; } .js-anim [data-aos][data-aos-delay="2500"] { transition-delay: 2500ms; } .js-anim [data-aos][data-aos-delay="2550"] { transition-delay: 2550ms; } .js-anim [data-aos][data-aos-delay="2600"] { transition-delay: 2600ms; } .js-anim [data-aos][data-aos-delay="2650"] { transition-delay: 2650ms; } .js-anim [data-aos][data-aos-delay="2700"] { transition-delay: 2700ms; } .js-anim [data-aos][data-aos-delay="2750"] { transition-delay: 2750ms; } .js-anim [data-aos][data-aos-delay="2800"] { transition-delay: 2800ms; } .js-anim [data-aos][data-aos-delay="2850"] { transition-delay: 2850ms; } .js-anim [data-aos][data-aos-delay="2900"] { transition-delay: 2900ms; } .js-anim [data-aos][data-aos-delay="2950"] { transition-delay: 2950ms; } .js-anim [data-aos][data-aos-delay="3000"] { transition-delay: 3000ms; } .js-anim [data-aos][data-aos-delay="0"] { transition-delay: 0ms; } /* ---------- Accessibility ---------- OS mein "reduce motion" on ho to koi animation nahi - content seedha visible. */ @media (prefers-reduced-motion: reduce) { .js-anim [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } }