/* ==========================================================================
   طبقة التجربة التفاعلية لصفحة "عن راسخ"
   1. خلفية الشبكة العصبية (Three.js / WebGL)
   2. تفاعلات بطاقات المحتوى (توهج يتبع الماوس + ميلان ثلاثي الأبعاد)
   3. خط السير البصري (SVG Path) + نبضة البطاقات
   4. تأثير فك تشفير النصوص

   للتراجع الكامل: احذف هذا الملف + about-experience.js + الأسطر المضافة
   في resources/views/pages/about.blade.php (المعلّمة بـ about-experience).
   ========================================================================== */

/* --- 1. خلفية الشبكة العصبية ------------------------------------------- */

.neural-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.neural-bg.is-ready {
    opacity: 1;
}

.neural-bg canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* إظهار الخلفية من خلف أقسام الصفحة */
.about-experience .about-2,
.about-experience .features-section,
.about-experience .solutions-section {
    background: transparent;
}

.about-experience > section,
.about-experience .flow-wrap {
    position: relative;
    z-index: 1;
}

/* --- 2. بطاقات المحتوى -------------------------------------------------- */

.about-experience .about-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transition: border-color .4s ease, box-shadow .4s ease;
}

/* التوهج الشعاعي الديناميكي الذي يتبع مؤشر الماوس */
.about-experience .about-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(
        220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(102, 67, 186, .18),
        rgba(162, 119, 224, .10) 40%,
        transparent 70%
    );
}

.about-experience .about-item:hover::before,
.about-experience .about-item:focus-within::before {
    opacity: 1;
}

.about-experience .about-item:hover {
    border-bottom-color: var(--primary-color, #6643BA);
    box-shadow: 0 18px 40px -22px rgba(102, 67, 186, .55);
}

/* خطوط دقيقة تشبه اللوحات الإلكترونية */
.about-experience .about-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(102, 67, 186, .05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(102, 67, 186, .05) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* --- 3. خط السير البصري ------------------------------------------------- */

.flow-wrap {
    position: relative;
}

.flow-timeline {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.flow-timeline svg {
    display: block;
    width: 100%;
    height: 100%;
}

.flow-timeline .flow-path {
    fill: none;
    stroke: url(#flowGradient);
    stroke-width: 2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(102, 67, 186, .35));
}

.flow-wrap > section {
    position: relative;
    z-index: 1;
}

/* نبضة البطاقة عند وصول الخط إليها */
.flow-pulse {
    position: relative;
    transition: transform .4s ease;
}

.flow-pulse.is-pulsing {
    animation: flowPulse .9s ease-out;
}

@keyframes flowPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 67, 186, .35);
    }
    35% {
        transform: scale(1.025);
        box-shadow: 0 0 0 10px rgba(102, 67, 186, .10);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 67, 186, 0);
    }
}

/* --- 4. فك تشفير النصوص ------------------------------------------------- */

.scramble-target {
    font-variant-numeric: tabular-nums;
}

.scramble-target.is-decoding {
    color: var(--primary-color, #6643BA);
}

/* --- إتاحة الوصول: احترام تفضيل تقليل الحركة ---------------------------- */

@media (prefers-reduced-motion: reduce) {
    .neural-bg {
        display: none;
    }

    .flow-pulse.is-pulsing {
        animation: none;
    }

    .about-experience .about-item,
    .about-experience .about-item::before {
        transition: none;
    }
}