/* ===========================================================================
 *  انتقالات ناعمة بين صفحات الموقع
 * ---------------------------------------------------------------------------
 *  • تعتمد أولاً على View Transitions المدمجة في المتصفحات الحديثة.
 *  • وللمتصفحات التي لا تدعمها، بديل بـ CSS + JS (public/js/page-transitions.js).
 *  • تُلغى تماماً إن فعّل المستخدم "تقليل الحركة" في نظامه.
 *
 *  ملاحظة عن المدد: النسخة الأولى كانت سريعة جداً (0.22ث خروج / 0.32ث دخول)
 *  فتبدو كقفزة مفاجئة لا كانتقال. صارت الآن أبطأ وبانزلاق واضح، ومع منحنى
 *  حركة ناعم (ease-out قوي) يبدأ سريعاً وينتهي بهدوء.
 * ========================================================================= */

/* ---------- ١) المتصفحات الحديثة: View Transitions ---------- */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {

    /* مدّة الانتقال الكلية */
    ::view-transition-group(root) {
        animation-duration: .78s;
    }

    /* الصفحة المغادِرة: تتلاشى وتنزلق قليلاً لليمين (اتجاه القراءة العربي) */
    ::view-transition-old(root) {
        animation: irtikaz-slide-out .50s cubic-bezier(.42, 0, .55, 1) both;
    }

    /* الصفحة القادمة: تنزلق من اليسار مع تلاشٍ للداخل */
    ::view-transition-new(root) {
        animation: irtikaz-slide-in .78s cubic-bezier(.45, 0, .35, 1) both;
    }
}

@keyframes irtikaz-slide-out {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 0; transform: translate3d(3.5%, 0, 0) scale(.985); }
}

@keyframes irtikaz-slide-in {
    from { opacity: 0; transform: translate3d(-6%, 0, 0) scale(.988); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ---------- ٢) البديل للمتصفحات الأقدم ---------- */
.pt-enabled body {
    animation: irtikaz-page-in .72s cubic-bezier(.45, 0, .35, 1) both;
}

.pt-enabled.pt-leaving body {
    animation: irtikaz-page-out .46s cubic-bezier(.42, 0, .55, 1) both;
}

@keyframes irtikaz-page-in {
    from { opacity: 0; transform: translate3d(-6%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes irtikaz-page-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(3.5%, 0, 0); }
}

/* ---------- ٣) ظهور تدريجي متتابع لعناصر الصفحة ----------
   بدل أن يظهر محتوى الصفحة دفعة واحدة، تدخل الأقسام الرئيسية تباعاً
   بفارق بسيط بينها فيبدو الانتقال متدفّقاً لا مفاجئاً. */
@media (prefers-reduced-motion: no-preference) {
    .pt-stagger > * {
        animation: irtikaz-rise .70s cubic-bezier(.45, 0, .35, 1) both;
    }
    .pt-stagger > *:nth-child(1) { animation-delay: .04s }
    .pt-stagger > *:nth-child(2) { animation-delay: .10s }
    .pt-stagger > *:nth-child(3) { animation-delay: .16s }
    .pt-stagger > *:nth-child(4) { animation-delay: .22s }
    .pt-stagger > *:nth-child(5) { animation-delay: .28s }
    .pt-stagger > *:nth-child(n+6) { animation-delay: .34s }
}

@keyframes irtikaz-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- ٤) شريط تقدّم رفيع أثناء الانتقال ---------- */
.pt-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 3px;
    inline-size: 0;
    background: linear-gradient(90deg, #006837, #f59e0b);
    box-shadow: 0 0 12px rgba(0, 104, 55, .55);
    z-index: 2147483647;
    opacity: 0;
    transition: inline-size .45s cubic-bezier(.45, 0, .35, 1), opacity .3s ease;
    pointer-events: none;
    border-end-end-radius: 3px;
}
.pt-bar.is-active { opacity: 1; }

/* ---------- ٥) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
    .pt-enabled body,
    .pt-enabled.pt-leaving body,
    .pt-stagger > * {
        animation: none !important;
    }
    .pt-bar { display: none !important; }

    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}