/* auth-fx.css — حركة صفحتي الدخول وإنشاء الحساب (EasyBac) */
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform;animation:ebBlob 16s ease-in-out infinite}
body::before{width:520px;height:520px;top:-200px;right:-160px;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 32%,transparent),transparent 70%)}
body::after{width:440px;height:440px;bottom:-190px;left:-140px;animation-delay:-7s;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 38%,transparent),transparent 70%)}

.auth-orbit{position:fixed;left:50%;top:50%;width:min(940px,125vw);height:min(940px,125vw);z-index:-1;color:var(--brand);opacity:.28;pointer-events:none;will-change:transform;animation:ebSpinC 70s linear infinite}
.auth-orbit .dot{fill:var(--gold)}.auth-orbit .dot2{fill:var(--c3,#0E9F6E)}

.card,.auth-card{position:relative;overflow:hidden}
.card::before,.auth-card::before{content:"";position:absolute;top:0;left:0;right:auto;width:200%;height:4px;background:linear-gradient(90deg,var(--brand),var(--gold),var(--brand),var(--gold),var(--brand));will-change:transform;animation:ebBar 5s linear infinite}

.fx-in{animation:ebUp .6s cubic-bezier(.22,.9,.3,1) var(--d,0ms) backwards}

input,select{transition:border-color .2s,box-shadow .2s,transform .2s}
input:focus,select:focus{transform:translateY(-1px)}

#loginSection>button,.primary-btn{position:relative;overflow:hidden}
#loginSection>button::after,.primary-btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100px) skewX(-20deg);will-change:transform;animation:ebShine 3.4s ease-in-out 1.4s infinite}
#loginSection>button:active,.primary-btn:active{transform:scale(.98)}

.auth-chip{position:fixed;z-index:1;display:inline-flex;align-items:center;gap:9px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:30px;padding:9px 15px;font-size:.84rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-md);animation:ebFloat 5.5s ease-in-out infinite}
.auth-chip i{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;background:var(--accent,var(--brand))}
.auth-chip.c1{top:20%;right:7vw}
.auth-chip.c2{top:50%;left:6vw;animation-delay:-1.8s;animation-duration:6.4s}
.auth-chip.c3{bottom:15%;right:10vw;animation-delay:-3.2s}
@media(max-width:1060px){.auth-chip{display:none}}

.pw-meter{display:flex;gap:5px;margin:-8px 0 6px}
.pw-meter i{flex:1;height:5px;border-radius:4px;background:var(--border);transition:background .25s}
.pw-note{font-size:.78rem;font-weight:800;margin:0 0 14px;min-height:1.2em}
.caps-note{display:none;margin:-8px 0 12px;font-size:.8rem;font-weight:800;color:#D98E00}
.caps-note.on{display:block}

@keyframes ebUp{from{opacity:0;transform:translateY(16px)}}
@keyframes ebBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.15)}}
@keyframes ebBar{to{transform:translateX(-50%)}}
@keyframes ebShine{0%{transform:translateX(-100px) skewX(-20deg)}40%,100%{transform:translateX(600px) skewX(-20deg)}}
@keyframes ebFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ebSpinC{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media(prefers-reduced-motion:reduce){body::before,body::after,.auth-orbit,.auth-chip,.card::before,.auth-card::before,#loginSection>button::after,.primary-btn::after{animation:none!important}}