/* ============================================
   PROMETEO — Neon Login Finale (Card statica)
   ============================================ */

:root{
  --c-bg:#080b12;
  --c-fg:#fff;
  --c-cyan:#00f5ff;
  --c-violet:#7c3aed;
  --c-magenta:#ff2ea6;

  --glass: rgba(12,16,28,.55);
  --stroke: rgba(255,255,255,.14);
  --input: rgba(255,255,255,.08);
  --input-focus: rgba(255,255,255,.16);
  --shadow: 0 18px 80px rgba(0,0,0,.6);
  --radius: 22px;
}

html,body{height:100%}
body{
  margin:0;
  color:var(--c-fg);
  background:#05060a url("../../images/sfondo_deepfin3.png") center/cover no-repeat fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:"Inter",system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.2px;
  box-shadow: inset 0 0 140px rgba(0,0,0,.55);
  position:relative;
}

/* Overlay neon aurora */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(40% 50% at 20% 20%, rgba(0,245,255,.18), transparent 60%),
    radial-gradient(40% 50% at 80% 80%, rgba(255,46,166,.20), transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* --- Card --------------------------------------------------------------- */
.login-container{
  position:relative;
  width:min(460px, 92vw);
  padding:34px 26px 26px;
  border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  text-align:center;
  z-index:1;

  /* Animazione di ingresso */
  opacity:0;
  transform: translateY(-20px) scale(0.96);
  animation: cardIn 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}

/* Bordo neon */
.login-container::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; padding:2px;
  background: conic-gradient(from 140deg, var(--c-cyan), var(--c-violet), var(--c-magenta), var(--c-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.95; pointer-events:none;
  filter: drop-shadow(0 0 18px rgba(0,245,255,.25)) drop-shadow(0 0 26px rgba(255,46,166,.18));
}

/* Glow esterno */
.login-container::after{
  content:"";
  position:absolute; inset:-18px; border-radius:inherit; z-index:-1;
  background:
    radial-gradient(55% 60% at 25% 0%, rgba(0,245,255,.22), transparent 60%),
    radial-gradient(55% 60% at 90% 100%, rgba(255,46,166,.20), transparent 60%);
  filter:blur(28px);
}

/* Logo pulsante */
.login-container img{
  display:block; width:100%; max-width:320px; margin:0 auto 20px;
  border-radius:16px;
  animation: pulseLogo 3.5s ease-in-out infinite;
  box-shadow:0 10px 38px rgba(0,245,255,.08),0 12px 46px rgba(255,46,166,.08);
}

/* Input */
.form-control{
  background:var(--input);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px;
  padding:14px;
  font-size:16px;
  transition:all .2s;
}
.form-control::placeholder{ color:rgba(255,255,255,.65) }
.form-control:focus{
  outline:none;
  background:var(--input-focus);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(124,58,237,.3),0 6px 20px rgba(0,0,0,.4);
}

/* Button con shimmer */
.btn-primary{
  position:relative; overflow:hidden;
  border:0; border-radius:12px; width:100%;
  padding:14px; margin-top:8px;
  color:#0b0b0f; font-weight:800;
  background:linear-gradient(90deg,var(--c-cyan),var(--c-violet) 50%,var(--c-magenta));
  box-shadow:0 14px 30px rgba(0,245,255,.22),0 18px 46px rgba(124,58,237,.26),0 22px 60px rgba(255,46,166,.20);
  transition:transform .15s,filter .2s;
}
.btn-primary::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 20%,transparent 40%) no-repeat;
  background-size:200% 100%;
  mix-blend-mode:overlay;
  animation: shimmer 2.5s ease-in-out infinite;
}
.btn-primary:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.06) }
.btn-primary:active{ transform:translateY(0) }

#spin{ margin-left:8px }

/* Error */
.error-message{
  display:none; margin:10px 0 6px;
  font-weight:700; color:#ff6b9f !important;
  text-shadow:0 0 10px rgba(255,46,166,.28);
}
.shake{ animation: shake .36s linear }

/* Social */
.social-login{
  margin-top:20px; display:flex; gap:12px; justify-content:center;
}
.social-login a{
  width:44px;height:44px; display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; text-decoration:none;
  transition:transform .15s,box-shadow .25s,background .25s;
  font-size:20px;
}
.social-login a:hover{
  transform:scale(1.15);
  background:linear-gradient(135deg,var(--c-cyan),var(--c-magenta));
  color:#0a0a0a;
  box-shadow:0 6px 20px rgba(0,245,255,.25);
}

/* Animazioni */
@keyframes cardIn{ to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes pulseLogo{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.05) }
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* Responsive */
@media(max-width:768px){
  .login-container{ width:clamp(300px,92vw,460px); padding:28px 20px 22px }
  .login-container img{ max-width:260px }
}