/* ---------- صفحة الدخول (2026-10-23) ----------
   طلب المستخدم «صفحه ساده بتسجيل دخول بشعار الشركة وفيها شي متحرك بسيط»، ثم «غير مربع التسجيل»، ثم اختار
   «نصفين: لوحة كحلية + نموذج»: اللوحة بالشعار الأبيض (reef-group-logo-white-v2.png 557×374 بشفافية كاملة — من ملف
   الشعار الذي أرسله 2026-10-25 «الشعار فيها باهت»؛ السابق 175×122 بنصف شفافية يُمطّ لعرض 200) وموجتان ودائرتان تتحركان ببطء · النموذج على الأبيض بلا إطار.
   الحركة تتوقف لمن يطلب تقليلها من نظامه */
body.login-body { padding-inline-start: 0; background: var(--card); } /* لا قائمة جانبية هنا — كان الجسد يأخذ حشوها */
main.login-split { display: flex; min-height: 100vh; padding: 0; }

/* اللوحة الكحلية */
.login-brand { position: relative; overflow: hidden; flex: 1 1 50%; min-width: 0; box-sizing: border-box; padding: 48px 32px 120px; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; }
.login-brand-inner { position: relative; z-index: 2; text-align: center; animation: login-rise .7s ease-out both; }
.login-logo { display: block; width: 200px; max-width: 55vw; height: auto; margin: 0 auto 20px; }
.login-brand-title { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--white); opacity: .88; }

.login-orbs span { position: absolute; border-radius: 50%; animation: login-drift 20s ease-in-out infinite alternate; will-change: transform; }
.login-orbs .o1 { width: 420px; height: 420px; top: -140px; inset-inline-end: -140px; background: var(--white); opacity: .06; }
.login-orbs .o2 { width: 220px; height: 220px; top: 22%; inset-inline-start: -60px; border: 2px solid var(--white); opacity: .12; animation-duration: 16s; animation-delay: -4s; }
@keyframes login-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.1); } }

/* الموجتان: عرضهما ضعف اللوحة ونمطهما يتكرر كل نصف — فالانزلاق بمقدار النصف حلقة بلا انقطاع */
.login-wave { position: absolute; left: 0; bottom: 0; width: 200%; z-index: 1; animation: login-wave 18s linear infinite; }
.login-wave svg { display: block; width: 100%; height: 100%; }
.login-wave path { fill: var(--white); }
.login-wave.w1 { height: 150px; opacity: .08; }
.login-wave.w2 { height: 120px; opacity: .06; animation-duration: 26s; animation-direction: reverse; }
@keyframes login-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* النموذج — بلا مربع */
.login-form-side { flex: 1 1 50%; min-width: 0; box-sizing: border-box; padding: 48px 32px; display: flex; align-items: center; justify-content: center; background: var(--card); }
.login-form-side .login-wrap { width: 100%; max-width: 360px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; animation: login-rise .6s .1s ease-out both; }
.login-form-side .login-wrap h1 { margin: 0 0 26px; text-align: start; } /* بلا سطر تحية (طلب المستخدم 2026-10-23 «شيل مساء الخير») */
@keyframes login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* الجوال والآيباد العمودي: اللوحة فوق بارتفاع قصير والنموذج تحتها */
@media (max-width: 820px) {
  main.login-split { flex-direction: column; }
  .login-brand { flex: 0 0 auto; min-height: 250px; padding: 36px 24px 80px; }
  .login-logo { width: 160px; margin-bottom: 14px; }
  .login-wave.w1 { height: 90px; }
  .login-wave.w2 { height: 70px; }
  .login-form-side { flex: 1 1 auto; align-items: flex-start; padding: 32px 20px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-orbs span, .login-wave, .login-brand-inner, .login-form-side .login-wrap { animation: none; }
}