/* v2.5: illustration puppet, separate startup sequence, and accessible motion. */
.login-card{overflow:visible}.login-stage{overflow:visible;min-height:550px;padding:0;border-radius:26px 0 0 26px;isolation:isolate}
.login-stage::before{display:none}.guard25-portal{position:absolute;inset:105px 35px 20px;border-radius:48% 48% 38% 38%;background:radial-gradient(ellipse at 50% 35%,#f6f6e9,#d7e4d4 72%);border:1px solid #bdcfba88;box-shadow:inset 0 0 50px #9cb49625;z-index:-1;transition:background .5s,box-shadow .5s}
.guard25-host{position:absolute;width:425px;height:522px;bottom:-5px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1}
.login-stage .guard25-host svg{position:static;display:inline;max-width:none;overflow:hidden}
.login-stage .guard25-host>svg{display:block;width:100%;height:100%;overflow:visible}
.g25-head-angry,.g25-head-happy{opacity:0}.g25-head-neutral,.g25-head-angry,.g25-head-happy{transition:opacity .2s}
.guard25-host[data-phase=wrong] .g25-head-neutral,.guard25-host[data-phase=success] .g25-head-neutral{opacity:0}
.guard25-host[data-phase=wrong] .g25-head-angry,.guard25-host[data-phase=success] .g25-head-happy{opacity:1}
.guard-bubble{z-index:3;top:22px;left:22px;right:22px;min-height:69px;font-size:16px;padding:12px 16px;transition:background .3s,color .3s,box-shadow .3s}
#majal-login[data-state=wrong] .guard-bubble{box-shadow:0 8px 28px #a4522c15;border-color:#c89f81;color:#8c3f29;background:#fff3e8}
#majal-login[data-state=wrong] .guard25-portal{background:radial-gradient(ellipse at 50% 35%,#fff0d9,#d6d7b8 72%);box-shadow:inset 0 0 45px #bc714422}
#majal-login[data-state=success] .guard25-portal{background:radial-gradient(ellipse at 50% 35%,#f5f7db,#ccdfc2 72%)}
#majal-login[data-intro=prayer] .login-shell,#majal-login[data-intro=logo] .login-shell{visibility:hidden;pointer-events:none}
#majal-login[data-intro=login] .login-shell{animation:login25-reveal .6s ease both}
#majal-startup25{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(ellipse at 50% 42%,#164a4b,#0b303a 70%);border-radius:0}
.startup25-orbit{position:absolute;width:min(68vw,640px);aspect-ratio:1;border:1px solid #a4c9ad16;border-radius:50%;box-shadow:0 0 100px #96b8a709,inset 0 0 90px #96b8a709;animation:startup25-orbit 12s linear infinite}
.startup25-orbit::before,.startup25-orbit::after{content:'';position:absolute;border:1px solid #c3d0ad10;inset:30px;border-radius:46%;transform:rotate(35deg)}.startup25-orbit::after{inset:-30px;transform:rotate(-35deg)}
.startup25-prayer,.startup25-brand{position:relative;grid-area:1/1;padding:30px;max-width:100%;transition:opacity .65s,transform .65s}
.startup25-kicker{font-size:12px;letter-spacing:.4px;color:#c5d3b6;animation:startup25-line-in 1.2s .15s both}
.startup25-verse{font-family:Ruqaa,Cairo,Tahoma,serif;font-size:clamp(28px,3.7vw,48px);line-height:2.2;margin:25px 0;word-spacing:3px;text-shadow:0 2px 25px #bfd0aa15}
.startup25-verse span{display:block;animation:startup25-line-in 1.5s .4s both}.startup25-verse span+span{animation-delay:1.4s}
.startup25-line{height:1px;width:80px;background:linear-gradient(90deg,transparent,#c4d5af,transparent);margin:25px auto;animation:startup25-line-in 1.5s 2s both}
.startup25-brand{opacity:0;transform:translateY(15px) scale(.96);pointer-events:none;visibility:hidden}.startup25-brand .login-logo{font-size:140px;line-height:1.5;color:#fff}.startup25-brand .login-credit{font-size:12px;letter-spacing:3px}
#majal-login[data-intro=logo] .startup25-prayer{opacity:0;transform:translateY(-15px)}#majal-login[data-intro=logo] .startup25-brand{opacity:1;transform:none;visibility:visible;transition-delay:.35s}
.startup25-bottom{position:absolute;bottom:35px;left:35px;right:35px;display:flex;align-items:center;justify-content:space-between;direction:rtl;color:#8eadaa;font-size:11px}
#majal-login #startup25-skip{border:1px solid #779a922f;background:#ffffff06;color:#c5d9cb;padding:10px 16px;border-radius:10px;font-family:inherit;font-size:12px}#majal-login #startup25-skip:hover{background:#ffffff10}#majal-login #startup25-skip:focus-visible{outline:2px solid #c5d9cb;outline-offset:4px}
@keyframes startup25-line-in{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes startup25-orbit{to{transform:rotate(60deg)}}@keyframes login25-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-height:800px) and (min-width:751px){.login-stage{min-height:455px}.guard25-host{width:365px;height:449px;bottom:-10px}.guard-bubble{font-size:14px;min-height:60px;top:16px}.guard25-portal{inset:95px 35px 15px}.login-form-side{padding:26px 34px}.login-logo{font-size:47px}.login-brand{margin-bottom:12px}}
@media(max-width:750px){.login-stage{min-height:365px;border-radius:26px 26px 0 0}.guard25-host{width:290px;height:356px;bottom:-4px}.guard25-portal{inset:85px 40px 8px}.guard-bubble{top:14px;left:18px;right:18px;min-height:48px;font-size:13px}.startup25-verse{font-size:28px;line-height:2}.startup25-brand .login-logo{font-size:100px}.startup25-bottom{left:20px;right:20px;bottom:20px}}
@media(prefers-reduced-motion:reduce){#majal-startup25 *,#majal-login[data-intro=login] .login-shell{animation:none!important;transition:none!important;filter:none!important}.startup25-verse span,.startup25-kicker,.startup25-line{opacity:1;transform:none}}

.login-form-side{border-radius:0 26px 26px 0}@media(max-width:750px){.login-form-side{border-radius:0 0 26px 26px}}