/* ————————————————————————————————————————————————
   طبقة العمق ثلاثي الأبعاد — شيراز ديكو
   القاعدة الذهبية للسلاسة: أثناء الحركة لا يتغيّر إلا transform
   و opacity — لا ظلال ولا تدرّجات تُعاد رسمتها في كل إطار.
   ملف مستقل: احذفه ويعود الموقع مسطّحًا كما كان.
   ———————————————————————————————————————————————— */

:root {
  --d-ease: cubic-bezier(.22, .78, .28, 1);
  --d-gold: 213, 160, 92;
  --d-radius: var(--radius, 20px);

  --d-shadow-1:
    0 1px 2px rgba(24, 23, 19, .05),
    0 6px 12px rgba(24, 23, 19, .07),
    0 16px 30px rgba(24, 23, 19, .08);
  --d-shadow-2:
    0 3px 6px rgba(24, 23, 19, .09),
    0 14px 28px rgba(24, 23, 19, .12),
    0 34px 62px rgba(24, 23, 19, .15),
    0 66px 110px rgba(24, 23, 19, .12);
  --d-shadow-dark:
    0 2px 6px rgba(8, 7, 6, .3),
    0 14px 32px rgba(8, 7, 6, .34),
    0 36px 70px rgba(8, 7, 6, .32);
  --d-shadow-dark-2:
    0 6px 14px rgba(8, 7, 6, .36),
    0 28px 56px rgba(8, 7, 6, .44),
    0 66px 118px rgba(8, 7, 6, .36);
}

/* ═══════════ 0) شرط أساسي للعمق ═══════════
   المتصفح يتجاهل transform-style: preserve-3d إذا كان overflow مخفيًا،
   لذلك نفتحه على البطاقة ونُبقي القصّ على الطبقة الداخلية وحدها. */

/* ملاحظة مهمّة عن الأداء:
   preserve-3d يمنع المتصفح من دمج البطاقة في صورة واحدة، فيضطر إلى
   إعادة تركيب كل عنصر داخلها (الصورة، النص، الظل، الشارة) في كل إطار
   أثناء الدوران — وهذا مصدر التقطيع الحقيقي.
   بإلغائه تُرسم البطاقة مرة واحدة ثم تدور الصورة الجاهزة على بطاقة
   الرسوميات، فتصبح الحركة شبه مجانية. العمق يأتي من المنظور والظل. */
.cat-tile,
.product-card,
.project-card {
  overflow: visible;
  transform-style: flat;
}

/* الصورة هي أثقل عنصر في البطاقة. نُبقيها مسطّحة تمامًا في مستوى
   البطاقة حتى يرسمها المتصفح مرة واحدة ثم يُدير النتيجة على بطاقة
   الرسوميات، بدل إعادة رسمها في كل إطار. */
.cat-tile-media,
.product-image,
.project-media {
  border-start-start-radius: var(--d-radius);
  border-start-end-radius: var(--d-radius);
  overflow: hidden;
}
.cat-tile-media img,
.product-image img,
.project-media img { backface-visibility: hidden; }

/* أثناء الميلان نوقف تكبير الصورة: تكبير صورة كبيرة داخل عنصر يدور
   يُجبر المتصفح على إعادة رسمها بالكامل — وهذا مصدر التقطيع. */
.tilt.is-tilting .product-image img,
.tilt.is-tilting .cat-tile-media img,
.tilt.is-tilting .project-media img { transform: none !important; }

/* لا نضع perspective على الشبكة نفسها: العناصر البعيدة عن مركزها
   تنحرف بشدّة وتبدو مكسورة وثقيلة. كل بطاقة تحمل منظورها الخاص. */

/* ═══════════ 1) الواجهة الرئيسية — لوحة تطفو في الفراغ ═══════════ */

/* الواجهة مستقيمة تمامًا — العمق يأتي من الظل المتدرّج وحده */
.hero-grid {
  box-shadow:
    0 6px 14px rgba(24, 23, 19, .09),
    0 24px 46px rgba(24, 23, 19, .13),
    0 56px 100px rgba(24, 23, 19, .16),
    0 100px 160px rgba(24, 23, 19, .12);
}

/* الختم وبطاقة الساعات يبدوان أقرب إلى العين بفضل الظل والحجم — بلا
   حركة دائمة. الحركة اللانهائية هنا كانت تُبقي الواجهة تُعاد تركيبها
   طوال الوقت في الخلفية، فتُثقل كل ما عداها في الصفحة. */
.hero-media .hero-stamp {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 24px rgba(24, 23, 19, .24), 0 30px 58px rgba(24, 23, 19, .22);
  transition: transform .6s var(--d-ease);
}
.hero-grid:hover .hero-stamp { transform: rotate(-4deg) scale(1.12); }
.hero-media .hours-card {
  box-shadow: 0 10px 20px rgba(24, 23, 19, .22), 0 28px 54px rgba(24, 23, 19, .22);
  transition: transform .6s var(--d-ease);
}
.hero-grid:hover .hours-card { transform: translateY(-6px); }

/* ═══════════ 2) الدخول من العمق عند التمرير ═══════════ */

.d-in {
  opacity: 0;
  transform: perspective(1200px) rotateX(14deg) translate3d(0, 40px, -90px);
  transition: opacity .7s var(--d-ease), transform .8s var(--d-ease);
}
.d-in.d-shown {
  opacity: 1;
  transform: perspective(1200px) rotateX(0) translate3d(0, 0, 0);
}

/* ═══════════ 3) الميلان: transform فقط أثناء الحركة ═══════════ */

.tilt { transition: transform .55s var(--d-ease); }
.tilt.is-tilting { transition: transform .08s linear; will-change: transform; }

/* الظل العميق طبقة مستقلة نُظهرها بـ opacity — أرخص بكثير
   من تحريك box-shadow نفسه في كل إطار. */
.cat-tile::before,
.product-card::before,
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s var(--d-ease);
  pointer-events: none;
}
.cat-tile:hover::before,
.product-card:hover::before,
.project-card:hover::before { opacity: 1; }

/* لمعان ثابت يظهر ويختفي بـ opacity فقط.
   القرص المتحرّك السابق كان يفرض قصًّا بحواف دائرية يُعاد حسابه في كل
   إطار — جميل لكنه مكلف، والفارق البصري لا يستحق التقطيع. */
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--d-ease);
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .16) 50%,
    rgba(255, 255, 255, 0) 66%
  );
}
.tilt.is-tilting .tilt-glare { opacity: 1; }

/* ═══════════ 4) بلاطات التصنيفات ═══════════ */

.cat-tile { box-shadow: var(--d-shadow-dark); }
.cat-tile::before { box-shadow: var(--d-shadow-dark-2); }
.cat-tile-body { transition: transform .5s var(--d-ease); }
.cat-tile:hover .cat-tile-body { transform: translateY(-7px); }

/* حافة ذهبية رفيعة تلتقط «الضوء» عند الاقتراب */
.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--d-gold), 0);
  transition: box-shadow .45s var(--d-ease);
}
.cat-tile:hover::after { box-shadow: inset 0 0 0 1px rgba(var(--d-gold), .55); }

/* ═══════════ 5) بطاقات المنتجات ═══════════ */

.product-card { box-shadow: var(--d-shadow-1); }
.product-card::before { box-shadow: var(--d-shadow-2); }

.product-body {
  transition: transform .5s var(--d-ease);
  border-end-start-radius: var(--d-radius);
  border-end-end-radius: var(--d-radius);
}
.product-card:hover .product-body { transform: translateY(-5px); }
.product-badge,
.product-card .wish-btn { transition: transform .45s var(--d-ease); }
.product-card:hover .product-badge { transform: translateY(-4px) scale(1.06); }
.product-card:hover .wish-btn { transform: scale(1.12); }

/* ═══════════ 6) المشاريع والآراء والمزايا ═══════════ */

.project-card { box-shadow: var(--d-shadow-1); }
.project-card::before { box-shadow: var(--d-shadow-2); }
.project-body { transition: transform .5s var(--d-ease); }
.project-card:hover .project-body { transform: translateY(-5px); }

.review-card { transition: transform .45s var(--d-ease); }
.review-card:hover { transform: perspective(1000px) rotateX(4deg) translateY(-6px); }

.trust-item { transition: transform .4s var(--d-ease); }
.trust-item:hover { transform: translateY(-4px) scale(1.03); }

/* صورة قسم «من نحن» — مستقيمة، بظل عميق يمنحها الحضور */
.story-visual {
  transition: transform .7s var(--d-ease);
  box-shadow: 0 18px 38px rgba(24, 23, 19, .14), 0 46px 88px rgba(24, 23, 19, .16);
}
.story-visual:hover { transform: translateY(-6px); }

/* ═══════════ 7) عمق في العناصر الثابتة ═══════════ */

.site-header.scrolled { box-shadow: 0 1px 0 rgba(24, 23, 19, .06), 0 12px 34px rgba(24, 23, 19, .1); }
.gallery-main { box-shadow: var(--d-shadow-2); }
.order-box { box-shadow: var(--d-shadow-1); }
.map-embed, .visit-map { box-shadow: var(--d-shadow-1); }

.whatsapp-float {
  box-shadow: 0 4px 10px rgba(24, 23, 19, .22), 0 16px 34px rgba(24, 23, 19, .26);
  transition: transform .35s var(--d-ease);
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.03); }
.whatsapp-float:active { transform: translateY(1px) scale(.98); }

.btn { transition: transform .3s var(--d-ease), background .3s, color .3s, border-color .3s; }
.btn-primary { box-shadow: 0 2px 4px rgba(24, 23, 19, .2), 0 8px 20px rgba(24, 23, 19, .2); }
.btn-primary:hover { transform: translateY(-3px); }
.btn-primary:active { transform: translateY(2px); }
.btn-outline:hover { transform: translateY(-3px); }

/* ═══════════ 8) الأجهزة اللمسية وتفضيلات الحركة ═══════════ */

@media (hover: none), (pointer: coarse) {
  .tilt { transform: none !important; }
  .tilt-glare { display: none; }
}

/* ═══════════ مستوى الحركة — يختاره صاحب المحل من لوحة التحكم ═══════════
   العمق الساكن (المنظور والظلال) يبقى في كل الأحوال؛ ما يُطفأ هو ما
   يتحرّك مع الفأرة أو التمرير، لأنه وحده ما قد يتقطّع. */

/* خفيف: عمق كامل بلا ميلان ولا حركة دخول */
[data-motion="light"] .d-in,
.d-lite .d-in { opacity: 1; transform: none; transition: none; }
[data-motion="light"] .tilt-glare,
.d-lite .tilt-glare { display: none; }
.d-lite .hero-grid { transition: none; }

/* بدون: الموقع ثابت تمامًا — لا منظور ولا ظلال عميقة ولا انتقالات */
[data-motion="off"] .hero-grid,
[data-motion="off"] .story-visual { transform: none; transition: none; }
[data-motion="off"] .cat-tile,
[data-motion="off"] .product-card,
[data-motion="off"] .project-card,
[data-motion="off"] .review-card,
[data-motion="off"] .trust-item,
[data-motion="off"] .btn,
[data-motion="off"] .cat-tile-body,
[data-motion="off"] .product-body,
[data-motion="off"] .project-body,
[data-motion="off"] .product-badge,
[data-motion="off"] .wish-btn {
  transform: none !important;
  transition: none !important;
}
[data-motion="off"] .d-in { opacity: 1; transform: none; transition: none; }
[data-motion="off"] .tilt-glare,
[data-motion="off"] .cat-tile::before,
[data-motion="off"] .product-card::before,
[data-motion="off"] .project-card::before { display: none; }

@media (max-width: 900px) {
  .hero-grid { transform: none; }
  .hero-media .hero-stamp { transform: rotate(-6deg); }
  .hero-media .hours-card { transform: none; }
  .story-visual { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tilt, .hero-grid, .story-visual, [data-parallax] {
    transform: none !important;
    transition: none !important;
  }
  .hero-media .hero-stamp { transform: rotate(-6deg) !important; }
  .tilt-glare { display: none; }
  .d-in { opacity: 1; transform: none; transition: none; }
}