/**
 * ═══════════════════════════════════════════════════════════════
 * لمسات الماسكوت — مشتركة بين صفحات الموقع
 * ═══════════════════════════════════════════════════════════════
 * ملف مستقل لا يمرّ بـ Vite ولا يلمس app.css:
 * تُحمِّله كل صفحة تستخدم شخصيات مداميك من قسم المحتوى
 * مباشرة. كل الألوان من متغيّرات الهوية نفسها (--color-*, --ink)
 * فتتبع الوضع الليلي تلقائياً. يحترم prefers-reduced-motion مثل
 * بقية الموقع.
 *
 * 🔴 حالات الاختباء الأولية مقيّدة بـ html.mk (يضيفها السكربت):
 * إذا تعطّل JS تظهر كل المحتويات عادية بلا حركة — لا صفحة بيضاء.
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── الظهور مع السكرول ─────────────────────────────────── */
html.mk [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
}
html.mk [data-reveal].mk-in { opacity: 1; transform: none; }

@keyframes mk-floaty {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}
@keyframes mk-pop {
    0%   { scale: .6; opacity: 0; }
    70%  { scale: 1.05; }
    100% { scale: 1; opacity: 1; }
}

/* ─── فقاعة الكلام ──────────────────────────────────────── */
.mk-bubble {
    background: var(--color-cream);
    color: var(--ink);
    border: 1.5px solid rgb(var(--glass-line));
    border-radius: 16px;
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.7;
    box-shadow: 0 12px 28px rgb(66 74 51 / .14);
    max-width: 230px;
    position: relative;
}
.mk-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    inset-inline-start: 26px;
    width: 14px; height: 14px;
    background: var(--color-cream);
    border-inline-start: 1.5px solid rgb(var(--glass-line));
    border-bottom: 1.5px solid rgb(var(--glass-line));
    transform: rotate(-45deg);
}

/* ─── المستشار يفكّر بجانب عنوان المداميك الثلاثة ───────── */
.mk-thinker-host {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 14px;
}
.mk-thinker {
    width: 104px;
    filter: drop-shadow(0 14px 16px rgb(66 74 51 / .28));
    transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .5s;
}
html.mk .mk-thinker {
    opacity: 0;
    transform: translateY(20%) rotate(-4deg);
}
html.mk .mk-thinker.mk-in { transform: none; opacity: 1; }
.mk-thinker-bubble {
    position: absolute;
    bottom: calc(100% - 10px);
    inset-inline-start: -6px;
}
html.mk .mk-thinker-bubble { opacity: 0; }
html.mk .mk-thinker-bubble.mk-in { animation: mk-pop .5s cubic-bezier(.34,1.56,.64,1) .25s both; }
@media (max-width: 1023px) {
    .mk-thinker-host { display: none; }
}

/* ─── مسرح الدعوة الختامية «شنوو ناطرين» — نفس الديمو ─────
   لوح زيتوني داكن: النص يمين والراكضون يسار */
.mk-stage {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(155deg, #4a5340, #424A33 55%, #313826);
    box-shadow: 0 30px 60px rgb(66 74 51 / .30);
    min-height: 24rem;
    display: flex;
    align-items: center;
}
.mk-stage::before {
    content: "";
    position: absolute;
    top: -30%;
    inset-inline-start: -10%;
    width: 40vw; height: 40vw;
    background: radial-gradient(circle, rgb(199 154 59 / .22), transparent 60%);
}
.mk-stage-txt { position: relative; z-index: 2; padding: 3.2rem 3rem; max-width: 34rem; }
.mk-stage-title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 900;
    color: #F6F2EA;
    line-height: 1.5;
    margin-bottom: .8rem;
}
.mk-stage-gold { color: #C79A3B; }
.mk-stage-body { color: rgb(246 242 234 / .8); font-size: .95rem; line-height: 1.9; }
.mk-stage-ghost {
    border: 1.5px solid rgb(246 242 234 / .5) !important;
    color: #F6F2EA !important;
    background: transparent;
}
.mk-stage .mk-runners {
    position: absolute;
    bottom: -14px;
    left: -8px;
    width: min(52%, 30rem);
    filter: drop-shadow(0 20px 24px rgb(0 0 0 / .35));
    transition: transform .9s cubic-bezier(.22,.61,.36,1) .15s, opacity .6s .15s;
    pointer-events: none;
}
html.mk .mk-runners {
    opacity: 0;
    transform: translateX(35%);
}
html.mk .mk-runners.mk-in { transform: none; opacity: 1; }
@media (max-width: 1023px) {
    .mk-stage { flex-direction: column; }
    .mk-stage-txt { padding: 2.5rem 1.8rem 0; }
    .mk-stage .mk-runners { position: static; width: 100%; }
}

/* ─── الماسكوت المرافق ─────────────────────────────────── */
.mk-companion {
    position: fixed;
    bottom: 20px;
    inset-inline-start: 20px;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.mk-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-gold);
    background: var(--color-sand);
    box-shadow: 0 12px 26px rgb(66 74 51 / .28);
    flex-shrink: 0;
    transform: translateY(84px);
    opacity: 0;
    transition: .5s cubic-bezier(.34,1.56,.64,1);
}
.mk-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 4%;
    transform: scale(2.3);
    transform-origin: 50% 4%;
}
/* لوحة الكلام داكنة ثابتة بالوضعين — مثل لوحة الخلية الآمنة */
.mk-say {
    background: #424A33;
    color: #F6F2EA;
    border-radius: 14px 14px 14px 4px;
    padding: 9px 15px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.7;
    max-width: 210px;
    box-shadow: 0 12px 26px rgb(66 74 51 / .26);
    opacity: 0;
    transform: translateY(10px) scale(.92);
    transform-origin: bottom left;
    transition: .35s cubic-bezier(.34,1.56,.64,1);
}
.mk-companion.mk-show .mk-avatar { transform: none; opacity: 1; }
.mk-companion.mk-show .mk-say { opacity: 1; transform: none; transition-delay: .12s; }
@media (max-width: 639px) {
    .mk-say { display: none; }
    .mk-avatar { width: 54px; height: 54px; }
}

/* ─── تقليل الحركة: كل شيء يظهر بلا حركة ───────────────── */
@media (prefers-reduced-motion: reduce) {
    html.mk [data-reveal], html.mk .mk-thinker, html.mk .mk-runners,
    html.mk .mk-thinker-bubble {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .mk-hero-fig, .mk-hero-bubble, .mk-hero-fig-alt, .mk-page-fig,
    .mk-poster { animation: none !important; opacity: 1 !important; transition: none !important; }
}

/* ─── بوستر داخل الأقسام — من حملة الانستغرام ────────────
   إطار ذهبي شفاف لا الكريمي: --color-cream ينقلب داكناً
   بالوضع الليلي فيختفي الإطار على الصورة الداكنة */
.mk-poster {
    border: 6px solid rgb(var(--glass-line));
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 34px 70px rgb(66 74 51 / .18);
    transition: transform .5s cubic-bezier(.22,.61,.36,1),
                box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
.mk-poster:hover {
    transform: translateY(-6px);
    box-shadow: 0 44px 84px rgb(66 74 51 / .24);
}
.mk-poster img { display: block; width: 100%; height: auto; }

/* ميلان خفيف للبوسترات — نفس روح الديمو: يستقيم عند التحويم */
.mk-tilt-r { transform: rotate(2deg); }
.mk-tilt-l { transform: rotate(-2deg); }
.mk-tilt-r:hover, .mk-tilt-l:hover { transform: rotate(0) translateY(-6px); }

/* ─── تقسيمة مناصفة: البوستر يمين والكلام يسار ───────────
   مثل الديمو بالضبط. CSS خام لأن كلاسات Tailwind الجديدة
   لا تُترجم للحزمة المبنية أثناء عمل الجلسة الأخرى.
   🔴 minmax(0,…) إلزامي: مسار auto يقيسه المتصفح على عرض
   الصورة الأصلي (1000px) فيفيض عن شاشة الجوال ويُقصّ البوستر */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 1024px) {
    .mk-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}

/* ─── قسم المشكلة — بوستران متراكبان (كبير + مصغّر مائل) ── */
.mk-problem-art { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; }
.mk-problem-art .mk-mini {
    position: absolute;
    bottom: -1.6rem;
    inset-inline-start: -1.4rem;
    width: 44%;
    z-index: 2;
}
@media (max-width: 1023px) {
    .mk-problem-art { margin-block: 1.5rem 2rem; }
}

/* ─── شخصية مقطوعة بجانب ترويسة الصفحة الداخلية ──────────
   الموضع هنا لا بكلاسات Tailwind: الحزمة المبنية محفوظة
   لجلسة أخرى، وأي كلاس جديد لن يُترجَم */
.mk-page-fig {
    position: absolute;
    bottom: 0;
    inset-inline-end: clamp(1rem, 6vw, 5rem);
    height: 9.5rem;
    filter: drop-shadow(0 20px 22px rgb(66 74 51 / .28));
    animation: mk-floaty 6s ease-in-out infinite;
}
.mk-page-fig img { display: block; width: auto; height: 100%; }
/* الفقاعة يمين الشخصية (جهة وسط الصفحة) لا فوقها: سطر الـ eyebrow
   الإنجليزي يجلس أعلى يسار الترويسة، والفقاعة العلوية كانت تغطيه.
   تُثبَّت بـ inset-inline-end حتى تمتد باتجاه اليمين في RTL */
.mk-page-fig .mk-bubble {
    position: absolute;
    bottom: 58%;
    inset-inline-end: calc(100% - 18px);
    white-space: nowrap;
}
.mk-page-fig .mk-bubble::after {
    inset-inline-start: auto;
    inset-inline-end: 22px;
}
/* الترويسة ضيّقة على الشاشات الصغيرة — الشخصية تختفي بدل ما تزاحم */
@media (max-width: 1023px) {
    .mk-page-fig { display: none; }
}