/* تأثير الحركة العام */
.btn-primary {
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, box-shadow;
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* تكبير بسيط + ظل */
.btn-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

/* تفاعل الضغط */
.btn-primary:active,
.btn-primary.btn-pressed {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition-duration: 0.5s;
}

/* الأنيميشن المكتمل - يبقى حتى بعد رفع الإصبع */
.btn-primary.btn-animating {
    transform: translateY(1px) scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
    pointer-events: none;
}

/* اللمعة */
.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-20deg);
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
}

.btn-primary:hover::before {
    animation: shineMove 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shineMove {
    0% {
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(260%) skewX(-20deg);
        opacity: 0;
    }
}

/* تحسينات للأجهزة المحمولة */
@media (max-width: 768px) {
    .btn-primary {
        /* تقليل التأثيرات على الأجهزة المحمولة للحفاظ على الأداء */
        will-change: auto;
    }

    .btn-primary:hover {
        /* تأثير أخف على الأجهزة المحمولة */
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .btn-primary:active,
    .btn-primary.btn-pressed {
        transform: translateY(0px) scale(0.98);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        transition-duration: 0.5s;
    }

    .btn-primary.btn-animating {
        transform: translateY(0px) scale(0.98);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
    }

    /* تقليل مدة أنيميشن اللمعة على الأجهزة المحمولة */
    .btn-primary:hover::before {
        animation: shineMove 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
}

/* تحسينات إضافية للهواتف الصغيرة */
@media (max-width: 480px) {
    .btn-primary {
        transition:
            transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-primary:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }

    /* تعطيل أنيميشن اللمعة على الشاشات الصغيرة جداً للحفاظ على الأداء */
    .btn-primary:hover::before {
        animation: none;
        opacity: 0;
    }
}

/* دعم أفضل للأجهزة التي تدعم hover (أجهزة سطح المكتب) */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover::before {
        animation: shineMove 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
}

/* تحسين للأجهزة التي لا تدعم hover (أجهزة اللمس) */
@media (hover: none) {

    .btn-primary:active::before,
    .btn-primary.btn-pressed::before,
    .btn-primary.btn-animating::before {
        animation: shineMove 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
}

/* أنيميشن تأثير الـ Ripple */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 1000;
    transform: scale(0);
    opacity: 1;
    will-change: transform, opacity;
    /* استخدام transform بدلاً من left/top للأداء الأفضل */
    transform-origin: center;
}

.ripple-animate {
    animation: rippleAnimation 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rippleAnimation {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* تحسينات للأجهزة المحمولة - أنيميشن أسرع وأكثر وضوحاً */
@media (max-width: 768px) {
    .ripple-effect {
        background: rgba(255, 255, 255, 0.7);
    }

    .ripple-animate {
        animation: rippleAnimationMobile 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes rippleAnimationMobile {
        0% {
            transform: scale(0);
            opacity: 1;
        }

        40% {
            opacity: 0.9;
        }

        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
}

/* تحسينات إضافية للهواتف الصغيرة */
@media (max-width: 480px) {
    .ripple-effect {
        background: rgba(255, 255, 255, 0.8);
    }

    .ripple-animate {
        animation: rippleAnimationSmall 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes rippleAnimationSmall {
        0% {
            transform: scale(0);
            opacity: 1;
        }

        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
}