/* ==========================================================
   مدرن‌ترین استایل دکمه‌های هدر - حداکثر شتاب GPU و افکت کروی لوکس
========================================================== */

.button-sphere {
    position: relative;
    border: none;
    overflow: hidden;
    /* انتقال محاسبات حرکتی به کارت گرافیک برای روانی ۱۰۰ درصدی */
    transform: translate3d(0, 0, 0);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    /* استفاده از تابع حرکتی ارگونومیک و طبیعی */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

    .button-sphere::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 70%);
        border-radius: inherit;
        pointer-events: none;
        /* بهینه‌سازی لایه گرادینت */
        transform: translate3d(0, 0, 0);
    }

    .button-sphere::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.2) 0%, transparent 60%);
        border-radius: inherit;
        pointer-events: none;
        /* بهینه‌سازی لایه گرادینت */
        transform: translate3d(0, 0, 0);
    }

    .button-sphere:hover {
        /* استفاده از translate3d به‌جای translateY ساده برای درگیر کردن GPU */
        transform: translate3d(0, -3px, 0) scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 10px rgba(0, 0, 0, 0.15);
    }

    .button-sphere:active {
        /* حس فشرده‌سازی فیزیکی و کاملاً روان بدون افت فریم */
        transform: translate3d(0, 1px, 0) scale(0.98);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    }