/* ══════════════════════════════════════════════════════════════════════════
   RADDAN · طبقة العمق ثلاثية الأبعاد — نظام مشترك بين كل الصفحات
   ─────────────────────────────────────────────────────────────────────────
   الهدف: لمسة 3D واحدة متسقة في (marketing / login / dashboard / splash):
   أرضية شبكة بتروح للعمق، أشكال طايرة، كروت بتمايل مع المؤشر، وأغراض
   بتحرك بارالاكس عكس حركة الماوس.

   الترتيب الصحيح داخل <head>:
     1) <link rel="stylesheet" href="/assets/raddan-brand.css">   ← الموجود
     2) <link rel="stylesheet" href="/assets/raddan-3d.css">      ← الجديد (آخر حاجة)
     3) <script src="/assets/raddan-3d.js" defer></script>

   واجهات الماركة (data attributes):
     [data-rd3-tilt="7"]        → العنصر بيتمايل مع المؤشر (الرقم = أقصى درجة)
     [data-rd3-depth="2"]       → العنصر طالع لقدام في الفراغ (يحتاج أب فعّال)
     [data-rd3-parallax="34"]   → حركة عكسية خفيفة مع الماوس (بالبكسل)
     [data-rd3-notilt]          → استثناء صريح من التمايل
     data-rd3-auto=".card=3"    → اختيار تلقائي بصنف (على تاج الـ script)
     data-rd3-base="..."        → ترانسفورم أساسي ثابت لو العنصر معطّله عنده
     data-rd3-nobg على <html>   → تشيل طبقة الخلفية الطايرة

   ⚠ قاعدة المشروع: صفر letter-spacing على أي نص عربي (مفيش أنماط نص هنا أصلًا).
   ⚠ كل الحركة في الملف ده بتتلغي تلقائيًا مع prefers-reduced-motion.
   ⚠ الملف زخرفي 100%: لو الـ JS وقف، الصفحات تفضل زي ما هي بالظبط.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════ 1) التوكنات ══════════════════
   قيم افتراضية بـ fallback عشان الملف يشتغل لوحده من غير raddan-brand.css
   (الداشبورد والسبلاش مش بحمّلوه). */
:root {
    --rd3-blue:      #1a5fd6;
    --rd3-violet:    #5b3fd6;
    --rd3-cyan:      #37d6ff;
    /* ⚠ الشفافية متعمدة: النص ثانوي (L≈.106) لازم يفضل 5:1+ فوق أي خطوة هنا.
       الخطوط رفيعة (1px) ومقنّعة بتلاشي ناحية الأفق، فالتعرض الأقصى نادر. */
    --rd3-grid:      rgba(38, 119, 255, .13);
    --rd3-ring:      rgba(38, 119, 255, .16);
    --rd3-ring-2:    rgba(117, 87, 255, .16);
    --rd3-ring-3:    rgba(55, 214, 255, .15);
    --rd3-persp:     1100px;
    --rd3-lift:      -4px;
}

/* ══════════════════ 2) طبقة الخلفية الطايرة ══════════════════
   JS بينشئ عنصر باسم (.rd-bg .rd3-bg) أول ما يلاقي الصفحة من غير .rd-bg،
   ولو الصفحة عندها .rd-bg أصلاً بيدخل الطبقة جوّاه من غير ما يكرّر الهالات. */
.rd3-bg {
    position: fixed;
    inset: 0;
    z-index: -1;            /* فوق خلفية الصفحة، وتحت كل المحتوى — عشان ما يغطاش على أي نص */
    pointer-events: none;
    overflow: hidden;
}
/* منع هالات/نقاط raddan-brand على العنصر المُنشأ (الصفحات اللي كانت من غيره) */
.rd3-bg::before,
.rd3-bg::after { content: none !important; }

.rd3-layer {
    position: absolute;
    inset: 0;
    perspective: 900px;
    perspective-origin: 50% 94%;
    pointer-events: none;
}

/* ── أرضية الشبكة المائلة (الأنفاس بتاع العمق) ──
   الشبكة نفسها بتنزلق بـ transform (موفر رسم) وبتتكرر كل 74px = حركة سلسة. */
.rd3-floor {
    position: absolute;
    left: -38%;
    right: -38%;
    bottom: -8%;
    height: 52%;
    overflow: hidden;
    transform: rotateX(66deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: radial-gradient(74% 98% at 50% 100%, #000 8%, transparent 84%);
            mask-image: radial-gradient(74% 98% at 50% 100%, #000 8%, transparent 84%);
}
.rd3-floor i {
    position: absolute;
    left: 0; right: 0; top: -80px; bottom: -80px;
    background-image:
        repeating-linear-gradient(to right,  var(--rd3-grid) 0 1px, transparent 1px 74px),
        repeating-linear-gradient(to bottom, var(--rd3-grid) 0 1px, transparent 1px 74px);
    animation: rd3-scroll 16s linear infinite;
    will-change: transform;
}
@keyframes rd3-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 74px, 0); }
}

/* ── جيروسكوب (3 حلقات بدوران ثلاثي الأبعاد) ── */
.rd3-gyro {
    position: absolute;
    width: var(--s, 280px);
    height: var(--s, 280px);
    transform-style: preserve-3d;
    animation: rd3-gyro 95s linear infinite;
    /* البارالاكس بـ translate (خاصية مستقلة) — بيتركّب مع دوران الأنيميشن من غير تعارض */
    translate: calc(var(--rd3-px, 0) * var(--d, 14px)) calc(var(--rd3-py, 0) * var(--d, 14px));
}
.rd3-gyro i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--rd3-ring);
}
.rd3-gyro i:nth-child(2) { border-color: var(--rd3-ring-2); transform: rotateX(74deg) rotateZ(60deg); }
.rd3-gyro i:nth-child(3) { border-color: var(--rd3-ring-3); transform: rotateY(66deg); }
.rd3-gyro i:nth-child(1) { transform: rotateX(74deg); }
@keyframes rd3-gyro {
    from { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
    to   { transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg); }
}

/* ── مكعبات سلكية طايرة ── */
.rd3-cube {
    position: absolute;
    width: var(--s, 64px);
    height: var(--s, 64px);
    transform-style: preserve-3d;
    animation: rd3-cube 120s linear infinite;
    translate: calc(var(--rd3-px, 0) * var(--d, 30px)) calc(var(--rd3-py, 0) * var(--d, 30px));
}
.rd3-cube i {
    position: absolute;
    inset: 0;
    border: 1px solid var(--rd3-ring-2);
    background: rgba(117, 87, 255, .045);
}
.rd3-cube i:nth-child(1) { transform: translateZ(calc(var(--s, 64px) / 2)); }
.rd3-cube i:nth-child(2) { transform: rotateY(180deg)  translateZ(calc(var(--s, 64px) / 2)); }
.rd3-cube i:nth-child(3) { transform: rotateY(90deg)   translateZ(calc(var(--s, 64px) / 2)); }
.rd3-cube i:nth-child(4) { transform: rotateY(-90deg)  translateZ(calc(var(--s, 64px) / 2)); }
.rd3-cube i:nth-child(5) { transform: rotateX(90deg)   translateZ(calc(var(--s, 64px) / 2)); }
.rd3-cube i:nth-child(6) { transform: rotateX(-90deg)  translateZ(calc(var(--s, 64px) / 2)); }
@keyframes rd3-cube {
    from { transform: rotateX(-16deg) rotateY(0deg); }
    to   { transform: rotateX(344deg) rotateY(360deg); }
}

/* ══════════════════ 3) تمايل الكروت مع المؤشر ══════════════════
   الترانسفورم الفعلي بيتحط inline عن طريق JS (أثناء المرور فقط) عشان ما
   نكسرش أي transform/أنيميشن موجود في الصفحة. هنا بنجهّز الفراغ بس. */
[data-rd3-tilt].rd3-active {
    transform-style: preserve-3d;   /* عشان الأبناء بـ data-rd3-depth يطلعوا في الفراغ */
    perspective: var(--rd3-persp);  /* الخاصية دي بتعمل perspective لأبناء العنصر */
    will-change: transform;
}

/* ══════════════════ 4) عمق الأبناء داخل العنصر المائل ══════════════════
   translate بالبكسل Z — لحظة ما الأب يبقى preserve-3d العنصر بيطلع/بيغوص. */
[data-rd3-depth="1"]  { translate: 0 0 12px; }
[data-rd3-depth="2"]  { translate: 0 0 26px; }
[data-rd3-depth="3"]  { translate: 0 0 46px; }
[data-rd3-depth="-1"] { translate: 0 0 -14px; }
[data-rd3-depth="-2"] { translate: 0 0 -34px; }

/* ══════════════════ 5) لوجو بدوران ثلاثي الأبعاد (سبلاش) ══════════════════ */
.rd3-logo3d {
    display: inline-block;
    transform-style: preserve-3d;
    /* pop هو أنيميشن الدخول الموجود أصلًا في splash.html — بنركّبه معاه من غير ما نشيله */
    animation: pop .6s ease, rd3-logo 14s .8s ease-in-out infinite !important;
}
@keyframes rd3-logo {
    0%, 100% { transform: perspective(700px) rotateY(-10deg) rotateX(3deg) translateY(0); }
    50%      { transform: perspective(700px) rotateY(10deg)  rotateX(-3deg) translateY(-4px); }
}

/* ══════════════════ 6) تفضيل تقليل الحركة ══════════════════ */
@media (prefers-reduced-motion: reduce) {
    .rd3-floor i,
    .rd3-gyro,
    .rd3-cube,
    .rd3-logo3d { animation: none !important; }
}

/* ══════════════════ 7) وضع الألوان الإجبارية + الاستجابة ══════════════════ */
@media (forced-colors: active) {
    .rd3-bg { display: none; }
}
@media (max-width: 760px) {
    /* الأشكال الطايرة بتتشال على الموبايل (أرضية الشبكة تكفي وتوفر أداء) */
    .rd3-gyro, .rd3-cube { display: none; }
    .rd3-floor { height: 42%; }
    .rd3-floor i { animation-duration: 24s; }
}