/* =========================================================
   GLX HOME PERFORMANCE LAYER
   Scope: صفحه اصلی (body.glx-home) - Views/Home/Index2.cshtml
   این فایل خارج از @layer نوشته شده تا بدون !important بر
   utilityهای Tailwind (app.css) اولویت داشته باشد.
   هدف: حذف هزینه‌های رندر (backdrop-filter، blur بزرگ، انیمیشن
   پراپرتی‌های گران) با حفظ ظاهر فعلی.
   ========================================================= */

/* ---------- 1) حذف backdrop-filter از سطوح صفحه ----------
   پس‌زمینه پشت این سطوح یکدست است، پس blur تفاوت دیداری ندارد
   ولی در هر فریم اسکرول/هاور دوباره محاسبه می‌شود. */
.glx-home > main [class*="backdrop-blur"],
.glx-home header.glass-header [class*="backdrop-blur"],
.glx-home footer [class*="backdrop-blur"],
.glx-home .glx-shop-benefits [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* دکمه‌های اسلایدر اصلی روی تصویر هستند؛ به‌جای شیشه مات،
   پس‌زمینه نیمه‌شفاف تیره (هم‌رنگ نسخه موبایل) */
.glx-home #home-hero-slider .home-hero-navigation > div {
    background: rgba(29, 49, 81, .55);
}
.glx-home #home-hero-slider .home-hero-navigation > div:hover {
    background: #fff;
}

/* ---------- 2) کشوها و منوی موبایل: blur فقط وقتی باز هستند ---------- */
.glx-home #cart-drawer.pointer-events-none [class*="backdrop-blur"],
.glx-home #mobile-menu.pointer-events-none [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* فوتر و کنترل‌های داخل کشوی سبد روی سطح خود کشو هستند */
.glx-home #cart-footer,
.glx-home #cart-drawer .product-row [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ---------- 3) بخش پیشنهاد شگفت‌انگیز ----------
   لکه‌های blur(120px) (یکی با pulse بی‌پایان) با گرادیان ثابت
   هم‌رنگ جایگزین می‌شوند. */
.glx-home #wonder-offers .glx-wonder-panel > .absolute {
    display: none;
}
@media (min-width: 768px) {
    .glx-home #wonder-offers .glx-wonder-panel {
        background:
            radial-gradient(60% 60% at 100% 0%, color-mix(in oklab, var(--color-secondary-500) 10%, transparent), transparent 70%),
            radial-gradient(60% 60% at 0% 100%, rgba(59, 130, 246, .08), transparent 70%),
            rgba(255, 255, 255, .55);
    }
    .dark .glx-home #wonder-offers .glx-wonder-panel {
        background:
            radial-gradient(60% 60% at 100% 0%, color-mix(in oklab, var(--color-secondary-500) 16%, transparent), transparent 70%),
            radial-gradient(60% 60% at 0% 100%, rgba(37, 99, 235, .10), transparent 70%),
            rgba(255, 255, 255, .02);
    }
}
/* هاور کارت: فقط رنگ border انیمیت شود (نه سایه بزرگ) */
.glx-home #wonder-offers .glx-wonder-surface {
    transition: border-color .3s ease;
}
.glx-home #wonder-offers .glx-wonder-image > img {
    transition-property: transform;
}

/* ---------- 4) هاله‌های نورانی هاور (blur-2xl / blur-[30px] / blur-[50px]) ----------
   به‌جای فیلتر blur، همان رنگ با mask گرادیانی نرم می‌شود؛
   ظاهر نزدیک به قبل و بدون هزینه فیلتر. */
.glx-home > main [class*=" blur-"],
.glx-home > main [class^="blur-"],
.glx-home .glx-shop-benefits [class*=" blur-"],
.glx-home .glx-shop-benefits [class^="blur-"] {
    filter: none;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
}

/* ---------- 5) سایه فیلتری تصاویر ---------- */
.glx-home > main [class*="drop-shadow"] {
    filter: none;
}

/* ---------- 6) محدود کردن transition-all ----------
   transition روی box-shadow / filter / backdrop-filter در هر فریم
   repaint می‌خواهد. فقط پراپرتی‌های سبک انیمیت می‌شوند. */
.glx-home > main .transition-all,
.glx-home > main .transition,
.glx-home header.glass-header .transition-all,
.glx-home header.glass-header .transition,
.glx-home .glx-shop-benefits .transition-all {
    transition-property: transform, translate, scale, rotate, opacity, color, background-color, border-color;
}

/* ---------- 7) کارت‌های محصول: سایه هاور با لایه جدا ----------
   به‌جای انیمیت box-shadow، opacity یک pseudo-element تغییر می‌کند
   (کاملاً روی GPU). */
.glx-home #product-grid .product-card {
    transition: transform .3s ease, border-color .3s ease;
}
.glx-home #product-grid .product-card:hover {
    box-shadow: 0 3px 12px #14233f04;
}
.glx-home #product-grid .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 8px 24px #14233f0c;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.glx-home #product-grid .product-card:hover::after {
    opacity: 1;
}

/* ---------- 8) رندر تنبل بخش‌های پایین صفحه ----------
   مرورگر محتوای خارج از دید را layout/paint نمی‌کند. */
.glx-home .glx-home-products,
.glx-home footer.amazing-glass-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 1000px;
}

/* ---------- 9) کاربرانی که حرکت کمتر می‌خواهند ---------- */
@media (prefers-reduced-motion: reduce) {
    .glx-home .animate-pulse,
    .glx-home .animate-ping,
    .glx-home .animate-bounce {
        animation: none;
    }
    .glx-home > main *,
    .glx-home > main *::after {
        transition-duration: 0s !important;
    }
}