/* =====================================================================
   THE INVISIBLE WORLDS — Pagina di accesso (login / registrazione)
   Metà foto in stile landing (serif Fraunces, fondo notte, immagine vera)
   e metà scheda di accesso pulita, come sui siti di raccolta fondi.
   Si appoggia a landing.css: variabili colore, bottoni e font arrivano da lì.
   ===================================================================== */

/* La barra di scorrimento è sempre "prenotata": senza questo, passando da
   Accedi a Crea account la barra compare e tutta la pagina si stringe di
   qualche pixel — sembra che la foto salti di lato. */
html{scrollbar-gutter:stable}
body.auth-page{background:var(--cream)}
.hidden{display:none !important}

.auth{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}


/* =====================================================================
   META' SINISTRA — la foto
   ===================================================================== */
.auth-visual{
  position:relative;overflow:hidden;background:var(--night);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,3.2vw,46px);
}
.auth-visual .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* micro-zoom lentissimo: dà vita alla foto senza distrarre */
  transform:scale(1.04);animation:authZoom 26s ease-out forwards}
@keyframes authZoom{to{transform:scale(1)}}
.auth-visual .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,9,14,.62) 0%,rgba(10,9,14,.28) 34%,rgba(10,9,14,.55) 72%,rgba(10,9,14,.9) 100%)}
.auth-visual > *{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.auth-visual .bg{animation:none;transform:none}}

.auth-logo{display:block;width:74px;height:56px;object-fit:contain;object-position:left;
  filter:drop-shadow(0 1px 10px rgba(10,9,14,.5))}

/* ATTENZIONE all'unità: "ch" è la larghezza di uno zero NEL FONT DI QUESTO
   blocco (Inter 16px), non in quello del titolo che sta dentro. Con 22ch il
   testo restava largo ~220px su 564 disponibili e il titolo andava a capo sei
   volte. Con "em" il limite è leggibile a colpo d'occhio: 36em = 576px, e il
   min(100%,…) fa sì che sugli schermi stretti comandi lo spazio vero. */
.auth-visual-copy{max-width:min(100%,36em)}
.auth-visual .kicker{color:rgba(255,255,255,.82);margin-bottom:24px}
.auth-visual h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,50px);
  /* "pretty" evita solo la parola isolata sull'ultima riga; "balance" invece
     accorcia tutte le righe per pareggiarle, ed è l'ultima cosa che vogliamo
     qui, dove il titolo deve riempire il pannello. */
  line-height:1.04;letter-spacing:-.02em;text-wrap:pretty;text-shadow:0 2px 36px rgba(0,0,0,.35)}
.auth-visual h2 em{font-style:italic;color:#fff;
  background-image:linear-gradient(var(--violet),var(--violet));background-repeat:no-repeat;
  background-size:100% 1.2em;background-position:0 .32em;padding:0 .14em;text-shadow:none;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* I tre passaggi, in versione essenziale: numeri romani come sulla landing */
/* I tre passaggi restano un filo più stretti del titolo: righe troppo lunghe
   di testo piccolo si leggono male. */
.auth-steps{list-style:none;margin:30px 0 0;max-width:min(100%,30em);display:flex;flex-direction:column;gap:14px}
.auth-steps li{display:flex;gap:14px;align-items:baseline;font-size:15px;color:rgba(255,255,255,.8)}
.auth-steps .n{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--orange);
  flex:none;width:26px;letter-spacing:.02em}
.auth-steps b{color:#fff;font-weight:600}

.auth-credit{font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.5)}

/* =====================================================================
   META' DESTRA — la scheda di accesso
   ===================================================================== */
.auth-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(30px,4vw,60px) clamp(20px,4vw,54px);gap:22px}
.auth-back{align-self:flex-start;font-size:13.5px;color:var(--muted);display:inline-flex;
  align-items:center;gap:8px;transition:color .2s}
.auth-back:hover{color:var(--ink)}
.auth-card{width:100%;max-width:436px;background:#fff;border:1px solid var(--line);
  border-radius:26px;padding:clamp(24px,2.6vw,32px);box-shadow:0 30px 60px -46px rgba(20,18,26,.55)}

/* Interruttore Accedi / Crea account */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#f2ede4;
  border-radius:100px;padding:4px;margin-bottom:22px}
.auth-tabs button{border-radius:100px;padding:10px 8px;font-size:14.5px;font-weight:600;
  color:var(--muted);transition:background .22s,color .22s,box-shadow .22s}
.auth-tabs button:hover{color:var(--ink)}
.auth-tabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 10px -2px rgba(20,18,26,.18)}

.auth-card h1{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,33px);
  line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.auth-card .sub{color:var(--muted);font-size:15px;margin-bottom:22px}

/* ---- Campi ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;letter-spacing:.01em}
.field .box{position:relative}
.field input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#a9a3b2}
.field input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(108,79,224,.13)}
.field .peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:8px 12px;
  font-size:12.5px;font-weight:600;color:var(--muted);border-radius:10px}
.field .peek:hover{color:var(--violet)}
.field input[type="password"],.field .has-peek input{padding-right:88px}
/* stato di errore: bordo rosso + riga di spiegazione sotto */
.field.err input{border-color:#d0574f;box-shadow:0 0 0 4px rgba(208,87,79,.1)}
.field .msg{display:none;margin-top:7px;font-size:12.5px;color:#c04a43}
.field.err .msg{display:block}

/* Il campo "nome" entra in dissolvenza invece di apparire di colpo:
   il passaggio da Accedi a Crea account risulta più morbido. */
@keyframes fieldIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
#f-name:not(.hidden){animation:fieldIn .26s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){#f-name:not(.hidden){animation:none}}

.field-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:4px 0 22px;font-size:13.5px}
.check{display:inline-flex;align-items:center;gap:9px;color:var(--muted);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--violet);cursor:pointer}
.link-quiet{color:var(--muted);border-bottom:1px solid transparent;transition:.2s}
.link-quiet:hover{color:var(--violet);border-color:currentColor}

.auth-card .btn{width:100%;justify-content:center}

/* ---- "oppure" ---- */
.auth-or{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--muted);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

.btn-social{width:100%;justify-content:center;background:#fff;border:1.5px solid var(--line);
  color:var(--ink);font-weight:600;position:relative}
.btn-social:hover{background:var(--cream);transform:none}
.btn-social svg{width:19px;height:19px;flex:none}
.btn-social .soon{position:absolute;right:14px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

.auth-guest{margin-top:18px;text-align:center;font-size:14px;color:var(--muted)}
.auth-guest button{font-weight:600;color:var(--violet);border-bottom:1px solid rgba(108,79,224,.35);
  border-radius:0;padding:0;transition:border-color .2s}
.auth-guest button:hover{border-color:var(--violet)}

.auth-legal{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);line-height:1.6}
.auth-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.auth-legal a:hover{color:var(--ink)}

/* Avviso in cima alla scheda (sessione già attiva, oppure "presto disponibile") */
.auth-note{display:none;align-items:flex-start;gap:11px;background:rgba(108,79,224,.07);
  border:1px solid rgba(108,79,224,.18);border-radius:14px;padding:13px 15px;margin-bottom:20px;
  font-size:13.5px;color:#4a4553}
.auth-note.show{display:flex}
.auth-note b{color:var(--ink)}
/* Avviso "sei già entrato": frase su una riga e bottone sotto, a tutta
   larghezza, così l'azione da fare si vede senza doverla cercare nel testo. */
.auth-note .riga{display:block;margin-top:3px}
.auth-note .btn-continua{display:flex;width:100%;justify-content:center;
  margin-top:14px;padding:11px 20px;font-size:14.5px}
/* Il :not(.btn) è indispensabile: senza, questa riga vince sul colore del
   bottone (elemento+classe batte la sola classe) e "Continua" diventava
   viola sottolineato su fondo nero, illeggibile. Stesso inciampo già visto
   in landing.css con `.lp button`: i bottoni si vestono da soli. */
.auth-note a:not(.btn){color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
   DESKTOP — la foto sta ferma
   Queste regole stanno IN FONDO apposta: a parità di "peso" vince l'ultima
   scritta nel file, quindi qui possiamo correggere i valori dichiarati sopra.
   ===================================================================== */
@media (min-width:901px){
  /* La foto è alta quanto lo schermo e resta incollata in alto: scorre solo
     la metà destra. Così quando la scheda si allunga (campo "nome" della
     registrazione) l'immagine non si sposta di un pixel. */
  .auth{align-items:start}
  .auth-visual{position:sticky;top:0;height:100svh}
  .auth-panel{min-height:100svh}
}
/* Schermi bassi (portatili da 13"): margini più stretti attorno alla scheda,
   così l'accesso si vede tutto senza dover scorrere. */
@media (min-width:901px) and (max-height:900px){
  .auth-panel{padding-top:26px;padding-bottom:26px;gap:14px}
}

/* =====================================================================
   MOBILE — la foto diventa una fascia in alto, la scheda scorre sotto
   ===================================================================== */
@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-visual{min-height:44svh;padding:22px 20px 26px}
  .auth-visual-copy{max-width:min(100%,24em)}
  .auth-steps{display:none}          /* su mobile toglie rumore: restano titolo e foto */
  .auth-credit{display:none}
  .auth-panel{padding:26px 20px 44px}
  .auth-back{margin-bottom:-4px}
}
@media (max-width:560px){
  .auth-visual{min-height:0;padding:20px}
  .auth-visual h2{font-size:clamp(24px,7vw,32px)}
  .auth-card{padding:24px 20px;border-radius:22px}
  .field-row{flex-wrap:wrap;gap:10px}
}