/* ════════════════════════════════════════════════════════════════
   ANIMACJE STRON LOGOWANIA (Szkło nocą) — logowanie, zaproszenie,
   „Dodaj swoje zdjęcie". Bez bibliotek; ruch tylko transform/opacity
   (płynnie, także na telefonie). prefers-reduced-motion = bez ruchu.
   ════════════════════════════════════════════════════════════════ */
body.an-on{background-image:none !important;overflow-x:hidden}
.anTlo,.anBokeh{position:fixed;inset:0;pointer-events:none;z-index:0}
.anTlo{inset:-4%;background:#0b0d12 url('/szklo/tlo-noc.jpg') center/cover no-repeat;will-change:transform;transform:scale(1.06)}
.anTlo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(5,6,10,.55))}
.anTloRuch{animation:anZoom 48s ease-in-out infinite alternate}
@keyframes anZoom{from{scale:1}to{scale:1.07}}
.anBokeh span{position:absolute;border-radius:50%;filter:blur(28px);opacity:.0;will-change:transform,opacity;animation:anDryf var(--t,38s) ease-in-out infinite alternate,anPojaw 2.4s ease-out forwards}
@keyframes anDryf{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--dx,40px),var(--dy,-30px),0)}}
@keyframes anPojaw{to{opacity:var(--o,.35)}}
body.an-on > .card{position:relative;z-index:1}

/* karta: wjazd + jednorazowy połysk szkła */
.anWjazd{animation:anWjazd .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes anWjazd{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.card.anPolysk{overflow:hidden}
.card.anPolysk::before{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10) 45%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.10) 55%,transparent);
  transform:translateX(0) skewX(-12deg);animation:anPolysk 1.1s .5s ease-in-out both}
@keyframes anPolysk{0%{transform:translateX(0) skewX(-12deg);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(520%) skewX(-12deg);opacity:0}}
.anLit{display:inline-block;opacity:0;transform:translateY(6px);animation:anLit .45s cubic-bezier(.2,.8,.2,1) forwards;white-space:pre}
@keyframes anLit{to{opacity:1;transform:none}}

/* pola: etykieta unosząca się nad pole, płynna ramka przy fokusie */
.anPole{position:relative;margin-top:14px}
.anPole input{padding:20px 13px 7px !important;transition:border-color .25s,box-shadow .25s,background-color .25s}
.anPole label{position:absolute;left:14px;top:50%;margin:0 !important;transform:translateY(-50%);transform-origin:left center;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s;font-size:.8rem !important;letter-spacing:.6px}
.anPole input:focus + label,.anPole input:not(:placeholder-shown) + label,.anPole.stale label{transform:translateY(-135%) scale(.82);color:var(--gold,#e3bd4a)}
.anPole input:focus{border-color:var(--gold,#e3bd4a) !important;box-shadow:0 0 0 3px rgba(227,189,74,.22),0 0 22px rgba(227,189,74,.12)}

/* przycisk: najechanie, wciśnięcie, wskaźnik w trakcie */
.card button[type=submit],.card #go{position:relative;transition:transform .18s,box-shadow .25s,filter .2s}
.card button[type=submit]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(227,189,74,.28);filter:brightness(1.05)}
.card button[type=submit]:not(:disabled):active{transform:translateY(0) scale(.985);box-shadow:0 2px 8px rgba(227,189,74,.2)}
.card button.anLaduje{color:transparent !important}
.card button.anLaduje::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  border:2.5px solid rgba(20,21,15,.25);border-top-color:#14150f;animation:anKrec .7s linear infinite}
@keyframes anKrec{to{transform:rotate(360deg)}}

/* błąd: potrząśnięcie + czerwony błysk; sukces: karta znika z rozmyciem */
.anBlad{animation:anTrzes .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes anTrzes{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.anBlysk{animation:anBlysk .7s ease-out}
@keyframes anBlysk{0%{box-shadow:0 0 0 2px rgba(255,92,92,.75),0 0 40px rgba(255,92,92,.35),0 20px 60px rgba(0,0,0,.5)}100%{box-shadow:0 20px 60px rgba(0,0,0,.5)}}
.anWyjazd{animation:anWyjazd .45s cubic-bezier(.4,0,.2,1) forwards}
@keyframes anWyjazd{to{opacity:0;transform:translateY(-10px) scale(.97);filter:blur(6px)}}
body.anKoniec .anTlo{transition:filter .45s,opacity .45s;filter:blur(8px) brightness(.8)}

@media (prefers-reduced-motion: reduce){
  .anTloRuch,.anBokeh span,.anWjazd,.card.anPolysk::before,.anLit,.anBlad,.anBlysk,.anWyjazd{animation:none !important}
  .anBokeh span{opacity:var(--o,.35)}
  .anLit{opacity:1;transform:none}
  .anPole label,.anPole input,.card button{transition:none !important}
}