/* Login / register: living background, card entrance, glowing border, field + button micro-interactions. */
@property --ang { syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ---- scene ---- */
body.auth .container { position:relative; z-index:1; }
body.auth .topbar { position:relative; z-index:3; }
.scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.bgmap { position:absolute; inset:-6%; background:url(/static/assets/auth-bg-map.png) center/cover no-repeat; animation:kenburns 38s ease-in-out infinite alternate;
  transform:translate(calc(var(--mx,0) * -14px), calc(var(--my,0) * -10px)); }
@keyframes kenburns { from { scale:1; rotate:0deg; } to { scale:1.14; rotate:1.2deg; } }
.orb { position:absolute; border-radius:50%; filter:blur(50px); opacity:.55; animation:float 14s ease-in-out infinite; }
.o1 { width:380px; height:380px; left:-80px; top:12%; background:rgba(96,165,250,.5); }
.o2 { width:320px; height:320px; right:-60px; top:46%; background:rgba(37,99,235,.35); animation-delay:-5s; animation-duration:18s; }
.o3 { width:240px; height:240px; left:38%; bottom:-80px; background:rgba(147,197,253,.55); animation-delay:-9s; }
@keyframes float { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,-30px) scale(1.08); } 66% { transform:translate(-30px,24px) scale(.94); } }
.route { position:absolute; inset:0; width:100%; height:100%; }
.route path { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; stroke-dasharray:2 14; opacity:.4; vector-effect:non-scaling-stroke; animation:dash 3s linear infinite, route-in 2.4s ease-out .3s backwards; }
@keyframes dash { to { stroke-dashoffset:-32; } }
@keyframes route-in { from { opacity:0; } }
.fpin { position:absolute; display:grid; place-items:center; color:var(--primary); animation:bob 5s ease-in-out infinite, pin-in 1s cubic-bezier(.2,1.5,.3,1) backwards;
  filter:drop-shadow(0 10px 14px rgba(37,99,235,.35)); transform:translate(calc(var(--mx,0) * 22px), calc(var(--my,0) * 16px)); }
.fpin .ripple { position:absolute; left:50%; bottom:-6px; width:30px; height:10px; margin-left:-15px; border-radius:50%; background:rgba(37,99,235,.28); animation:ripple 2.6s ease-out infinite; }
@keyframes ripple { 0% { transform:scale(.4); opacity:.8; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes bob { 0%,100% { translate:0 0; } 50% { translate:0 -16px; } }
@keyframes pin-in { from { opacity:0; scale:.2; } }
.p1 { left:10%; top:24%; animation-delay:0s, .5s; }
.p2 { right:11%; top:34%; color:#EF4444; animation-delay:-1.6s, .8s; } .p2 .ripple { background:rgba(239,68,68,.28); }
.p3 { right:19%; bottom:14%; color:#16A34A; animation-delay:-3s, 1.1s; } .p3 .ripple { background:rgba(22,163,74,.28); }
.house { display:none; }

/* ---- card ---- */
.auth-card { position:relative; transform:perspective(1000px) rotateX(calc(var(--my,0) * -3deg * var(--k,1))) rotateY(calc(var(--mx,0) * 4deg * var(--k,1))); transition:transform .35s ease;
  animation:card-rise 1s cubic-bezier(.2,.9,.2,1.08) backwards; backdrop-filter:blur(14px); background:rgba(255,255,255,.92); }
.auth-card:focus-within { --k:0; }
@keyframes card-rise { from { opacity:0; transform:perspective(1000px) translateY(60px) rotateX(14deg) scale(.92); filter:blur(8px); } 60% { filter:blur(0); } }
.auth-card::before { content:""; position:absolute; inset:-2px; border-radius:18px; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--ang), transparent 0 55%, rgba(96,165,250,.95) 75%, #2563EB 85%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin-ang 5s linear infinite; }
@keyframes spin-ang { to { --ang:360deg; } }
.auth-card.err { animation:card-rise 1s cubic-bezier(.2,.9,.2,1.08) backwards, shake .6s cubic-bezier(.36,.07,.19,.97) 1s; }
@keyframes shake { 10%,90% { translate:-2px 0; } 20%,80% { translate:4px 0; } 30%,50%,70% { translate:-7px 0; } 40%,60% { translate:7px 0; } }
.auth-card h1 { position:relative; }
.auth-card h1::after { content:""; display:block; width:48px; height:3px; margin:12px auto 0; border-radius:3px; background:linear-gradient(90deg,#2563EB,#93C5FD); animation:grow .8s cubic-bezier(.2,.9,.2,1) .6s backwards; }
@keyframes grow { from { width:0; opacity:0; } }
.auth-card > h1, .auth-card .alert, .auth-card form > *, .auth-card > p.center { animation:fade-up .7s cubic-bezier(.2,.9,.2,1) backwards; }
.auth-card > h1 { animation-delay:.35s; }
.auth-card .alert { animation-delay:.45s; }
.auth-card form > *:nth-child(1) { animation-delay:.45s; } .auth-card form > *:nth-child(2) { animation-delay:.53s; }
.auth-card form > *:nth-child(3) { animation-delay:.61s; } .auth-card form > *:nth-child(4) { animation-delay:.69s; }
.auth-card form > *:nth-child(5) { animation-delay:.77s; } .auth-card form > *:nth-child(6) { animation-delay:.85s; }
.auth-card > p.center { animation-delay:.95s; }
@keyframes fade-up { from { opacity:0; transform:translateY(18px); } }
.alert { animation:fade-up .5s .45s backwards, alert-pulse 2.4s 1s ease-in-out 2; }
@keyframes alert-pulse { 50% { box-shadow:0 0 0 6px rgba(185,28,28,.14); } }

/* ---- fields ---- */
.field { position:relative; overflow:hidden; transition:border-color .25s, box-shadow .25s, background .25s, transform .25s; }
.field svg { transition:color .25s, transform .35s cubic-bezier(.2,1.6,.3,1); }
.field:focus-within { background:#fff; transform:translateY(-1px); }
.field:focus-within > svg:first-child { color:var(--primary); transform:scale(1.2) rotate(-6deg); }
.field::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#60A5FA,#2563EB); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.9,.2,1); }
.field:focus-within::after { transform:scaleX(1); }
.eye { position:relative; width:26px; height:26px; place-items:center; transition:color .2s, transform .2s; }
.eye:hover { color:var(--primary); transform:scale(1.12); }
.eye > span { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .25s, transform .3s cubic-bezier(.2,1.4,.3,1); }
.eye .eye-off { opacity:0; transform:scale(.4) rotate(-40deg); }
.eye.shown .eye-on { opacity:0; transform:scale(.4) rotate(40deg); }
.eye.shown .eye-off { opacity:1; transform:none; }

/* ---- button ---- */
.auth-card .btn { position:relative; overflow:hidden; transition:transform .2s, box-shadow .3s, background .2s; box-shadow:0 8px 20px rgba(37,99,235,.3); }
.auth-card .btn::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); }
.auth-card .btn:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.42); }
.auth-card .btn:hover::after { animation:sweep .8s ease; }
.auth-card .btn:active { transform:scale(.97); }
@keyframes sweep { to { left:130%; } }
.btn.loading { pointer-events:none; color:transparent !important; }
.btn.loading::before { content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.auth-card a { transition:color .2s; }
.auth-card p.center a { position:relative; font-weight:600; }
.auth-card p.center a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s; }
.auth-card p.center a:hover { text-decoration:none; }
.auth-card p.center a:hover::after { transform:scaleX(1); transform-origin:left; }

/* ---- register extras ---- */
.meter { display:flex; align-items:center; gap:12px; margin:-6px 0 16px; height:18px; opacity:0; transform:translateY(-4px); transition:opacity .3s, transform .3s; }
.meter.on { opacity:1; transform:none; }
.meter .bars { display:flex; gap:4px; flex:1; }
.meter .bars i { flex:1; height:5px; border-radius:5px; background:var(--border); transform-origin:left; transition:background .3s, transform .4s cubic-bezier(.2,1.4,.3,1); }
.meter[data-s="1"] .bars i:nth-child(-n+1) { background:var(--err); }
.meter[data-s="2"] .bars i:nth-child(-n+2) { background:#F59E0B; }
.meter[data-s="3"] .bars i:nth-child(-n+3) { background:#3B82F6; }
.meter[data-s="4"] .bars i:nth-child(-n+4) { background:#16A34A; }
.meter .bars i.pop { animation:bar-pop .4s cubic-bezier(.2,1.6,.3,1); }
@keyframes bar-pop { 50% { transform:scaleY(1.9); } }
.meter .mtext { font-size:.78rem; font-weight:600; color:var(--muted); min-width:56px; text-align:right; }
.role-card { transition:transform .3s cubic-bezier(.2,1.5,.3,1); }
.role-card:hover { transform:translateY(-3px); }
.role-body { transition:border-color .25s, background .25s, color .25s, box-shadow .3s, transform .3s; }
.role-card:hover .role-body { box-shadow:0 10px 22px rgba(37,99,235,.16); }
.role-card input:checked + .role-body { animation:role-pop .5s cubic-bezier(.2,1.6,.3,1); box-shadow:0 10px 24px rgba(37,99,235,.22); }
.role-card input:checked + .role-body > svg { animation:icon-bounce .6s cubic-bezier(.2,1.6,.3,1); }
@keyframes role-pop { 40% { transform:scale(1.06); } }
@keyframes icon-bounce { 30% { transform:translateY(-8px) scale(1.25) rotate(-8deg); } }
.tick { display:grid !important; transform:scale(0) rotate(-90deg); transition:transform .4s cubic-bezier(.2,1.8,.3,1); }
.role-card input:checked + .role-body .tick { transform:none; }

@media (max-width:760px) { .p2, .o2 { display:none; } .p1 { left:6%; top:16%; } .p3 { right:8%; bottom:26%; } }
@media (max-width:520px) { .house { display:block; position:absolute; left:0; right:0; bottom:0; height:34vh; background:url(/static/assets/auth-house.png) center bottom/cover no-repeat; animation:fade-up 1.2s .6s backwards; } .p3 { display:none; } }
@media (prefers-reduced-motion: reduce) { .scene *, .auth-card, .auth-card *, .btn, .meter * { animation:none !important; transition:none !important; } .auth-card::before { display:none; } }