/* ════════════════════════════════════════════════════════════════
   brand-loader.css — شعار متحرك موحّد لحالات التحميل
   ────────────────────────────────────────────────────────────────
   يُستعمل عبر <BrandLoader /> أو بكتابة البنية يدوياً في صفحات Razor
   التي لا تمر بـ Blazor (مثل _Host.cshtml).

   الشعار صورة نقطية (PNG من BrandingSettings)، فلا يمكن تحريك مساراته
   كما في SVG. الحل: حلقة SVG تدور حوله + كنس ضوئي يتبع صورة الشعار
   نفسها عبر mask-image، فيبدو الوهج داخل حدود الشعار لا في مربّعه.

   كل الألوان من توكنات الثيم — لا شعار ولا لون مثبّت لعلامة بعينها.
   ════════════════════════════════════════════════════════════════ */

.brand-loader {
    --bl-size: 88px;
    --bl-ring-width: 3;
    --bl-gap: var(--space-4, 16px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bl-gap);
    text-align: center;
}

/* ── المسرح: الحلقة + الشعار + الكنس الضوئي فوق بعضها ── */
.brand-loader__stage {
    position: relative;
    width: var(--bl-size);
    height: var(--bl-size);
    display: grid;
    place-items: center;
}

/* ── الحلقة الدوّارة ── */
.brand-loader__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: bl-rotate 2s linear infinite;
}

.brand-loader__track,
.brand-loader__arc {
    fill: none;
    stroke-width: var(--bl-ring-width);
    stroke-linecap: round;
}

.brand-loader__track {
    stroke: var(--secondary-color, #dececc);
    opacity: 0.55;
}

.brand-loader__arc {
    stroke: var(--primary-color, #18181a);
    /* محيط الدائرة عند r=44 ≈ 276.5 */
    stroke-dasharray: 20 257;
    animation: bl-dash 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* ── الشعار ── */
.brand-loader__logo {
    position: relative;
    width: 58%;
    height: 58%;
    object-fit: contain;
    animation: bl-breathe 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* ── الكنس الضوئي: يأخذ شكل الشعار عبر القناع ── */
.brand-loader__shimmer {
    position: absolute;
    width: 58%;
    height: 58%;
    pointer-events: none;
    background-image: linear-gradient(
        115deg,
        transparent 38%,
        rgba(var(--secondary-rgb, 222, 206, 229), 0.95) 50%,
        transparent 62%
    );
    background-size: 260% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: var(--brand-loader-logo);
    mask-image: var(--brand-loader-logo);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: bl-shimmer 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* بلا شعار (لم تُضبط --brand-loader-logo) لا معنى للقناع — يُخفى الكنس */
.brand-loader:not([style*="--brand-loader-logo"]) .brand-loader__shimmer {
    display: none;
}

/* ── النص ── */
.brand-loader__label {
    margin: 0;
    color: var(--text-secondary, #5c5c66);
    font-size: 0.9375rem;
    font-weight: 600;
}

.brand-loader__hint {
    margin: calc(var(--space-1, 4px) * -1) 0 0 0;
    color: var(--text-muted, #9a9aa5);
    font-size: 0.8125rem;
}

/* ── المقاسات ── */
/* xs: داخل زر أو شريط ضيّق — الشعار يُخفى لأنه غير مقروء بهذا المقاس */
.brand-loader--xs { --bl-size: 20px; --bl-ring-width: 8; --bl-gap: var(--space-2, 8px); }
.brand-loader--xs .brand-loader__logo,
.brand-loader--xs .brand-loader__shimmer { display: none; }
.brand-loader--xs .brand-loader__track { opacity: 0.35; }

.brand-loader--sm { --bl-size: 48px; --bl-ring-width: 4; --bl-gap: var(--space-2, 8px); }
.brand-loader--sm .brand-loader__label { font-size: 0.8125rem; }
.brand-loader--md { --bl-size: 88px; }
.brand-loader--lg { --bl-size: 132px; --bl-ring-width: 2.5; --bl-gap: var(--space-5, 20px); }
.brand-loader--lg .brand-loader__label { font-size: 1.0625rem; }

/* ── طبقة تغطي الشاشة ──
   خلفية معتمة صريحة لا زجاجية (لا blur) التزاماً بقواعد التصميم. */
.brand-loader--overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--background-primary, #fff);
    /* يظهر بهدوء بدل الوميض المفاجئ */
    animation: bl-fade-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* نسخة تغطّي الحاوية الأقرب فقط (بطاقة/لوحة) بدل الشاشة كاملة */
.brand-loader--cover {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--background-primary, #fff);
    animation: bl-fade-in 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ── سطر أفقي مدمج داخل زر أو شريط ── */
.brand-loader--inline {
    display: inline-flex;
    flex-direction: row;
    gap: var(--space-2, 8px);
    vertical-align: middle;
}

/* فوق سطح ملوّن (زر أساسي مثلاً) اللون الأساسي غير مرئي — نتبع لون النص. */
.brand-loader--on-accent .brand-loader__arc { stroke: currentColor; }
.brand-loader--on-accent .brand-loader__track { stroke: currentColor; opacity: 0.3; }

@keyframes bl-rotate {
    to { transform: rotate(360deg); }
}

@keyframes bl-dash {
    0%   { stroke-dasharray: 18 259; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 155 122; stroke-dashoffset: -42; }
    100% { stroke-dasharray: 18 259; stroke-dashoffset: -276; }
}

@keyframes bl-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes bl-shimmer {
    0%       { background-position: 130% 0; }
    55%, 100% { background-position: -30% 0; }
}

@keyframes bl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════
   الشعار الساكن في الشاشات العادية (تسجيل الدخول مثلاً):
   نبضة خفيفة جداً + كنس ضوئي بطيء — حضور لا إلهاء.
   ════════════════════════════════════════════════════════════════ */
.brand-logo--animated {
    position: relative;
    animation: bl-breathe 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* القناع يقيس صندوق الغلاف، فيجب أن يطابق صندوق الصورة تماماً. inline-grid
   يلغي فراغ خط الأساس، وتصفير الهوامش يمنع أي قاعدة أخرى من إطالة الصندوق. */
.brand-logo-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    line-height: 0;
}

/* الانتقاء ثلاثي الأصناف + !important مقصودان: قواعد الشعار موزّعة على أوراق
   تُحمَّل بعد هذه — مثل mobile-screens-2026.css التي تفرض
   `.login-form-wrap .brand-logo { margin: 0 auto var(--space-3) !important }`
   على مقاسات الجوال — فيعود الهامش ويصير صندوق الغلاف أطول من الصورة فينزاح
   القناع عنها. رفع الأولوية هنا يحسم التتالي بلا تعديل تلك الأوراق.
   التوسيط انتقل إلى place-items في الغلاف، والمسافة الخارجية مسؤوليته. */
.brand-logo-wrap > .brand-logo.brand-logo--animated {
    margin: 0 !important;
}

.brand-logo-wrap .brand-loader__shimmer {
    inset: 0;
    width: 100%;
    height: 100%;
    animation-duration: 5s;
}

/* ════════════════════════════════════════════════════════════════
   احترام تفضيل تقليل الحركة: لا دوران ولا نبض ولا كنس — تبقى
   الحلقة قوساً ساكناً يدل على الانتظار.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .brand-loader__ring,
    .brand-loader__arc,
    .brand-loader__logo,
    .brand-loader__shimmer,
    .brand-logo--animated,
    .brand-loader--overlay,
    .brand-loader--cover {
        animation: none !important;
    }

    .brand-loader__shimmer {
        display: none;
    }

    .brand-loader__arc {
        stroke-dasharray: 70 207;
    }
}