/*
 * TEMA "QUADERNO" per le pagine di accesso (login, registrati, password
 * dimenticata, codice via email/WhatsApp) — condiviso dagli 8 file sotto
 * public/web/views/{login,register,register-invite-required,forgot-password,
 * login-code-request,login-code-verify,reset-password,imposta-password}.php.
 * Importa PRIMA quaderno-theme.css (palette/font/cursore/riquadri gia'
 * validati sulle altre pagine v2): qui vive solo cio' che e' specifico di
 * una pagina di accesso — niente header/sidebar, un'unica colonna centrata,
 * il marchio scritto a mano, le icone che galleggiano sullo sfondo, la
 * transizione di scorrimento fra una schermata e l'altra.
 */

/* Niente riquadro-app (header nascosto gia' da quaderno-theme.css) — qui
   in piu' si toglie anche l'entrata "foglio che si volta" di main.app-main:
   le pagine di accesso scorrono lateralmente fra loro (vedi piu' sotto),
   un'unica animazione sarebbe ridondante con quella. */
main.app-main { animation: none !important; max-width: none; padding-top: 0; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow-x: hidden; }

.qb-auth-stage { position: relative; z-index: 2; width: 100%; max-width: 26rem; margin: 2.4rem auto; padding: 0 1rem; display: flex; flex-direction: column; align-items: center; }

/* ---- Marchio scritto a mano: si rivela una volta sola all'arrivo sul
   login vero e proprio; sulle altre schermate di accesso compare gia'
   scritto (classe qb-static), per non ripetere l'animazione ad ogni
   passaggio fra login/registrati/password/codice. ---- */
.qb-wordmark-wrap { position: relative; display: inline-block; font-size: clamp(2.6rem, 9vw + .9rem, 4.2rem); }
.qb-wordmark {
  font-family: 'Permanent Marker', cursive; font-weight: 400; font-size: 1em; line-height: 1; color: var(--zinc-900);
  clip-path: inset(0 100% 0 0); animation: qb-write 1.3s cubic-bezier(.65,.05,.36,1) .25s forwards;
}
.qb-wordmark.qb-static { clip-path: inset(0 0 0 0); animation: none; }
.qb-tagline { margin-top: .5em; font-size: .88rem; color: var(--zinc-500); text-align: center; opacity: 0; transform: translateY(6px); animation: qb-fade-up .5s ease 1.55s forwards; }
.qb-tagline.qb-static { opacity: 1; transform: none; animation: none; }
.qb-footer-note { margin-top: .1em; font-size: .68rem; color: var(--zinc-400); font-family: 'Space Mono', monospace; text-align: center; }
@keyframes qb-write { to { clip-path: inset(0 0 0 0); } }
@keyframes qb-fade-up { to { opacity: 1; transform: translateY(0); } }
.qb-brand-block { display: flex; flex-direction: column; align-items: center; gap: .1em; margin-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) { .qb-wordmark { animation: none; clip-path: inset(0 0 0 0); } .qb-tagline { animation: none; opacity: 1; transform: none; } }

/* ---- Solo sul login vero e proprio (il primo arrivo): dopo che il
   marchio ha finito di scriversi, il modulo sotto si rivela come una
   pagina di quaderno che si volta verso chi guarda — non un semplice
   fade, una vera rotazione 3D con prospettiva, sulla stessa cadenza
   gia' usata per le sheet/pagine v2 ma piu' marcata, da momento di
   marchio. Attiva un'unica volta all'arrivo, non ad ogni rinavigazione
   (le altre schermate di accesso restano con l'ingresso rapido). ---- */
.qb-login-reveal {
  width: 100%; opacity: 0; transform-origin: top center;
  animation: qb-login-page-turn .7s cubic-bezier(.22,.85,.32,1) 1.5s both;
  /* BUG corretto: durante il ritardo/rotazione 3D (fino a ~2.2s dopo il
     caricamento) il modulo restava comunque cliccabile ma spostato/ruotato
     fuori dalla sua posizione finale — un click impaziente sul punto dove
     il bottone "Entra" sara' non colpiva nulla (il vero riquadro e' altrove,
     ruotato), sembrando che il pulsante non rispondesse al primo tap.
     pointer-events:none finche' l'animazione non e' davvero finita — tolto
     via JS all'evento "animationend" (vedi quaderno-auth.js), con uno
     style inline che vince sempre sulla cascata: piu' affidabile di provare
     a scandire pointer-events dentro i keyframe stessi. */
  pointer-events: none;
}
@keyframes qb-login-page-turn {
  0%   { opacity: 0; transform: perspective(1300px) rotateX(-75deg) translateY(22px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(1300px) rotateX(0deg) translateY(0); }
}
.qb-login-reveal.qb-static { opacity: 1; transform: none; animation: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .qb-login-reveal { animation: none; opacity: 1; pointer-events: auto; } }

h2.qb-form-title { font-size: 1.1rem; margin: 0 0 .35rem; text-align: center; color: var(--zinc-700); font-weight: 700; font-family: 'Quicksand', sans-serif; }
p.qb-form-sub { margin: 0 0 1.2rem; text-align: center; font-size: .82rem; color: var(--zinc-500); line-height: 1.5; }

.qb-auth-form { width: 100%; }
.qb-field { position: relative; transform: rotate(var(--tilt, 0deg)); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.qb-field:nth-of-type(3n+1) { --tilt: -.4deg; }
.qb-field:nth-of-type(3n+2) { --tilt: .4deg; }
.qb-field:nth-of-type(3n) { --tilt: -.25deg; }
.qb-field:hover, .qb-field:focus-within { transform: rotate(0deg) translateY(-2px); }
.qb-field label .opt { font-weight: 400; color: var(--zinc-400); }
.qb-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201c17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; padding-right: 2.2rem; appearance: none;
}
.qb-field textarea { resize: vertical; min-height: 4.5rem; }

.qb-code-input { text-align: center; font-family: 'Space Mono', monospace !important; font-size: 1.4rem !important; letter-spacing: .5em; padding-left: .5em !important; }

.qb-link-row { margin-top: 1rem; text-align: center; font-size: .84rem; color: var(--zinc-500); }
.qb-link-row a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.qb-link-row a:hover { text-decoration: underline; }
.qb-link-row .row { margin-top: .5rem; }
.qb-back-row { margin-bottom: 1rem; font-size: .84rem; text-align: left; width: 100%; }
.qb-back-row a { color: var(--zinc-500); font-weight: 700; text-decoration: none; }
.qb-back-row a:hover { color: var(--brand-700); }

/* Notice/errore in stile "carta" invece del banner colorato pieno del
   layout base — bordo a inchiostro, sfondo carta, solo il testo cambia
   tinta (coerente con la palette carta gia' in uso su tutte le v2). */
.qb-auth-stage .error, .qb-auth-stage .notice {
  border: 2px solid var(--zinc-900) !important; border-radius: 4px 10px 4px 10px !important;
  background: var(--panel) !important; box-shadow: none !important;
}
.qb-auth-stage .error { color: var(--brand-700); }
.qb-auth-stage .notice { color: var(--zinc-700); }

/* ---- Card di conferma "richiesta inviata" (spunta disegnata + testo). ---- */
.qb-sent-card { width: 100%; text-align: center; }
.qb-sent-card .qb-check-wrap { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem; border-radius: 50%; border: 2px solid var(--brand-600); display: flex; align-items: center; justify-content: center; color: var(--brand-600); }
.qb-sent-card .qb-check-wrap svg { width: 1.5rem; height: 1.5rem; }
.qb-sent-card p { color: var(--zinc-600); font-size: .88rem; line-height: 1.5; margin: 0; }

/* ---- Canale del codice: email (attivo) o WhatsApp (in arrivo — solo
   interfaccia per ora, il backend arriva in un secondo momento: disabilitato
   con un'etichetta invece di far finta che funzioni gia'). ---- */
.qb-channel-switch { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.qb-channel-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .4rem;
  font-size: .82rem; font-weight: 700; font-family: 'Quicksand', sans-serif; color: var(--zinc-500); background: var(--panel);
  border: 2px solid var(--zinc-900); border-radius: 4px 10px 4px 10px; cursor: pointer; transition: background .18s;
}
.qb-channel-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.qb-channel-btn.qb-active { background: var(--brand-50); color: var(--zinc-900); }
.qb-channel-btn[disabled] { cursor: not-allowed; opacity: .55; }
.qb-channel-btn[disabled]:hover { background: var(--panel); }
.qb-channel-btn .qb-soon { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--zinc-400); margin-left: .15rem; }

/* ---- Icone che rimbalzano lente sullo sfondo: aeroplani di carta e
   telefoni alati, colore inchiostro (opposto della carta, non un accento a
   parte) — texture di sfondo calma, sempre dietro al contenuto. ---- */
#qb-float-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.qb-floaty { position: fixed; top: 0; left: 0; color: var(--zinc-900); opacity: .34; }
.qb-floaty svg { width: 100%; height: 100%; display: block; }
.qb-floaty.f1 { width: 84px; height: 56px; animation: qb-bounce-a 46s linear infinite; }
.qb-floaty.f2 { width: 58px; height: 50px; animation: qb-bounce-b 52s linear infinite; }
.qb-floaty.f3 { width: 64px; height: 42px; animation: qb-bounce-c 40s linear infinite reverse; animation-delay: -18s; }
.qb-floaty.f4 { width: 52px; height: 45px; animation: qb-bounce-b 58s linear infinite reverse; animation-delay: -30s; }
@keyframes qb-bounce-a {
  0%   { transform: translate(4vw, 10vh) rotate(-6deg); }
  33%  { transform: translate(78vw, 18vh) rotate(10deg); }
  66%  { transform: translate(58vw, 78vh) rotate(-10deg); }
  100% { transform: translate(4vw, 10vh) rotate(-6deg); }
}
@keyframes qb-bounce-b {
  0%   { transform: translate(80vw, 8vh) rotate(8deg); }
  33%  { transform: translate(14vw, 30vh) rotate(-10deg); }
  66%  { transform: translate(24vw, 82vh) rotate(12deg); }
  100% { transform: translate(80vw, 8vh) rotate(8deg); }
}
@keyframes qb-bounce-c {
  0%   { transform: translate(46vw, 6vh) rotate(0deg); }
  33%  { transform: translate(88vw, 55vh) rotate(14deg); }
  66%  { transform: translate(12vw, 68vh) rotate(-12deg); }
  100% { transform: translate(46vw, 6vh) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .qb-floaty { display: none; } }

/* ---- Transizione di scorrimento fra le pagine di accesso (vedi
   quaderno-auth.js): niente sfogliata 3D come fra le pagine v2 interne —
   qui e' un vero e proprio passaggio "a lato" fra login/registrati/
   password/codice, coerente con l'essere una sequenza di passi. ---- */
.qb-auth-in-r { animation: qb-slide-in-r .4s cubic-bezier(.22,1,.36,1) both; }
.qb-auth-in-l { animation: qb-slide-in-l .4s cubic-bezier(.22,1,.36,1) both; }
.qb-auth-in-fade { animation: qb-fade-up .4s ease both; }
.qb-auth-out-r { animation: qb-slide-out-r .3s cubic-bezier(.4,0,1,.6) both; }
.qb-auth-out-l { animation: qb-slide-out-l .3s cubic-bezier(.4,0,1,.6) both; }
@keyframes qb-slide-in-r { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qb-slide-in-l { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes qb-slide-out-r { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-26px); } }
@keyframes qb-slide-out-l { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(26px); } }
@media (prefers-reduced-motion: reduce) {
  .qb-auth-in-r, .qb-auth-in-l, .qb-auth-in-fade, .qb-auth-out-r, .qb-auth-out-l { animation: none !important; }
}

/* "Ricordami su questo dispositivo": casella semplice sopra il pulsante, spuntata di default. */
.qb-remember { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .9rem; font-size: .82rem; font-weight: 600; color: var(--zinc-600, #57534e); cursor: pointer; }
.qb-remember input { width: auto; margin: 0; }