/* =====================================================================
   safari-perf.css  —  بهینه‌سازی رندر برای Safari (iOS + macOS) و Chrome iOS
   هدف: کاهش فشار GPU روی backdrop-filter، blur های بزرگ، انیمیشن های
   box-shadow و drop-shadow. هیچ تغییری در ساختار HTML نمی‌دهد، فقط در
   مرورگرهای WebKit و حالت‌های صرفه‌جویی، استایل‌های گران‌قیمت را سبک می‌کند.
   ===================================================================== */

/* ---------- آیکن Crown (جایگزین ستاره SVG) ---------- */
img.nav-subscriptions-vip-crown {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    filter:
        drop-shadow(0 2px 8px rgba(212, 175, 55, .55))
        drop-shadow(0 0 14px rgba(252, 211, 77, .25));
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}
img.mobile-vip-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    filter:
        drop-shadow(0 3px 10px rgba(212, 175, 55, .55))
        drop-shadow(0 0 18px rgba(252, 211, 77, .3));
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}
/* hover/active interactions */
.nav-subscriptions-vip:hover img.nav-subscriptions-vip-crown {
    transform: translateY(-2px) scale(1.12) rotate(-4deg);
    filter:
        drop-shadow(0 4px 14px rgba(212, 175, 55, .75))
        drop-shadow(0 0 22px rgba(252, 211, 77, .55));
}
.mobile-vip-btn:hover img.mobile-vip-icon,
.mobile-vip-btn:active img.mobile-vip-icon {
    transform: translateY(-2px) scale(1.1) rotate(-3deg);
    filter:
        drop-shadow(0 4px 16px rgba(212, 175, 55, .8))
        drop-shadow(0 0 24px rgba(252, 211, 77, .55));
}
/* اندازه پاسخگو روی صفحه‌های کوچک */
@media (max-width: 380px) {
    img.mobile-vip-icon { width: 24px !important; height: 24px !important; }
    img.nav-subscriptions-vip-crown { width: 22px !important; height: 22px !important; }
}
/* روی iOS Safari فیلتر سنگین نباشد */
@supports (-webkit-touch-callout: none) {
    img.nav-subscriptions-vip-crown,
    img.mobile-vip-icon {
        filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .5));
    }
}

/* ---------- بهینه‌سازی‌های عمومی (همه مرورگرها) ---------- */

/* سکشن‌های پایین صفحه تا قبل از دید کاربر رندر نشوند */
section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}
/* مستثنی: هدر، main اولیه و سکشن‌های اولیه نباید content-visibility بگیرند */
header,
header section,
main > section:first-of-type {
    content-visibility: visible;
}

/* GPU layer hint برای هدر ثابت تا روی اسکرول بازرنگ نشود */
header.header-shell,
header.cd-header-bar {
    will-change: transform, background-color;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* کاهش هزینه drop-shadow روی لوگو */
header img[alt*="لوگو"],
header img[alt*="logo"] {
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .55));
    -webkit-filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .55));
}

/* ---------- prefers-reduced-motion: خاموش کردن انیمیشن‌های زینتی ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [class*="animate-pulse"],
    [class*="animate-ping"] {
        animation: none !important;
    }
}

/* ---------- مخصوص Safari (mac + iOS) ----------
   ترفند feature query: ترکیب `-webkit-hyphens` (Safari دارد) و
   `not (selector(:has(*)))` در عمل فقط Safari را هدف می‌گیرد.
   اما ساده‌ترین و پایدارترین راه `@supports (-webkit-touch-callout: none)`
   است که iOS Safari + Chrome iOS را پوشش می‌دهد. برای macOS Safari از
   media query `@supports (-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))`
   استفاده می‌کنیم که فقط Safari مک قبل از پشتیبانی استاندارد را هدف می‌گیرد —
   و در حالت کلی هم برای همه WebKit ها بهبود می‌دهد.
*/

/* iOS / iPadOS / Chrome iOS */
@supports (-webkit-touch-callout: none) {
    /* جایگزینی backdrop-filter سنگین با background ثابت */
    .glass,
    .glass-strong,
    .auth-card,
    .login-panel,
    .mobile-guest-menu,
    [class*="backdrop-blur"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .glass {
        background: rgba(18, 28, 48, 0.92) !important;
    }
    .glass-strong {
        background: rgba(11, 18, 36, 0.96) !important;
    }
    .auth-card,
    .login-panel {
        background: rgba(15, 23, 42, 0.95) !important;
    }
    .mobile-guest-menu {
        background: rgba(11, 18, 36, 0.98) !important;
    }
    /* هدر اسکرول‌شده */
    header.is-scrolled,
    header.cd-header-scrolled {
        background: rgba(10, 15, 30, 0.96) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* کاهش شعاع blur روی blob های تزئینی */
    [class*="blur-["] {
        filter: blur(40px) !important;
        -webkit-filter: blur(40px) !important;
        opacity: .7 !important;
    }
    /* خاموش کردن انیمیشن blob و pulse زینتی (نه شاخص‌های کاربردی) */
    .absolute[class*="blur-"][class*="animate-"],
    .pointer-events-none [class*="animate-pulse"],
    .pointer-events-none [class*="animate-ping"] {
        animation: none !important;
    }

    /* خاموش کردن drop-shadow های بزرگ روی لوگو ها در iOS */
    img[alt*="لوگو"],
    img[alt*="logo"] {
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* momentum scroll روی iOS */
    body,
    main,
    .mobile-guest-menu,
    [class*="overflow-y-auto"] {
        -webkit-overflow-scrolling: touch;
    }

    /* gradient text در سایزهای بزرگ روی Safari تار می‌شود → fallback */
    .hero-title .text-transparent,
    h1 .text-transparent,
    .gradient-text {
        -webkit-text-stroke: 0.3px transparent;
        text-rendering: geometricPrecision;
    }
}

/* macOS Safari (دسکتاپ) — feature query ای که فقط Safari مک پاسخ می‌دهد:
   پشتیبانی از `-webkit-hyphens` + عدم پشتیبانی Firefox/Chrome از همین. */
@supports (-webkit-hyphens: none) and (not (selector(:has(* )))) {
    /* قدیمی‌ها */
}
@supports (-webkit-hyphens: none) {
    /* Safari مک + iOS هر دو true می‌دهند، Firefox/Chrome false.
       تا حد ممکن backdrop-filter را سبک می‌کنیم اما برای حفظ ظاهر روی
       مک، به جای حذف کامل، فقط شعاع را پایین می‌آوریم. */
    .glass {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    .glass-strong {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    /* انیمیشن box-shadow روی WebKit گران است → روی هاور layer جدید نسازیم */
    .btn,
    .btn-primary,
    .btn-ghost,
    .cd-cta-main,
    .cd-cta-secondary {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    /* انیمیشن‌های pulse مبتنی بر box-shadow را کم‌هزینه‌تر کن */
    .cd-capacity-full-badge,
    .capacity-clock,
    .progress-step.active,
    [class*="animate-pulse"] {
        animation-duration: 3.2s !important;
    }
}

/* ---------- سقف عمومی برای blur های بزرگ روی هر مرورگری ---------- */
[class*="blur-[110px]"],
[class*="blur-[120px]"],
[class*="blur-[140px]"],
[class*="blur-[150px]"],
[class*="blur-[170px]"] {
    /* اگر دسکتاپ غیر-Safari باشد، Tailwind کلاس اصلی را اعمال می‌کند؛
       این رول روی همه اعمال می‌شود تا cap شود. */
    will-change: auto;
}

/* ============================================================
   مخفی کردن دایره‌های رنگی دکوراتیو (blob ها) از سراسر سایت
   این blob ها در hero صفحات و کارت‌ها به‌صورت decorative هستند و
   روی Safari/iOS اغلب به‌صورت دایره‌های رنگی توپر دیده می‌شوند که
   مزاحم خوانایی صفحه می‌شوند.

   استثنا: blob های پس‌زمینه login (که داخل
   `.pointer-events-none.fixed.inset-0` هستند) برای حفظ ظاهر صفحه
   نگه داشته می‌شوند با کاهش opacity.
   ============================================================ */
.absolute.rounded-full[class*="blur-3xl"],
.absolute.rounded-full[class*="blur-2xl"],
.absolute[class*="rounded-full"][class*="blur-3xl"],
.absolute[class*="rounded-full"][class*="blur-2xl"] {
    display: none !important;
}
/* blob های pinpoint با blur-[XXpx] که در hero ها استفاده می‌شوند */
.absolute[class*="rounded-full"][class*="blur-[7"],
.absolute[class*="rounded-full"][class*="blur-[8"],
.absolute[class*="rounded-full"][class*="blur-[9"],
.absolute[class*="rounded-full"][class*="blur-[1"] {
    display: none !important;
}
/* همه blob های پس‌زمینه (شامل login) هم پنهان می‌شوند */
.pointer-events-none.fixed.inset-0 > .absolute[class*="rounded-full"],
.pointer-events-none.fixed.inset-0 > .absolute[class*="bg-gradient"] {
    display: none !important;
}

/* روی موبایل (همه مرورگرها) blur ها را به ۶۰px محدود کن */
@media (max-width: 768px) {
    [class*="blur-[110px]"],
    [class*="blur-[120px]"],
    [class*="blur-[140px]"],
    [class*="blur-[150px]"],
    [class*="blur-[170px]"] {
        filter: blur(60px) !important;
        -webkit-filter: blur(60px) !important;
    }
    /* blob های زینتی روی موبایل نباید pulse کنند */
    .pointer-events-none .animate-pulse,
    .absolute.animate-pulse[class*="blur-"] {
        animation: none !important;
    }
}