/* ============================================================
   resources/css/site.css — نسخه ۳: فقط انیمیشن و جلوه‌ها
   ------------------------------------------------------------
   این فایل جایگزین بلاک <style> درون‌خطی (inline) است، چون
   CSP سایت اجازه استایل inline را نمی‌دهد.

   نکته معماری (نسخه ۳):
   پنهان‌سازی پیش‌فرض دراور/بک‌دراپ/منوی حساب با کلاس «hidden»
   تیلویند در خود HTML انجام می‌شود. این فایل فقط «انیمیشن»
   باز و بسته شدن را می‌سازد؛ یعنی اگر این فایل لود نشود
   هیچ چیز از کار نمی‌افتد — فقط حرکت‌ها ساده‌تر می‌شوند.

   ▌نحوه اتصال — یکی از دو روش زیر:
   ▌روش ۱ (پیشنهادی): در resources/css/app.css این خط را به‌عنوان
   ▌«اولین خط» فایل اضافه کنید (قبل از @tailwind یا @import "tailwindcss"):
   ▌    @import './site.css';
   ▌روش ۲ (بدون import): کل محتوای این فایل را انتهای app.css کپی کنید.
   ▌سپس:  npm run build

   ▌فونت وزیرمتن (نسخه محلی و سازگار با CSP — بدون CDN):
   ▌1) در ریشه پروژه اجرا کنید:      npm install vazirmatn
   ▌2) در resources/css/app.css (کنار ایمپورت بالا) اضافه کنید:
   ▌    @import 'vazirmatn/Vazirmatn-font-face.css';
   ▌Vite فونت‌ها را از همان هاست خودتان سرو می‌کند.
   ============================================================ */

/* ---------- پایه ---------- */
html { scroll-behavior: smooth; }

/* فونت پیش‌فرض (specificity بالاتر از preflight تیلویند) */
html body {
    font-family: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- هدر چسبان: سایه هنگام اسکرول ---------- */
#ck-header.ck-scrolled { box-shadow: 0 12px 32px -16px rgb(2 6 23 / .55); }

/* ---------- منوی کشویی موبایل (drawer) — فقط انیمیشن ----------
   حالت بسته = کلاس hidden در HTML (display:none).
   هنگام باز شدن، site.js کلاس hidden را برمی‌دارد و کلاس ck-open
   را اضافه می‌کند؛ ترنسفورم پایه (105%) نقطه شروع اسلاید از راست است. */
.ck-drawer {
    transform: translateX(105%);
    transition: transform .45s cubic-bezier(.32, .72, 0, 1);
}
.ck-drawer.ck-open,
.ck-nav-open .ck-drawer { transform: translateX(0); }

/* بک‌دراپ — محو شدن نرم */
.ck-backdrop {
    opacity: 0;
    transition: opacity .35s ease;
}
.ck-backdrop.ck-open,
.ck-nav-open .ck-backdrop { opacity: 1; }

/* ---------- منوی حساب کاربری (دراپ‌داون) — فقط انیمیشن ---------- */
.ck-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}
.ck-menu.ck-open,
.ck-menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}

/* ---------- نمایش تدریجی بخش‌ها هنگام اسکرول ----------
   کلاس ck-reveal فقط توسط site.js به عناصر [data-reveal]
   اضافه می‌شود؛ بنابراین اگر JS لود نشود محتوا همیشه دیده می‌شود. */
.ck-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.ck-reveal.ck-in { opacity: 1; transform: translateY(0); }

/* ---------- حرکت نرم نقاط نورانی هیرو ---------- */
@keyframes ck-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.ck-float { animation: ck-float 7s ease-in-out infinite; }

/* ---------- دکمه بازگشت به بالا — فقط انیمیشن ----------
   حالت پنهان پایه با کلاس‌های invisible/opacity-0 در HTML است؛
   site.js کلاس ck-visible (و معادل‌های تیلویند) را تاگل می‌کند. */
#ck-to-top { transform: translateY(24px); transition: transform .3s ease, opacity .3s ease; }
#ck-to-top.ck-visible { transform: translateY(0); }

/* ---------- کاهش حرکت برای کاربران حساس ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ck-drawer, .ck-backdrop, .ck-menu, #ck-to-top { transition: none; }
    .ck-reveal { opacity: 1; transform: none; transition: none; }
    .ck-float { animation: none; }
}

/* ---------- هنگام چاپ: همه بخش‌ها کامل و بدون انیمیشن ---------- */
@media print {
    .ck-drawer, .ck-backdrop, #ck-to-top { display: none !important; }
    .ck-reveal { opacity: 1 !important; transform: none !important; }
}