/* G4-SIGNIN1 — the sign-in screen the Owner kept, with his changes (2026-10-08): the whole screen fits the browser window (no scroll on a normal
   screen); «العودة إلى الموقع» and the AR / EN switch sit at the top inside the scene (not a separate bar); the card head as in the new site's sign-in
   (MASOUD X · CFO Intelligence with the logo, then «أهلًا بعودتك»); the left caption without its sub-line, «Clarity. Control. Decisions.» in the title's
   gradient; the fields, the shining button and the links under them unchanged; the centre logo gains the assembly motion of the new site's header. */

/* the whole screen in the window */
.login-shell:not(.hidden){position:relative;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.login-shell .login-stage{height:100%;min-height:0}
.login-shell .login-visual{min-height:0}
.login-shell .login-card{max-height:calc(100% - 2 * clamp(14px,3vh,32px));margin-block:clamp(14px,3vh,32px);padding-block:clamp(20px,3.4vh,40px);padding-inline:clamp(24px,2.6vw,44px)}
.login-shell .login-brand{margin-bottom:clamp(12px,2.6vh,30px)}
.login-shell .login-copy{margin-bottom:clamp(12px,2.4vh,28px)}
.login-shell .login-card form{display:grid;gap:clamp(8px,1.4vh,14px)}
.login-shell .login-card input{padding-block:clamp(9px,1.5vh,14px)}
.login-shell .login-card .text-button{min-height:36px;margin-top:clamp(2px,.8vh,8px);padding-block:6px}
.login-shell .login-card details{margin-top:clamp(4px,1vh,14px)}

/* the top: back to the site and the language, blended into the scene */
.login-shell .signin1-top{position:absolute;z-index:6;inset-block-start:clamp(10px,2vh,22px);inset-inline:clamp(14px,2.4vw,34px);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.login-shell .signin1-top>*{pointer-events:auto}
.login-shell .signin1-top .text-button{display:inline-flex;align-items:center;gap:8px;min-height:38px;margin:0;padding:7px 14px;border:1px solid var(--lg-line);border-radius:999px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--lg-ink);font-size:13px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.login-shell .signin1-top .text-button:hover,.login-shell .signin1-top .text-button:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(32,213,245,.45)}
.login-shell .signin1-top .text-button:focus-visible{outline:2px solid rgba(32,213,245,.7);outline-offset:2px}
.login-shell .signin1-top [data-signin1-lang]{min-width:56px;justify-content:center;font-weight:600;letter-spacing:.04em}
.login-shell:not(.hidden) .login-card{margin-block-start:clamp(56px,8vh,74px)}

/* the card head */
.login-shell .login-brand b{font-size:clamp(17px,1.4vw,20px)}
.login-shell .signin1-welcome{display:block;margin:0 0 6px;color:var(--lg-sub);font-size:13px;font-weight:500;letter-spacing:.01em}
.login-shell .signin1-welcome .i18n-sep,html:not([lang="en"]) .login-shell .signin1-welcome .i18n-en,html[lang="en"] .login-shell .signin1-welcome .i18n-ar{display:none}

/* the left caption: the tagline in the title's gradient, clearly visible */
.login-shell .commercial-caption strong{background:linear-gradient(120deg,#ffffff,#bcd7ff 60%,#8fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* the logo: the float / turn move to the scene, the official image fills it; the parts assemble over it (Astra WEB2 brand-motion, scoped; each part's
   box re-measured against this official image by a colour match on the part's opaque pixels) */
.login-shell .commercial-logo-stage .signin1-scene{position:relative;z-index:2;display:block;width:66%;aspect-ratio:320/244;direction:ltr;isolation:isolate;transform-style:preserve-3d;filter:drop-shadow(0 18px 30px rgba(8,105,201,.45)) drop-shadow(0 2px 2px rgba(8,22,40,.85));animation:lgFloat 3.8s ease-in-out infinite,lgTurn 11s cubic-bezier(.45,.05,.35,1) infinite}
.login-shell .commercial-logo-stage .signin1-scene img.logo-lockup{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:none;animation:none}
.login-shell .signin1-parts{position:absolute;inset:0;display:block;pointer-events:none;opacity:0}
.login-shell .signin1-piece{position:absolute;display:block;object-fit:contain;max-width:none;max-height:none;margin:0;opacity:0;transform-origin:center}
.login-shell .signin1-c{left:7.46%;top:25.17%;width:29.76%;height:45.57%;--s1-x:-28px;--s1-y:9px;--s1-r:-12deg;--s1-delay:0s}
.login-shell .signin1-f{left:36.21%;top:28.31%;width:25.65%;height:44.65%;--s1-x:0px;--s1-y:28px;--s1-r:5deg;--s1-delay:.1s}
.login-shell .signin1-o{left:61.1%;top:25.93%;width:32.01%;height:47.53%;--s1-x:28px;--s1-y:9px;--s1-r:12deg;--s1-delay:.2s}
.login-shell .signin1-ribbon{left:18.02%;top:6.08%;width:52.8%;height:30.72%;--s1-x:-17px;--s1-y:22px;--s1-r:-12deg;--s1-delay:.45s;z-index:3;transform-origin:20% 100%}
.login-shell .signin1-ribbon-cap{left:73.9%;top:25.2%;width:17.76%;height:24.42%;--s1-x:14px;--s1-y:-16px;--s1-r:16deg;--s1-delay:.55s;z-index:4}
.login-shell .signin1-intelligence{left:9.64%;top:74.01%;width:82.72%;height:6.58%;--s1-x:0px;--s1-y:11px;--s1-r:0deg;--s1-delay:.65s}
.login-shell .signin1-masoud-symbol{left:24.69%;top:83.31%;width:14.56%;height:13.52%;--s1-x:-7px;--s1-y:9px;--s1-r:-10deg;--s1-delay:.75s}
.login-shell .signin1-masoud-word{left:40.1%;top:86%;width:32.32%;height:7.07%;--s1-x:7px;--s1-y:9px;--s1-r:0deg;--s1-delay:.8s}
/* G4-SIGNIN2 (the Owner 2026-10-09): ONE logo — an 11 s cycle on the scene: the parts show the logo assembled (the official image hidden), break apart,
   reassemble, hand over to the official image, then the whole logo turns; repeated while the sign-in shows. The reflection shows only while the logo
   stands still (not under the moving parts, not during the turn). Negative delays stagger the break by at most 0.4 s, so every part is still in place
   when the official image hides. */
.login-shell .signin1-playing .signin1-parts{opacity:1}
.login-shell .commercial-logo-stage .signin1-scene.signin1-playing{animation:signin1-turn 11s cubic-bezier(.45,.05,.35,1) infinite}
.login-shell .signin1-playing .signin1-piece{animation:signin1-cycle 11s cubic-bezier(.2,.65,.25,1) calc(var(--s1-delay) * -.5) infinite both}
.login-shell .commercial-logo-stage .signin1-scene.signin1-playing img.logo-lockup{animation:signin1-logo 11s linear infinite both}
.login-shell .signin1-cycling img.logo-reflection{animation:lgFloatMirror 3.8s ease-in-out infinite,signin1-reflect 11s linear infinite both}
@keyframes signin1-cycle{0%,4%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}13%{opacity:1;transform:translate(calc(var(--s1-x) * 1.8),calc(var(--s1-y) * 1.8)) rotate(calc(var(--s1-r) * 1.6)) scale(.88)}27%,36%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}40%,100%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes signin1-logo{0%,26%{opacity:0}30%,100%{opacity:1}}
@keyframes signin1-reflect{0%,28%{opacity:0}34%,68%{opacity:.26}72%,100%{opacity:0}}
@keyframes signin1-turn{0%,72%{transform:rotateY(0deg)}86%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* a phone and a narrow window: the visual becomes a short band so the card fits under it */
@media (max-width:980px){
 /* the two top buttons get their own strip above the logo band (same dark scene) so they never sit on the logo */
 .login-shell .login-stage{display:flex;flex-direction:column;padding-top:54px}
 .login-shell .signin1-top{inset-block-start:8px;inset-inline:12px}
 .login-shell .signin1-top .text-button{min-height:36px;padding:6px 12px}
 .login-shell .login-visual{flex:0 0 auto;height:clamp(120px,17dvh,170px);min-height:0}
 .login-shell .commercial-logo-stage .signin1-scene{width:min(46%,240px)}
 .login-shell .commercial-caption{bottom:8px}
 .login-shell .commercial-caption small{display:none}
 .login-shell .commercial-caption strong{font-size:17px}
 .login-shell .login-card,.login-shell:not(.hidden) .login-card{flex:1 1 auto;min-height:0;max-height:none;margin:10px 14px 14px;padding:clamp(16px,2.6dvh,26px) 20px;overflow:auto}
 .login-shell .login-brand{margin-bottom:clamp(8px,1.6dvh,18px)}
 .login-shell .login-copy h1{font-size:clamp(24px,7vw,31px)}
}
/* a small phone: a shorter band and a tighter card so the button and the links still show without scrolling */
@media (max-width:980px) and (max-height:780px){
 .login-shell .login-stage{padding-top:50px}
 .login-shell .login-visual{height:clamp(112px,17dvh,146px)}
 .login-shell .commercial-logo-stage .signin1-scene{width:min(40%,190px)}
 .login-shell .commercial-caption strong{font-size:15px}
 .login-shell .login-card,.login-shell:not(.hidden) .login-card{margin:8px 12px 10px;padding:14px 18px}
 .login-shell .login-brand .brand-lockup{width:72px}
 .login-shell .login-copy h1{font-size:clamp(22px,6.4vw,27px)}
 .login-shell .login-card form{gap:6px}
 .login-shell .login-card .text-button{min-height:32px;padding-block:4px}
}
/* a very short window cannot hold everything: scrolling comes back instead of hiding a field */
@media (max-height:560px){.login-shell:not(.hidden){height:auto;min-height:100dvh;overflow:auto}}
@media (prefers-reduced-motion:reduce){.login-shell .signin1-parts{display:none}.login-shell .commercial-logo-stage .signin1-scene,.login-shell .signin1-playing img.logo-lockup,.login-shell .signin1-cycling img.logo-reflection{animation:none!important}.login-shell .signin1-playing img.logo-lockup{opacity:1}}