/* ===================================================================== GameVerse — انیمیشن ورود المان‌ها هنگام اسکرول (AOS) --------------------------------------------------------------------- پیاده‌سازی سبک و بدون وابستگی، با همان API آشنای کتابخانه AOS:
…
نکته مهم: کلاس aos-on را فایل aos.js روی می‌گذارد. بنابراین اگر جاوااسکریپت غیرفعال یا دچار خطا باشد، هیچ المانی مخفی نمی‌ماند و محتوا همیشه در دسترس است. ===================================================================== */ html.aos-on [data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: var(--aos-duration, 700ms); transition-timing-function: cubic-bezier(.22, .61, .36, 1); transition-delay: var(--aos-delay, 0ms); will-change: opacity, transform; } /* حالت نهایی — مشترک بین همه نوع‌ها */ html.aos-on [data-aos].aos-in { opacity: 1; transform: none; } /* ---------------------------- نوع‌ها ---------------------------- */ html.aos-on [data-aos='fade'] { transform: none; } html.aos-on [data-aos='fade-up'] { transform: translateY(30px); } html.aos-on [data-aos='fade-down'] { transform: translateY(-30px); } /* در چیدمان راست‌چین، «راست» یعنی سمت شروع خواندن */ html.aos-on [data-aos='fade-right'] { transform: translateX(34px); } html.aos-on [data-aos='fade-left'] { transform: translateX(-34px); } html.aos-on [data-aos='zoom-in'] { transform: scale(.9); } html.aos-on [data-aos='zoom-in-up'] { transform: scale(.9) translateY(30px); } html.aos-on [data-aos='zoom-out'] { transform: scale(1.08); } html.aos-on [data-aos='flip-up'] { transform: perspective(900px) rotateX(-14deg) translateY(26px); transform-origin: bottom center; } /* ------------------------- موبایل و تبلت ------------------------- در عرض کم ستون‌ها روی هم می‌آیند و حرکت افقی دیگر چیزی را روایت نمی‌کند. مهم‌تر اینکه کانتینر تا لبه صفحه پهن است، پس ۳۴ پیکسل جابه‌جایی افقی از لبه بیرون می‌زد و صفحه را افقی قابل اسکرول می‌کرد (نمونه‌اش خلاصه سفارش در سبد خرید). بنابراین همان حرکت عمودی بقیه المان‌ها را می‌گیرند. ----------------------------------------------------------------- */ @media (max-width: 991.98px) { html.aos-on [data-aos='fade-right'], html.aos-on [data-aos='fade-left'] { transform: translateY(24px); } } /* ------------------- احترام به تنظیم کاهش حرکت ------------------- */ @media (prefers-reduced-motion: reduce) { html.aos-on [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } }