/* مشهد الحافلة المصغّر المشترك (صفحة البحث، تسجيل الدخول، دخول الموظفين).
نهاري/ليلي بالكامل بلا جافاسكربت: --night متغير مسجَّل (@property) فينتقل بسلاسة عند تبديل data-bs-theme.
يتطلب في الصفحة. */
@property --night { syntax: ''; inherits: true; initial-value: 1; }
@property --wr { syntax: ''; inherits: true; initial-value: 0deg; }
.mscene { --night: 1; --d-top: #2368a8; --d-bot: #9bd3ec; --n-top: #050f0a; --n-bot: #123c2c; position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: --night .9s ease; direction: ltr; contain: layout paint; }
html:not([data-bs-theme="dark"]) .mscene { --night: 0; }
.ms-sky { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--n-top) calc(var(--night) * 100%), var(--d-top)) 0%, color-mix(in srgb, var(--n-bot) calc(var(--night) * 100%), var(--d-bot)) 100%); }
.ms-stars { position: absolute; inset: 0 0 35% 0; opacity: var(--night); background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 28% 46%, #fff 50%, transparent 52%), radial-gradient(1.8px 1.8px at 44% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 61% 34%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 76% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 90% 40%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 6% 58%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 68% 60%, #fff 50%, transparent 52%); animation: msTw 5s ease-in-out infinite alternate; }
@keyframes msTw { from { filter: brightness(.7); } to { filter: brightness(1.25); } }
.ms-moon { position: absolute; right: 12%; top: 14%; width: clamp(40px, 6vw, 70px); aspect-ratio: 1; border-radius: 50%; opacity: var(--night); background: radial-gradient(circle at 35% 35%, #fffbe8, #e9e3c6 55%, #b9b497 100%); box-shadow: 0 0 40px 10px rgba(255,248,200,.3), 0 0 110px 36px rgba(255,248,200,.1); }
.ms-sun { position: absolute; right: 10%; top: 6%; width: clamp(120px, 22vw, 260px); aspect-ratio: 1; opacity: calc(1 - var(--night)); background: radial-gradient(circle, #fffbe0 0%, #fff0a0 20%, #f6d760 34%, rgba(246,215,96,.35) 52%, rgba(246,215,96,0) 70%); }
.ms-clouds { position: absolute; inset: 0; opacity: calc(1 - var(--night)); }
.ms-clouds i { position: absolute; width: 240px; height: 84px; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='110' viewBox='0 0 320 110'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='90' cy='74' rx='80' ry='30'/%3E%3Cellipse cx='150' cy='54' rx='62' ry='38'/%3E%3Cellipse cx='215' cy='70' rx='72' ry='32'/%3E%3Cellipse cx='120' cy='80' rx='100' ry='24'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; animation: msCloud 90s linear infinite; will-change: transform; }
.ms-clouds i:nth-child(1) { top: 14%; left: -10%; } .ms-clouds i:nth-child(2) { top: 36%; left: 45%; width: 170px; height: 60px; opacity: .6; animation-duration: 120s; animation-delay: -50s; }
@keyframes msCloud { from { transform: translate3d(-20vw, 0, 0); } to { transform: translate3d(120vw, 0, 0); } }
.ms-layer { position: absolute; left: 0; right: 0; overflow: hidden; }
.ms-layer > i { position: absolute; top: 0; bottom: 0; left: calc(var(--tw) * -1); width: calc(100% + var(--tw)); background-repeat: repeat-x; background-position: bottom left; animation: msScroll var(--dur) linear infinite; will-change: transform; }
@keyframes msScroll { to { transform: translate3d(var(--tw), 0, 0); } }
.ms-layer.far { --tw: 900px; --dur: 90s; bottom: 17%; height: 42%; filter: brightness(calc(1.9 - var(--night) * .9)); }
.ms-layer.mid { --tw: 700px; --dur: 50s; bottom: 15%; height: 36%; filter: brightness(calc(1.5 - var(--night) * .5)); }
.ms-layer.far > i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200'%3E%3Cpath d='M0 200 V120 Q60 70 130 110 T260 90 T400 120 T540 70 T700 110 T820 85 T900 120 V200 Z' fill='%230f3d2c' opacity='.9'/%3E%3C/svg%3E"); background-size: 900px 100%; }
.ms-layer.mid > i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='200' viewBox='0 0 700 200'%3E%3Cg fill='%230a2a1e'%3E%3Crect x='20' y='120' width='60' height='80'/%3E%3Crect x='90' y='100' width='44' height='100'/%3E%3Crect x='140' y='130' width='70' height='70'/%3E%3Crect x='330' y='110' width='56' height='90'/%3E%3Crect x='392' y='135' width='64' height='65'/%3E%3Crect x='560' y='105' width='50' height='95'/%3E%3Crect x='616' y='125' width='60' height='75'/%3E%3C/g%3E%3Cg fill='%23071a12'%3E%3Cpath d='M250 200 V110 M250 112 q-30 -8 -44 8 M250 112 q30 -8 44 8 M250 112 q-18 -26 -38 -22 M250 112 q18 -26 38 -22' stroke='%23071a12' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M480 200 V120 M480 122 q-26 -8 -40 6 M480 122 q26 -8 40 6 M480 122 q-16 -22 -34 -18 M480 122 q16 -22 34 -18' stroke='%23071a12' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23f3cd5a' opacity='.8'%3E%3Crect x='30' y='132' width='8' height='10'/%3E%3Crect x='100' y='116' width='8' height='10'/%3E%3Crect x='340' y='124' width='8' height='10'/%3E%3Crect x='570' y='118' width='8' height='10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 700px 100%; }
.ms-road { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(180deg, color-mix(in srgb, #14201a calc(var(--night) * 100%), #58665e), color-mix(in srgb, #0a120e calc(var(--night) * 100%), #3d4943)); border-top: 3px solid rgba(255,255,255,.12); }
.ms-road::before { content: ''; position: absolute; left: -160px; right: 0; top: 48%; height: 4px; background: repeating-linear-gradient(to right, #f3dc92 0 70px, transparent 70px 140px); animation: msLane 1.4s linear infinite; opacity: .9; }
@keyframes msLane { to { transform: translate3d(140px, 0, 0); } }
.ms-fade { position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--ms-fade, transparent)); }
.ms-bus { position: absolute; left: 50%; bottom: 7%; width: clamp(240px, 38vw, 430px); margin-left: calc(clamp(240px, 38vw, 430px) / -2); height: auto; overflow: visible; filter: drop-shadow(0 12px 16px rgba(0,0,0,.4)); --beam: 1; --spin: .55; animation: msWr .5s linear infinite, msBob 1.1s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.ms-bus.enter { animation: msIn 2.2s cubic-bezier(.2,.8,.2,1) both, msWr .5s linear infinite, msBob 1.1s ease-in-out 2.2s infinite alternate; }
@keyframes msWr { to { --wr: 360deg; } }
@keyframes msBob { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, -2px, 0) rotate(.12deg); } }
@keyframes msIn { from { transform: translate3d(70vw, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.ms-dust { position: absolute; left: calc(50% + clamp(240px, 38vw, 430px) * .32); bottom: 8%; width: 100px; height: 50px; }
.ms-dust i { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, rgba(220,205,170,.5), rgba(220,205,170,0) 70%); animation: msDust 1.6s ease-out infinite; }
.ms-dust i:nth-child(2) { animation-delay: .55s; } .ms-dust i:nth-child(3) { animation-delay: 1.1s; }
@keyframes msDust { 0% { transform: translate3d(0,0,0) scale(.4); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate3d(60px,-22px,0) scale(2.2); opacity: 0; } }
/* عناصر داخل