/* ══════════════════════════════════════════════════════════════
   Medu — أنيميشن خطوات «كيف يعمل»
   الخطوات تظهر واحدة واحدة عند الوصول إليها بالتمرير
   v1.0 · 2026
   ══════════════════════════════════════════════════════════════ */

.steps-grid-4 {
    position: relative;
}

/* ───────── الخط الواصل بين الدوائر (يُرسم من اليمين لليسار) ───────── */
.steps-grid-4.steps-anim::before {
    content: "";
    position: absolute;
    top: 37px;                      /* منتصف الدائرة */
    right: 12.5%;
    left: 12.5%;
    height: 3px;
    border-radius: 3px;
    background: repeating-linear-gradient(to left,
                var(--primary-color) 0 12px, transparent 12px 24px);
    opacity: .28;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .2s;
    pointer-events: none;
    z-index: 0;
}

.steps-grid-4.steps-anim.is-in::before {
    transform: scaleX(1);
}

/* ───────── البطاقة ───────── */
.steps-grid-4.steps-anim .step-box {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .65s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}

.steps-grid-4.is-in .step-box {
    opacity: 1;
    transform: none;
}

/* ───────── الدائرة: تكبر بنطّة خفيفة ───────── */
.steps-grid-4.steps-anim .step-circle {
    position: relative;
    opacity: 0;
    transform: scale(.4) rotate(-30deg);
    transition: opacity .45s ease,
                transform .75s cubic-bezier(.34, 1.56, .64, 1),
                border-color .6s ease,
                box-shadow .6s ease;
    border-color: rgba(123, 67, 151, .25);
    box-shadow: 0 6px 14px rgba(123, 67, 151, .06);
}

.steps-grid-4.is-in .step-circle {
    opacity: 1;
    transform: none;
    border-color: var(--primary-color);
    box-shadow: 0 10px 24px rgba(123, 67, 151, .12);
}

/* حلقة تتوسّع مرة واحدة حول الدائرة */
.steps-grid-4.steps-anim .step-circle::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    opacity: 0;
    pointer-events: none;
}

.steps-grid-4.is-in .step-circle::after {
    animation: meduStepRing 1.15s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes meduStepRing {
    0%   { transform: scale(.72); opacity: .75; }
    70%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}

/* ───────── النص: يطلع بعد الدائرة ───────── */
.steps-grid-4.steps-anim .step-box h4,
.steps-grid-4.steps-anim .step-box p {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

.steps-grid-4.is-in .step-box h4,
.steps-grid-4.is-in .step-box p {
    opacity: 1;
    transform: none;
}

/* ───────── التتابع: خطوة ورا خطوة ───────── */
.steps-grid-4.is-in .step-box:nth-child(1) { transition-delay: .10s; }
.steps-grid-4.is-in .step-box:nth-child(2) { transition-delay: .28s; }
.steps-grid-4.is-in .step-box:nth-child(3) { transition-delay: .46s; }
.steps-grid-4.is-in .step-box:nth-child(4) { transition-delay: .64s; }
.steps-grid-4.is-in .step-box:nth-child(5) { transition-delay: .82s; }

.steps-grid-4.is-in .step-box:nth-child(1) .step-circle { transition-delay: .10s; }
.steps-grid-4.is-in .step-box:nth-child(2) .step-circle { transition-delay: .28s; }
.steps-grid-4.is-in .step-box:nth-child(3) .step-circle { transition-delay: .46s; }
.steps-grid-4.is-in .step-box:nth-child(4) .step-circle { transition-delay: .64s; }
.steps-grid-4.is-in .step-box:nth-child(5) .step-circle { transition-delay: .82s; }

.steps-grid-4.is-in .step-box:nth-child(1) .step-circle::after { animation-delay: .10s; }
.steps-grid-4.is-in .step-box:nth-child(2) .step-circle::after { animation-delay: .28s; }
.steps-grid-4.is-in .step-box:nth-child(3) .step-circle::after { animation-delay: .46s; }
.steps-grid-4.is-in .step-box:nth-child(4) .step-circle::after { animation-delay: .64s; }
.steps-grid-4.is-in .step-box:nth-child(5) .step-circle::after { animation-delay: .82s; }

.steps-grid-4.is-in .step-box:nth-child(1) h4 { transition-delay: .26s; }
.steps-grid-4.is-in .step-box:nth-child(2) h4 { transition-delay: .44s; }
.steps-grid-4.is-in .step-box:nth-child(3) h4 { transition-delay: .62s; }
.steps-grid-4.is-in .step-box:nth-child(4) h4 { transition-delay: .80s; }
.steps-grid-4.is-in .step-box:nth-child(5) h4 { transition-delay: .98s; }

.steps-grid-4.is-in .step-box:nth-child(1) p { transition-delay: .34s; }
.steps-grid-4.is-in .step-box:nth-child(2) p { transition-delay: .52s; }
.steps-grid-4.is-in .step-box:nth-child(3) p { transition-delay: .70s; }
.steps-grid-4.is-in .step-box:nth-child(4) p { transition-delay: .88s; }
.steps-grid-4.is-in .step-box:nth-child(5) p { transition-delay: 1.06s; }

/* ───────── الموبايل: الخط الواصل رأسي ───────── */
@media (max-width: 767.98px) {
    .steps-grid-4.steps-anim::before {
        top: 37px;
        bottom: 37px;
        right: 50%;
        left: auto;
        width: 3px;
        height: auto;
        margin-right: -1.5px;
        background: repeating-linear-gradient(to bottom,
                    var(--primary-color) 0 12px, transparent 12px 24px);
        transform: scaleY(0);
        transform-origin: top center;
        transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .2s;
    }

    .steps-grid-4.steps-anim.is-in::before {
        transform: scaleY(1);
    }
}

/* ───────── احترام تفضيل تقليل الحركة ───────── */
@media (prefers-reduced-motion: reduce) {
    .steps-grid-4 .step-box,
    .steps-grid-4 .step-circle,
    .steps-grid-4 .step-box h4,
    .steps-grid-4 .step-box p {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .steps-grid-4::before {
        transform: none !important;
        transition: none !important;
    }

    .steps-grid-4 .step-circle::after {
        animation: none !important;
    }
}