/* ============================================
   وكالة المحمودي - طبقة العمق ثلاثي الأبعاد (effects-3d.css)
   تعمل بالتناغم مع depth-3d.js و three-scene.js
   لا ألوان جديدة: كل الدرجات مشتقة من متغيرات الهوية.
   ============================================ */

/* === 1. اللمعة الضوئية التي تتبع المؤشر فوق البطاقات === */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(
    circle 320px at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.06) 42%,
    transparent 70%
  );
}
.tilt-3d.tilting .tilt-glare { opacity: 1; }

/* في الوضع الداكن اللمعة أهدأ وبمسحة بنفسجية من الهوية */
[data-theme="dark"] .tilt-glare {
  background: radial-gradient(
    circle 320px at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(229, 212, 226, 0.14),
    rgba(122, 79, 120, 0.05) 45%,
    transparent 70%
  );
}

/* === 2. تهيئة البطاقات المائلة === */
.has-3d .tilt-3d {
  will-change: transform;
  position: relative;
}

/* بروز العناصر الداخلية أثناء الميلان (عمق طبقي محسوس) */
.has-3d .tilt-3d h3,
.has-3d .tilt-3d .icon {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.has-3d .tilt-3d.tilting h3 {
  transform: translateY(-2px) scale(1.03);
}
/* نحافظ على انقلاب أيقونة الخدمات الأصلي ونضيف البروز */
.has-3d .service-card.tilting .icon {
  transform: translateY(-5px) scale(1.08) rotateY(180deg);
}
.has-3d .value-card.tilting .icon,
.has-3d .profile-card.tilting .profile-card-icon {
  transform: translateY(-4px) scale(1.08);
}

/* ظل عمق أعمق أثناء الميلان — امتداد لظلال الهوية نفسها */
.has-3d .tilt-3d.tilting {
  box-shadow:
    0 30px 60px rgba(90, 47, 88, 0.14),
    0 12px 24px rgba(90, 47, 88, 0.08);
}
[data-theme="dark"] .has-3d .tilt-3d.tilting {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 30px rgba(122, 79, 120, 0.12);
}

/* === 3. عمق الأقسام: العناوين تُبنى بمنظور === */
.section-title { perspective: 700px; }

/* === 4. احترام تقليل الحركة — سكون تام === */
@media (prefers-reduced-motion: reduce) {
  .tilt-glare { display: none; }
  .has-3d .tilt-3d h3,
  .has-3d .tilt-3d .icon { transition: none; }
}

/* === 5. الجوال: لا طبقات عمق ثقيلة (تخفيف تلقائي) === */
@media (max-width: 768px) {
  .tilt-glare { display: none; }
}