/* ===== تأثيرات الحركة ===== */

/* تأثير الخلفية المتحركة في الهيدر */
.animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    overflow: hidden;
}

.animated-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(219, 39, 119, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 40% 70%, rgba(251, 240, 132, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 70% 80%, rgba(4, 163, 83, 0.25) 0%, transparent 25%);
    opacity: 0.9; /* زيادة الوضوح */
}

/* النجوم المتحركة */
.star {
    position: absolute;
    width: 3px; /* زيادة الحجم للوضوح */
    height: 3px; /* زيادة الحجم للوضوح */
    background-color: white;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle var(--duration) linear infinite;
    animation-delay: var(--delay);
}

@keyframes twinkle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.5);
    }
}

/* الدوائر المتحركة */
.circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.3; /* زيادة الوضوح */
    animation: float var(--duration) ease-in-out infinite alternate;
    animation-delay: var(--delay);
}

.circle-pink {
    background-color: var(--pink);
}

.circle-blue {
    background-color: var(--blue);
}

.circle-yellow {
    background-color: var(--yellow);
}

.circle-green {
    background-color: var(--green);
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(var(--x), var(--y)) scale(1.1);
    }
}

/* تأثيرات الظهور عند التمرير */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* تأثير نبض للأزرار العائمة */
.floating-btn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--pulse-color), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
    }
}

.call-btn {
    --pulse-color: 14, 165, 233;
}

.whatsapp-btn {
    --pulse-color: 4, 163, 83;
}

/* تأثير تكبير للأزرار عند التحويم */
.btn:hover, 
.product-btn:hover,
.filter-btn:hover {
    transform: translateY(-3px) scale(1.03);
}

/* تأثير تكبير لبطاقات الخدمات عند التحويم */
.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s ease;
}

/* تأثير تغيير لون الأيقونات في القائمة عند التحويم */
.main-nav a:hover i {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

/* تأثير تحريك للعناوين الرئيسية */
.section-title {
    position: relative;
    overflow: hidden;
}

.section-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--pink), var(--blue), var(--yellow), var(--green));
    transform: translateX(-100%);
    animation: slide-in 1.5s forwards;
}

@keyframes slide-in {
    to {
        transform: translateX(0);
    }
}

/* تأثير نبض لزر العودة للأعلى */
.back-to-top {
    animation: float-button 3s ease-in-out infinite alternate;
}

@keyframes float-button {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-5px);
    }
}

.back-to-top.show {
    animation: appear 0.5s forwards, float-button 3s ease-in-out infinite alternate 0.5s;
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}