/* ═══════════════════════════════════════════════════════════════════
   TIK Mail — motion.css (المرحلة 0: توكنات + انتقالات الضوابط)
   مدد TIK مسندة لجدول Material 3 (صغير 100-200ms / متوسط 300-400 / كبير 450+)
   قاعدة TIK: fade + انزلاق 2-6px فقط — لا نوابض ولا قفز.
   المرحلة 4 تضيف: @starting-style للقوائم وView Transitions للوحات.
   ═══════════════════════════════════════════════════════════════════ */

/* الضوابط: لون/حد/ظل خلال 140ms (transition-control في النظام) */
.btn,
button,
.listing li > a,
#taskmenu a,
.form-control,
input,
select {
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color     var(--duration-fast) var(--ease-standard),
        color            var(--duration-fast) var(--ease-standard),
        box-shadow       var(--duration-fast) var(--ease-standard);
}

/* البطاقات والصفوف: 220ms */
#login-form,
.ui-dialog {
    transition:
        box-shadow  var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard);
}

/* تخفيض لا إلغاء (إرشاد MDN): إبقاء fade قصير جدًا بدل الحركة */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ═══ المرحلة 3/4 — انتقالات المستندات (Baseline: same-doc 2025-10) ═══ */

/* بين الصفحات (task→task): بدل الوميض الأبيض — fade+انزلاق 4px
   (Chrome/Safari؛ Firefox يتجاهل بسلام) */
@media not (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 140ms var(--ease-in) both tik-vt-out;
    }

    ::view-transition-new(root) {
        animation: 220ms var(--ease-out) both tik-vt-in;
    }
}

@keyframes tik-vt-out {
    to { opacity: 0; }
}

@keyframes tik-vt-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* القوائم المنبثقة: ظهور ناعم بلا JS — @starting-style (Baseline 2024-08) */
@media not (prefers-reduced-motion: reduce) {
    .popover.show {
        transition:
            opacity   var(--duration-fast)   var(--ease-out),
            transform var(--duration-fast)   var(--ease-out);

        @starting-style {
            opacity: 0;
            transform: translateY(-4px);
        }
    }
}

/* الهيكل العظمي: نبض هادئ (لا لمعان متحرك صاخب — قاعدة TIK) */
.tik-skeleton {
    animation: tik-sk-pulse 1.1s var(--ease-standard) infinite alternate;
}

.tik-skeleton.leaving {
    opacity: 0;
    transition: opacity 150ms var(--ease-in);
}

@keyframes tik-sk-pulse {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}