/* login-fx: stilurile comune ale animațiilor de logare (cabinetul clientului și consola admin).
   Culoarea vine din --brand; pagina definește și --text-2, --ok, --surface. Doar transform/opacity (plus blur la apariție
   și clip-path la scanare); nimic ciclic. */
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:160}
.auth-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* apariția cardului: blur → clar, elementele urcă pe rând, un luciu o singură dată */
[data-fx-step].fx-appear{animation:fxCard .7s cubic-bezier(.2,.8,.2,1) both;position:relative;overflow:hidden}
[data-fx-step].fx-appear>*{animation:fxUp .5s cubic-bezier(.2,.8,.2,1) both}
[data-fx-step].fx-appear>*:nth-child(2){animation-delay:.08s}[data-fx-step].fx-appear>*:nth-child(3){animation-delay:.16s}
[data-fx-step].fx-appear>*:nth-child(4){animation-delay:.24s}[data-fx-step].fx-appear>*:nth-child(n+5){animation-delay:.32s}
[data-fx-step].fx-appear::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-100%);animation:fxSheen 1.1s .35s ease-out both}
@keyframes fxCard{from{opacity:0;filter:blur(8px);transform:scale(.985)}}
@keyframes fxUp{from{opacity:0;transform:translateY(10px)}}
@keyframes fxSheen{to{transform:translateX(100%)}}

/* trecerea între pași: pasul nou apare după ce sosesc particulele */
[data-fx-step].fx-hide>*{animation:none!important;opacity:0}
[data-fx-step].fx-in>*{animation:fxWarpIn .55s cubic-bezier(.2,.8,.2,1) both}
[data-fx-step].fx-in>*:nth-child(2){animation-delay:.05s}[data-fx-step].fx-in>*:nth-child(3){animation-delay:.1s}[data-fx-step].fx-in>*:nth-child(4){animation-delay:.15s}[data-fx-step].fx-in>*:nth-child(5){animation-delay:.2s}
@keyframes fxWarpIn{from{opacity:0;transform:translateY(6px) scale(.98);filter:blur(6px)}}

/* așteptarea: câmpurile la 60 %, sigla (ținta) se luminează fix */
[data-fx-step] .input{transition:opacity .25s}
[data-fx-step].fx-wait .input{opacity:.6}
[data-fx-step].fx-wait [data-fx-anchor]{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 16%,transparent),0 10px 26px -8px color-mix(in srgb,var(--brand) 70%,transparent);transition:box-shadow .3s}

/* eroarea: 300 ms, decalaj și dublare colorată */
.fx-glitch{animation:fxGlitch .3s steps(1) both}
@keyframes fxGlitch{0%{transform:translateX(-4px);box-shadow:-3px 0 0 rgba(255,0,90,.55),3px 0 0 rgba(0,210,255,.55)}
  33%{transform:translateX(3px);box-shadow:3px 0 0 rgba(255,0,90,.55),-3px 0 0 rgba(0,210,255,.55)}
  66%{transform:translateX(-1px);box-shadow:-1px 0 0 rgba(255,0,90,.4),1px 0 0 rgba(0,210,255,.4)}100%{transform:none;box-shadow:none}}

/* succesul: sigilare → trasee → terminal → scanare */
.fx-seal{transition:transform .3s cubic-bezier(.6,0,.4,1),opacity .3s .15s,background-color .2s,box-shadow .2s;transform:scaleY(.06)!important;opacity:0;
  background-color:var(--brand)!important;box-shadow:0 0 14px color-mix(in srgb,var(--brand) 80%,transparent)!important;color:transparent!important}
/* la succes rămân vizibile doar sigla (ținta), terminalul și câmpurile care se sigilează; restul se estompează */
[data-fx-step].fx-done>*:not([data-fx-anchor]):not(.fx-term):not(:has([data-fx-anchor])):not(:has(input)){transition:opacity .3s;opacity:0}
[data-fx-step].fx-done form>*:not(:has(input)):not(.fx-term):not([data-fx-anchor]),[data-fx-step].fx-done .field>*:not(.input):not(input),
[data-fx-step].fx-done button,[data-fx-step].fx-done .help{transition:opacity .3s;opacity:0}
.fx-ping{animation:fxPing .22s ease-out}
@keyframes fxPing{50%{transform:scale(1.08);filter:brightness(1.25)}}
.fx-term{font:12.5px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text-2);margin:8px 0 14px;min-height:66px}
.fx-term .p{color:var(--brand)}.fx-term .ok{color:var(--ok);font-weight:600}
.fx-scan{position:fixed!important;inset:0;z-index:150;overflow:hidden}
.fx-scanline{position:fixed;left:0;right:0;top:0;height:2px;z-index:170;pointer-events:none;background:linear-gradient(90deg,transparent,var(--brand),transparent);
  box-shadow:0 0 18px 2px color-mix(in srgb,var(--brand) 70%,transparent)}

@media (prefers-reduced-motion:reduce){.auth-net{display:none}[data-fx-step].fx-appear,[data-fx-step].fx-appear>*,[data-fx-step].fx-appear::after,[data-fx-step].fx-in>*,.fx-glitch,.fx-ping{animation:none!important}}