/* ALGIZ Learning · P5 Login Effects V36.24.0
   Effects only. The approved 1672×941 composition and all interactive target
   coordinates remain owned by login-a4.css and are not redefined here. */
.stage{--p5-x:0;--p5-y:0;--p5-eye:.28;--p5-eye-focus:.42}
.reference-picture{position:absolute;z-index:0;inset:0;width:1672px;height:941px;pointer-events:none}
.reference-picture .reference{inset:0}
.login-fx{position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden}
.login-fx-circuits{position:absolute;inset:0;width:1672px;height:941px;opacity:.34;filter:drop-shadow(0 0 4px rgba(0,164,255,.16));transform:translate3d(calc(var(--p5-x)*2px),calc(var(--p5-y)*2px),0)}
.login-fx-circuits path{fill:none;stroke:#179cff;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 13;animation:p5Circuit 12s linear infinite}
.login-fx-circuits path:nth-child(2){animation-duration:15s;animation-delay:-6s}.login-fx-circuits path:nth-child(3){animation-duration:17s;animation-delay:-10s}.login-fx-circuits path:nth-child(4){animation-duration:14s;animation-delay:-4s}.login-fx-circuits path:nth-child(5){animation-duration:18s;animation-delay:-12s}.login-fx-circuits path:nth-child(6){animation-duration:13s;animation-delay:-7s}
.login-fx-circuits circle{fill:#baf7ff;opacity:.55;filter:drop-shadow(0 0 5px #16bcff);animation:p5Node 4.8s ease-in-out infinite}.login-fx-circuits circle:nth-of-type(even){animation-delay:-2.4s}
.login-fx-eyes{position:absolute;left:848px;top:454px;width:190px;height:78px;transform:translate3d(calc(var(--p5-x)*3px),calc(var(--p5-y)*2px),0);opacity:var(--p5-eye);transition:opacity .2s ease,filter .2s ease}
.login-fx-eyes:before,.login-fx-eyes:after{content:"";position:absolute;top:18px;width:54px;height:24px;background:radial-gradient(ellipse at center,rgba(255,255,255,.96) 0 5%,rgba(39,211,255,.78) 10%,rgba(0,116,255,.36) 30%,transparent 68%);filter:blur(.3px) drop-shadow(0 0 9px rgba(0,176,255,.68));transform:rotate(27deg);animation:p5EyeIdle 3.2s ease-in-out infinite}
.login-fx-eyes:before{left:7px}.login-fx-eyes:after{right:7px;transform:rotate(-27deg);animation-delay:-1.6s}
body.is-user-focus .login-fx-eyes{--p5-eye:.38}body.is-password-focus .login-fx-eyes{--p5-eye:.54;filter:brightness(1.1)}body.is-authenticating .login-fx-eyes{--p5-eye:.72;filter:brightness(1.25)}
.login-fx-shield{position:absolute;left:626px;top:76px;width:500px;height:770px;overflow:visible;opacity:.34;transform:translate3d(calc(var(--p5-x)*1.5px),calc(var(--p5-y)*1.2px),0)}
.login-fx-shield path{fill:none;stroke:url(#p5ShieldGradient);stroke-width:2;stroke-linecap:round;stroke-dasharray:120 1180;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(0,189,255,.55));animation:p5ShieldScan 6.4s linear infinite}
.login-fx-card-edge{position:absolute;left:1081px;top:104px;width:505px;height:748px;border-radius:38px;box-shadow:0 0 0 1px rgba(19,125,255,.09),0 19px 58px rgba(0,76,171,.04),inset -1px 0 rgba(0,205,255,.10);opacity:.58;transform:translate3d(calc(var(--p5-x)*.6px),calc(var(--p5-y)*.5px),0);animation:p5CardBreath 5.8s ease-in-out infinite}
.login-fx-card-edge:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,transparent 22%,rgba(18,162,255,.02) 39%,rgba(69,224,255,.18) 48%,rgba(255,255,255,.05) 52%,transparent 66%);background-size:250% 100%;background-position:120% 0;opacity:.0;animation:p5CardSweep 9s ease-in-out infinite}
.login-fx-secure{position:absolute;left:1120px;top:690px;width:330px;height:86px;border-radius:15px;background:radial-gradient(circle at 12% 40%,rgba(20,184,255,.12),transparent 38%);opacity:.45;animation:p5SecurePulse 5s ease-in-out infinite}
body.is-user-focus .login-fx-secure,body.is-password-focus .login-fx-secure{animation:none;opacity:.65;filter:brightness(1.08)}body.is-authenticating .login-fx-secure{animation:none;opacity:.78;filter:brightness(1.18)}
.field{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease!important}
.field:focus{box-shadow:0 0 0 3px rgba(13,99,255,.09),0 8px 20px rgba(8,88,178,.05),inset 0 -2px 0 rgba(10,171,255,.75)!important}
body.is-login-error .field[aria-invalid="true"]{animation:p5FieldError .24s ease 1}
.submit{transition:transform .14s ease,filter .18s ease!important}.submit:active{transform:scale(.995) translateY(1px)!important}
body.is-authenticating .submit{filter:drop-shadow(0 0 12px rgba(0,177,255,.28))}
body.is-authenticating .submit:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transform:translateX(-110%);animation:p5SubmitSweep .85s ease-in-out infinite}
.p5-caps-lock{position:absolute;z-index:6;left:1124px;top:526px;width:260px;min-height:18px;display:flex;align-items:center;gap:6px;color:#8a5a08;font-size:11px;font-weight:800;letter-spacing:.01em;opacity:0;transform:translateY(-2px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.p5-caps-lock:before{content:"⇧";display:grid;place-items:center;width:18px;height:18px;border:1px solid rgba(174,112,9,.28);border-radius:5px;background:rgba(255,247,227,.82)}
body.is-capslock .p5-caps-lock{opacity:1;transform:none}
body.p5-login-enter .reference-picture{animation:p5ReferenceEnter .62s cubic-bezier(.22,.7,.2,1) both}
body.p5-login-enter .login-overlay{animation:p5FormEnter .58s .08s cubic-bezier(.22,.7,.2,1) both}

@keyframes p5Circuit{to{stroke-dashoffset:-180}}
@keyframes p5Node{0%,100%{opacity:.2}50%{opacity:.75}}
@keyframes p5EyeIdle{0%,100%{opacity:.55;filter:blur(.3px) drop-shadow(0 0 7px rgba(0,176,255,.45))}50%{opacity:.92;filter:blur(.2px) drop-shadow(0 0 13px rgba(0,176,255,.72))}}
@keyframes p5ShieldScan{to{stroke-dashoffset:-1300}}
@keyframes p5CardBreath{0%,100%{opacity:.38}50%{opacity:.68}}
@keyframes p5CardSweep{0%,68%{background-position:120% 0;opacity:0}74%{opacity:.50}90%{opacity:.10}100%{background-position:-120% 0;opacity:0}}
@keyframes p5SecurePulse{0%,100%{opacity:.22}50%{opacity:.55}}
@keyframes p5SubmitSweep{to{transform:translateX(110%)}}
@keyframes p5FieldError{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
@keyframes p5ReferenceEnter{from{opacity:.70;filter:brightness(1.04) blur(1px)}to{opacity:1;filter:none}}
@keyframes p5FormEnter{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Server-confirmed arrival: this runs on the authenticated page, not before the server accepts credentials. */
body[data-login-arrival="1"] .main{animation:p5AuthenticatedArrival .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes p5AuthenticatedArrival{from{opacity:.25;transform:translateY(7px) scale(.997)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .login-fx-circuits{opacity:.18}.login-fx-shield{opacity:.22}.login-fx-card-edge{opacity:.42}
  .login-fx-eyes{opacity:.20}
  .p5-caps-lock{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .login-fx-circuits path,.login-fx-circuits circle,.login-fx-eyes:before,.login-fx-eyes:after,.login-fx-shield path,.login-fx-card-edge,.login-fx-card-edge:after,.login-fx-secure,.submit:after,.reference-picture,.login-overlay,body[data-login-arrival="1"] .main{animation:none!important}
  .login-fx-circuits,.login-fx-shield{opacity:.10}.login-fx-eyes{opacity:.12}.login-fx-card-edge{opacity:.34}.login-fx-card-edge:after{display:none}
  .stage{--p5-x:0!important;--p5-y:0!important}
}