/*
Theme Name: Dynamic Services Pro
Description: قالب ديناميكي تفاعلي ذو أداء فائق ومصمم خصيصاً للمواقع الخدمية.
Version: 1.0
*/

:root {
    --primary: #0a2540;
    --accent: #00d4ff;
    --bg-light: #f4f7f6;
    --text-dark: #1a1a1a;
    --transition-speed: 0.4s;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    direction: rtl;
    overflow-x: hidden;
}

/* --- التأثيرات الديناميكية المستمرة --- */

/* 1. تأثير النبض والاهتزاز لأزرار الاتصال (يزيد التحويل) */
@keyframes vibrate-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7); }
    10% { transform: scale(1.03) rotate(-1deg); }
    20% { transform: scale(1.03) rotate(1deg); }
    30% { transform: scale(1.03) rotate(0deg); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0, 212, 255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}

.btn-dynamic {
    display: inline-block;
    padding: 12px 25px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    animation: vibrate-pulse 3s infinite ease-in-out;
}

/* 2. تأثير الظهور ثلاثي الأبعاد (3D Reveal) لكروت الخدمات */
.card-3d {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-3d:hover {
    transform: translateY(-10px) rotateX(2deg) rotateY(-2deg) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* خلفية ديناميكية متحركة ببطء للـ Hero Section */
@keyframes bg-drift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-dynamic {
    background: linear-gradient(-45deg, #0a2540, #113a60, #004e92);
    background-size: 400% 400%;
    animation: bg-drift 15s ease infinite;
    color: #fff;
    padding: 100px 20px;
    text-align: center;
}

/* =======================================================
   تأكيد الحركة الانسيابية وتجاوز إضافات الكاش
   ======================================================= */
.scroll-animate {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    will-change: opacity, transform; /* تسريع الحركة عبر كارت الشاشة GPU */
}

.scroll-animate.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* =======================================================
   ضبط الهيدر الثابت لعدم تغطية شريط ووردبريس للمديرين
   ======================================================= */
.admin-bar .site-header {
    top: 32px; /* مسافة شريط ووردبريس على شاشات الكمبيوتر */
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px; /* مسافة شريط ووردبريس على شاشات الجوال */
    }
}