/* =====================================================================
 * login_fx.css — استايل شخصيات الأدوات المكتبية في صفحة الدخول (بريف ٦١)
 * ===================================================================== */

.lfx {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* كل شخصية */
.lfx-char {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    will-change: transform;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.lfx-char.lfx-held {
    cursor: grabbing;
}

/* طبقة الأثر (مسار القلم الرصاص والجاف) */
.lfx-trails {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.lfx-char svg {
    display: block;
    overflow: visible;   /* الرجلين والإيدين بيطلعوا برّه الـviewBox */
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

/* العيون والبؤبؤ */
.lfx-eye-pupil {
    will-change: transform;
    transform-origin: center;
}

/* مفيش «عوم» بعد ما بقى ليهم رجلين — الحركة كلها من الـJS (المشي + هزة الإيدين) */

/* إيقاف الطفو الذاتي أثناء وضع الخمول للتحكم الكامل عبر JS */
.lfx.lfx-is-idle .lfx-char {
    animation: none !important;
}

/* استجابة الشاشات (أحجام مناسبة للديسكتوب والموبايل) */
@media (max-width: 768px) {
    .lfx-char svg {
        transform: scale(0.75);
        transform-origin: center;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
    }
}

@media (max-width: 480px) {
    .lfx-char svg {
        transform: scale(0.60);
        transform-origin: center;
    }
}

/* دعم تقليل الحركة للمستخدمين اللي مفعلين Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .lfx-char {
        pointer-events: none !important;
        cursor: default !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    .lfx-eye-pupil {
        transform: none !important;
    }
}