/* ==========================================================================
   طبقة التجربة التفاعلية لصفحة "منتجاتنا"
   1. تفاعلات بطاقة كل منتج (توهج يتبع الماوس + ميلان 3D + ظهور تدريجي)
   2. خط سير بصري (SVG) يمر عبر كل المنتجات وينبض عند وصوله لكل بطاقة

   التمرير السلس (Lenis) وتفعيل الشبكة العصبية الخفيفة (particles.js) مُفعّلان
   مسبقًا وبشكل عام على كل الموقع — هذا الملف يضيف فقط تفاعل البطاقات وخط السير.

   للتراجع الكامل: احذف هذا الملف + products-experience.js + الإضافات
   المعلّمة بـ "products-experience" في resources/views/pages/services.blade.php
   ========================================================================== */

/* --- 1. بطاقة المنتج ----------------------------------------------------- */

.products-experience .icon-box.block {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    border-radius: 10px;
    transition: box-shadow .4s ease;
}

.products-experience .icon-box.block::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .45s ease;
    background: radial-gradient(
        260px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(102, 67, 186, .14),
        rgba(162, 119, 224, .08) 40%,
        transparent 70%
    );
}

.products-experience .icon-box.block:hover::before,
.products-experience .icon-box.block:focus-within::before {
    opacity: 1;
}

.products-experience .icon-box.block:hover {
    box-shadow: 0 18px 40px -24px rgba(102, 67, 186, .5);
}

/* --- 2. خط السير البصري عبر المنتجات ------------------------------------- */

.products-experience .flow-wrap {
    position: relative;
}

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

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

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

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

.products-experience .flow-pulse {
    transition: transform .4s ease;
}

.products-experience .flow-pulse.is-pulsing {
    animation: productsFlowPulse .9s ease-out;
}

@keyframes productsFlowPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 67, 186, .35);
    }
    35% {
        transform: scale(1.015);
        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);
    }
}

@media (prefers-reduced-motion: reduce) {
    .products-experience .flow-pulse.is-pulsing {
        animation: none;
    }

    .products-experience .icon-box.block,
    .products-experience .icon-box.block::before {
        transition: none;
    }
}