/* ARES NEURAL GATE — il vestito della sola pagina /login.
 *
 * PERIMETRO. Questo foglio e' collegato SOLTANTO da
 * `src/templates/auth/login.html`, nel suo blocco `testa`, e viene DOPO
 * `design/auth.css`. Le altre tre pagine di `auth/` non lo caricano e non
 * cambiano di un pixel: il confine e' l'indirizzo del foglio, non una
 * convenzione.
 *
 * PERCHE' UN FOGLIO NUOVO. `auth.css` veste quattro pagine. Farlo cambiare
 * per ridisegnarne una costringerebbe ad alzare la sua `?v=` e a invalidare
 * la cache delle altre tre per una superficie che non le riguarda. Un foglio
 * nuovo ha un indirizzo che nessun browser ha mai visto: il difetto «stesso
 * indirizzo, contenuto diverso» qui non puo' esistere.
 *
 * PERCHE' I COLORI SONO SCRITTI E NON PRESI DAI TOKEN. La tavolozza di
 * questa pagina e' VINCOLANTE e arriva dal proprietario valore per valore.
 * Prenderla dai token del tema significherebbe farla cambiare il giorno in
 * cui il tema cambia, cioe' non rispettarla. I valori stanno tutti in un
 * blocco solo, qui sotto, e non sono ripetuti altrove nel foglio.
 *
 * PERCHE' NESSUN `var(--nome, ripiego)`. Un ripiego dietro un nome che non
 * esiste vince per sempre ed e' verde in ogni prova. Ogni nome consumato qui
 * e' dichiarato qui.
 *
 * CHE COSA NON TOCCA. Nulla dell'autenticazione: rotta, metodo, nomi dei
 * campi, `autocomplete`, CSRF, Turnstile, la macchina a due fattori, i testi
 * degli errori. Questo foglio sposta pixel.
 *
 * LA CARTA NON SI MUOVE. Si anima l'ambiente intorno. Nessuna regola di
 * questo foglio applica `transform`, `top`, `left`, `margin` o `zoom` a
 * `.ares-auth-card` ne' ai suoi campi: il difetto classico di una pagina
 * «cinematografica» e' un modulo che scappa sotto il dito.
 */

/* ------------------------------------------------------------------ *
 * 0. La tavolozza vincolante                                          *
 * ------------------------------------------------------------------ */

body.ares-auth {
  --gate-bg: #030817;
  --gate-bg-2: #07172f;
  --gate-card-top: rgba(14, 38, 75, .98);
  --gate-card-bottom: rgba(5, 18, 43, .99);
  --gate-blue: #3975ff;
  --gate-cyan: #29b6ff;
  --gate-gold: #e5b24b;
  --gate-text: #f4f9ff;
  --gate-card-title: #ffffff;
  --gate-text-2: #c7d6e8;
  --gate-card-text-2: #c0d0e2;
  --gate-label: #edf6ff;
  --gate-link: #a4e1ff;
  --gate-ok: #33e49b;
  /* Il blu del COMANDO, misurato: vedi la nota su `.ares-auth-submit`. */
  --gate-cta: #2f63e0;
  --gate-cta-scuro: #1f47b8;

  background-color: var(--gate-bg);
  color: var(--gate-text);
}

/* ------------------------------------------------------------------ *
 * 1. Lo sfondo                                                        *
 * ------------------------------------------------------------------ */

/* `.ares-auth-field` esiste gia' nella shell, e' `aria-hidden` e non
 * intercetta il puntatore. Qui cambia soltanto CHE COSA disegna. */
.ares-auth .ares-auth-field {
  background-color: var(--gate-bg);
  background-image:
    radial-gradient(1180px 680px at 12% -6%, rgba(41, 182, 255, .20), transparent 62%),
    radial-gradient(1020px 600px at 94% 104%, rgba(57, 117, 255, .22), transparent 60%),
    linear-gradient(168deg, var(--gate-bg) 0%, var(--gate-bg-2) 52%, var(--gate-bg) 100%);
}

/* La grana. Finissima e a bassissima opacita': una texture che si NOTA
 * somiglia a compressione, ed e' il difetto che il mandato vieta. */
.ares-auth .ares-auth-field::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .013) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .010) 0 1px, transparent 1px 3px);
  background-size: auto;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .9;
}

/* La scena animata sta in fondo al `body`, e' decorativa e non riceve
 * eventi. `z-index: 0` la tiene sotto `.ares-auth-stage`, che e' a 1. */
.gate-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

/* 1.1 — La griglia prospettica.
 * Un piano ruotato su X con due gradienti ripetuti. Scorre verso chi guarda
 * muovendo `background-position`, che su questo elemento non provoca
 * ridisegno del testo: la scena e' un livello a se'. */
.gate-grid {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -26vh;
  height: 96vh;
  transform: perspective(620px) rotateX(74deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(to right, rgba(41, 182, 255, .42) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(41, 182, 255, .30) 0 1px, transparent 1px 84px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 82%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 82%);
  animation: gate-grid-scorre 4s linear infinite;
  will-change: background-position;
}

@keyframes gate-grid-scorre {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 84px; }
}

/* 1.2 — I fasci.
 * Tre diagonali con tempi diversi, cosi' non battono mai insieme: un
 * lampeggio regolare e' la cosa che rende una pagina fastidiosa. */
.gate-beam {
  position: absolute;
  top: -40%;
  height: 180%;
  width: 22vw;
  min-width: 160px;
  opacity: 0;
  transform: translateX(-30vw) rotate(18deg);
  will-change: transform, opacity;
  filter: blur(2px);
}

.gate-beam-1 {
  background-image: linear-gradient(90deg, transparent, rgba(41, 182, 255, .17), transparent);
  animation: gate-fascio 6.5s linear infinite;
}

.gate-beam-2 {
  background-image: linear-gradient(90deg, transparent, rgba(57, 117, 255, .20), transparent);
  animation: gate-fascio 8s linear infinite 2.1s;
}

.gate-beam-3 {
  width: 12vw;
  background-image: linear-gradient(90deg, transparent, rgba(229, 178, 75, .10), transparent);
  animation: gate-fascio 5.2s linear infinite 3.6s;
}

@keyframes gate-fascio {
  0%   { transform: translateX(-34vw) rotate(18deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(124vw) rotate(18deg); opacity: 0; }
}

/* 1.3 — La scansione ambientale. Una fascia tenue, nessun flash. */
.gate-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42vh;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(41, 182, 255, .055) 46%,
    rgba(41, 182, 255, .085) 50%,
    rgba(41, 182, 255, .055) 54%,
    transparent 100%);
  transform: translateY(-46vh);
  animation: gate-scansione 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes gate-scansione {
  0%   { transform: translateY(-46vh); }
  100% { transform: translateY(104vh); }
}

/* 1.4 — La convergenza dell'accesso riuscito.
 * Inerte finche' `neural-gate.js` non mette la classe sul `body`, e lo fa
 * SENZA trattenere l'invio: se il browser naviga subito, questa non si vede
 * affatto ed e' il comportamento voluto. L'autenticazione viene prima. */
.gate-converge {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: radial-gradient(60vmax 60vmax at 50% 50%, rgba(41, 182, 255, .30), transparent 62%);
  transform: scale(1.35);
}

body.ares-auth.gate-in-accesso .gate-converge {
  animation: gate-convergenza 520ms ease-out forwards;
}

@keyframes gate-convergenza {
  0%   { opacity: 0; transform: scale(1.35); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.86); }
}

/* ------------------------------------------------------------------ *
 * 2. Il palco                                                         *
 * ------------------------------------------------------------------ */

.ares-auth .ares-auth-stage {
  padding: 68px 48px 40px;
  gap: 24px;
}

.ares-auth .ares-auth-panel {
  max-width: 1260px;
}

/* LE GARANZIE STANNO CON L'IDENTITA', NON SOSPESE SOTTO LA CARTA.
 * Sono tre affermazioni sul sistema, non un piede del modulo: appese sotto
 * la carta galleggiavano senza un blocco a cui appartenere. Nella colonna
 * sinistra continuano il discorso che comincia col titolo e finisce con lo
 * stato, e la griglia lo dice con le aree invece di duplicare il markup. */
@media (min-width: 1080px) {
  .ares-auth .ares-auth-panel {
    grid-template-columns: minmax(320px, 1fr) minmax(440px, 520px);
    grid-template-areas:
      "intro  carta"
      "claims carta";
    column-gap: 52px;
    row-gap: 26px;
    align-items: center;
    align-content: center;
  }

  .ares-auth .ares-auth-intro { align-self: end; }
  .ares-auth .ares-auth-card { align-self: center; }
  .ares-auth .ares-auth-claims { align-self: start; }
}

/* Sotto i 1080 la colonna e' una: le garanzie restano comunque ATTACCATE
 * all'identita' e non alla carta, quindi salgono sopra di lei. */
@media (max-width: 1079px) {
  .ares-auth .ares-auth-panel {
    grid-template-areas:
      "intro"
      "claims"
      "carta";
  }
}

/* ------------------------------------------------------------------ *
 * 3. Il marchio e i suoi anelli                                       *
 * ------------------------------------------------------------------ */

/* IL LOGO E' QUELLO CANONICO E NON SI TOCCA. `ares-logo.png`, 771x214,
 * inchiostro `RGB(17,51,91)`: su fondo scuro darebbe 1.58:1, cioe' non si
 * vedrebbe. La piastra chiara non e' un vezzo, e' la condizione perche' il
 * marchio esista — e per questo resta. Gli anelli girano DIETRO di lei. */
.ares-auth .ares-auth-intro {
  position: relative;
  gap: 22px;
}

.ares-auth .ares-auth-plate {
  position: relative;
  width: 268px;
  padding: 18px 22px;
  background: transparent;
  border-bottom: 3px solid var(--gate-blue);
  /* LE TRE OMBRE CADONO TUTTE, E LA RAGIONE E' MISURATA SULLO SCATTO.
   *
   * Un `box-shadow` disegna la SAGOMA dell'elemento: su una scatola di 268x101
   * resa trasparente, tutte e tre continuano a dipingere un RETTANGOLO --
   * `0 0 0 1px` come filo netto, `0 0 46px` come alone sfocato, `0 18px 44px`
   * come velo sotto. Guardato lo scatto: il contorno del vecchio rettangolo
   * era ancora li', in un'altra tinta. Non sono aloni DEL MARCHIO: sono l'ombra
   * DELLA PIASTRA, e la piastra e' cio' che doveva sparire.
   *
   * Gli effetti che stanno sotto e intorno al logo NON sono questi: sono i tre
   * anelli che ruotano, disegnati dagli pseudo-elementi `::before`/`::after` di
   * `.ares-auth-intro` e di `.ares-auth-plate`. Quelli restano intatti -- nome,
   * durata, ritardo e traiettoria delle animazioni non sono toccati -- e con il
   * fondo trasparente si vedono anche dove prima la piastra li copriva. */
  box-shadow: none;
}

/* I tre anelli: due dall'identita', uno dalla piastra. Tutti a `z-index: -1`
 * dentro il contesto di `.ares-auth-stage`, quindi dipinti SOTTO il fondo
 * opaco della piastra: possono attraversarla senza mai coprire il marchio. */
.ares-auth .ares-auth-intro::before,
.ares-auth .ares-auth-intro::after,
.ares-auth .ares-auth-plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.ares-auth .ares-auth-intro::before {
  width: 330px;
  height: 176px;
  left: 134px;
  top: 69px;
  margin: -88px 0 0 -165px;
  border: 1px solid rgba(41, 182, 255, .34);
  border-top-color: rgba(41, 182, 255, .92);
  box-shadow: 0 0 26px rgba(41, 182, 255, .20);
  animation: gate-anello-orario 18s linear infinite;
}

.ares-auth .ares-auth-intro::after {
  width: 266px;
  height: 142px;
  left: 134px;
  top: 69px;
  margin: -71px 0 0 -133px;
  border: 1px solid rgba(57, 117, 255, .30);
  border-bottom-color: rgba(229, 178, 75, .85);
  animation: gate-anello-antiorario 13s linear infinite;
}

.ares-auth .ares-auth-plate::before {
  width: 206px;
  height: 118px;
  left: 50%;
  top: 50%;
  margin: -59px 0 0 -103px;
  border: 1px solid rgba(41, 182, 255, .26);
  border-left-color: rgba(41, 182, 255, .78);
  animation: gate-anello-orario 9s linear infinite;
}

@keyframes gate-anello-orario {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes gate-anello-antiorario {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* ------------------------------------------------------------------ *
 * 4. La colonna d'identita'                                           *
 * ------------------------------------------------------------------ */

.ares-auth .ares-auth-kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gate-cyan);
  text-shadow: 0 0 18px rgba(41, 182, 255, .35);
}

/* DUE RIGHE, MAI TRE. Il vincolo e' del mandato, e non si rispetta a
 * occhio: `max-width: 13ch` spezzava il titolo in tre righe a 1440. Con
 * `17ch` e il tetto a 62px le due righe ci stanno a tutte e quattro le
 * misure desktop, e `IL_TITOLO_STA_IN_DUE_RIGHE` lo misura sul reso
 * dividendo l'altezza per l'interlinea. */
.ares-auth .ares-auth-title {
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--gate-text);
  max-width: 17ch;
  text-wrap: balance;
}

.ares-auth .ares-auth-lead {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--gate-text-2);
}

/* Lo stato. Nessun numero, nessuna percentuale, nessun dato operativo
 * inventato: una riga sola, e dice una cosa vera. */
.gate-stato {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gate-text-2);
}

.gate-stato::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gate-ok);
  box-shadow: 0 0 0 4px rgba(51, 228, 155, .16), 0 0 14px rgba(51, 228, 155, .75);
  animation: gate-battito 2.8s ease-in-out infinite;
}

@keyframes gate-battito {
  0%, 100% { opacity: 1; }
  50%      { opacity: .42; }
}

/* ------------------------------------------------------------------ *
 * 5. La carta — FERMA                                                 *
 * ------------------------------------------------------------------ */

.ares-auth .ares-auth-card {
  position: relative;
  overflow: hidden;
  padding: 38px 40px 34px;
  border-radius: 20px;
  border: 1px solid rgba(41, 182, 255, .30);
  background-color: var(--gate-card-bottom);
  background-image: linear-gradient(180deg, var(--gate-card-top) 0%, var(--gate-card-bottom) 62%);
  box-shadow:
    0 40px 90px rgba(2, 6, 18, .72),
    0 0 0 1px rgba(3, 8, 23, .55),
    0 0 44px rgba(41, 182, 255, .12);
  animation: gate-alone-carta 6s ease-in-out infinite;
}

/* L'alone respira. La carta NO: nessun `transform`, nessuno spostamento,
 * nessun cambio di dimensione. `box-shadow` ridipinge e non rilega. */
@keyframes gate-alone-carta {
  0%, 100% {
    box-shadow:
      0 40px 90px rgba(2, 6, 18, .72),
      0 0 0 1px rgba(3, 8, 23, .55),
      0 0 44px rgba(41, 182, 255, .12);
  }
  50% {
    box-shadow:
      0 40px 90px rgba(2, 6, 18, .72),
      0 0 0 1px rgba(3, 8, 23, .55),
      0 0 68px rgba(41, 182, 255, .26);
  }
}

/* La linea che percorre il bordo alto. Un pseudo-elemento dentro la carta,
 * quindi non sposta nulla e non intercetta il puntatore. */
.ares-auth .ares-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  pointer-events: none;
  background-image: linear-gradient(90deg, transparent, var(--gate-cyan), transparent);
  transform: translateX(-100%);
  animation: gate-linea-bordo 5.6s linear infinite;
  will-change: transform;
}

@keyframes gate-linea-bordo {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

.ares-auth .ares-auth-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gate-card-text-2);
}

.gate-marca {
  color: var(--gate-gold);
  font-weight: 800;
  letter-spacing: 0.3em;
}

.gate-marca::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-left: 10px;
  vertical-align: -1px;
  background: rgba(229, 178, 75, .5);
}

/* IL TITOLO DELLA CARTA NON EREDITA NULLA. `#ffffff` scritto, non un token:
 * la regola globale degli `h2` in `dashboard.css` qui perdeva contrasto, ed
 * e' esattamente il difetto che il mandato nomina. */
.ares-auth .ares-auth-card h2 {
  margin: 0 0 10px;
  font-size: 31px;
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 22px rgba(41, 182, 255, .28);
}

.ares-auth .ares-auth-card-note {
  /* L'introduzione respira prima del primo campo: 26px erano il passo del
   * modulo, e con lo stesso passo l'introduzione sembrava un'etichetta. */
  margin-bottom: 30px;
  font-size: 14.5px;
  color: var(--gate-card-text-2);
}

/* ------------------------------------------------------------------ *
 * 6. I campi — fermi anche loro                                       *
 * ------------------------------------------------------------------ */

/* Un passo solo fra i due campi, e uno PIU' LARGO prima del comando: il
 * widget e il pulsante sono due cose diverse e attaccarle invita a premere
 * mentre il widget sta ancora lavorando. */
.ares-auth .ares-auth-form { gap: 22px; }
.ares-auth .ares-auth-submit { margin-top: 4px; }

.ares-auth .ares-auth-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gate-label);
}

.ares-auth .ares-auth-field-row {
  position: relative;
  gap: 9px;
}

.ares-auth .ares-auth-input {
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(41, 182, 255, .26);
  background: rgba(2, 8, 22, .88);
  color: var(--gate-text);
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ares-auth .ares-auth-secret .ares-auth-input { padding-right: 58px; }

.ares-auth .ares-auth-input::placeholder { color: #8fa6c2; }

.ares-auth .ares-auth-input:hover { border-color: rgba(41, 182, 255, .48); }

/* Al fuoco il bordo si accende e il campo NON si muove: nessun `transform`,
 * nessun cambio di dimensione, nessun margine. L'impulso e' una `box-shadow`
 * che parte da zero e resta dentro l'area del campo. */
.ares-auth .ares-auth-input:focus {
  outline: none;
  border-color: var(--gate-cyan);
  background: rgba(3, 12, 30, .95);
  box-shadow: 0 0 0 3px rgba(41, 182, 255, .20);
  animation: gate-impulso-campo 620ms ease-out 1;
}

@keyframes gate-impulso-campo {
  0%   { box-shadow: 0 0 0 0 rgba(41, 182, 255, .55); }
  100% { box-shadow: 0 0 0 3px rgba(41, 182, 255, .20); }
}

.ares-auth .ares-auth-input:focus-visible {
  outline: 2px solid var(--gate-cyan);
  outline-offset: 2px;
}

.ares-auth .ares-auth-input[aria-invalid="true"] { border-color: #ff6b6b; }

.ares-auth .ares-auth-peek { color: var(--gate-card-text-2); }
.ares-auth .ares-auth-peek:hover { background: rgba(41, 182, 255, .12); color: var(--gate-text); }
.ares-auth .ares-auth-peek:focus-visible { outline: 2px solid var(--gate-cyan); outline-offset: 2px; }

/* IL WIDGET E' QUELLO VERO E VUOLE IL SUO SPAZIO. Nessun livello animato gli
 * passa sopra: la scena e' `pointer-events: none` e sta a `z-index: 0`,
 * questa riga sta dentro la carta. */
.ares-auth .ares-auth-turnstile {
  min-height: 70px;
  padding: 2px 0;
  /* CENTRATO IL CONTENITORE, NON GLI INTERNI. `justify-content` agisce sul
   * riquadro del widget dentro la riga: cio' che sta DENTRO l'iframe non lo
   * tocca nessuno, e non deve. Larghezza, sitekey, configurazione e fascia
   * della chiave di prova restano quelle che Cloudflare disegna. */
  justify-content: center;
}

/* ------------------------------------------------------------------ *
 * 7. Il comando                                                       *
 * ------------------------------------------------------------------ */

.ares-auth .ares-auth-submit {
  min-height: 56px;
  padding: 16px 22px;
  border-radius: 12px;
  background-color: var(--gate-cta);
  /* Due strati: la scia e il fondo. La scia si muove con
   * `background-position`, quindi non serve un pseudo-elemento sopra il
   * testo — e il testo non puo' finirci sotto.
   *
   * PERCHE' IL FONDO NON E' `--gate-blue`. Misurato sul reso, non sui token:
   * bianco su `#3975ff` da' 4.07:1, cioe' SOTTO il 4.5 di WCAG AA per un
   * testo di 15.5px che non e' «testo grande». Il blu elettrico della
   * tavolozza resta l'identita' della pagina — bordi, aloni, anelli,
   * griglia, fasci — e il solo posto in cui cede e' il fondo di un testo:
   * li' l'estremo PIU' CHIARO del gradiente e' `#2f63e0` (5.27:1) e il piu'
   * scuro `#1f47b8` (7.92:1), quindi ogni punto della sfumatura passa.
   * Il contrasto va misurato nel punto peggiore, non in media. */
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%),
    linear-gradient(135deg, var(--gate-cta) 0%, var(--gate-cta-scuro) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  background-repeat: no-repeat;
  color: #ffffff;
  font-size: 15.5px;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 26px rgba(57, 117, 255, .34);
  transition: background-position 620ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.ares-auth .ares-auth-submit:hover {
  filter: none;
  background-position: -40% 0, 0 0;
  box-shadow: 0 12px 32px rgba(57, 117, 255, .48);
}

/* L'impulso alla pressione: la carta non si muove, il comando si'. E' il
 * solo elemento del modulo a cui e' concesso, ed e' quello che l'utente sta
 * premendo in quell'istante. */
.ares-auth .ares-auth-submit:active {
  transform: translateY(1px);
  animation: gate-impulso-comando 320ms ease-out 1;
}

@keyframes gate-impulso-comando {
  0%   { box-shadow: 0 0 0 0 rgba(41, 182, 255, .55), 0 10px 26px rgba(57, 117, 255, .34); }
  100% { box-shadow: 0 0 0 14px rgba(41, 182, 255, 0), 0 10px 26px rgba(57, 117, 255, .34); }
}

.ares-auth .ares-auth-submit:focus-visible {
  outline: 2px solid var(--gate-cyan);
  outline-offset: 3px;
}

/* Lo stato di attesa e' quello VERO: lo mette `single-submit.js` quando il
 * modulo parte davvero, e non un ritardo inventato qui. */
.ares-auth .ares-auth-submit[disabled] {
  filter: saturate(.7) brightness(.86);
  cursor: progress;
}

/* ------------------------------------------------------------------ *
 * 8. Il piede della carta                                             *
 * ------------------------------------------------------------------ */

/* Il separatore non tocca il comando e il link non tocca il fondo. */
.ares-auth .ares-auth-aside {
  margin-top: 26px;
  padding-top: 22px;
  /* Il link sotto il separatore sta al centro. Le spaziature verticali non
   * cambiano: si muove solo l'asse orizzontale. */
  text-align: center;
}

.ares-auth .ares-auth-link {
  color: var(--gate-link);
  font-size: 14px;
  font-weight: 600;
}

.ares-auth .ares-auth-link:hover { color: #d7f2ff; }
.ares-auth .ares-auth-link:focus-visible { outline: 2px solid var(--gate-cyan); outline-offset: 2px; }

.ares-auth .ares-auth-alert {
  border-radius: 12px;
  color: #ffd9d9;
}

/* Le tre righe di sicurezza stanno SOTTO la carta e dicono soltanto cose che
 * il sistema fa davvero: la prima e' l'indicazione della verifica in due
 * passaggi che il mandato chiede nel piede. */
.ares-auth .ares-auth-claims {
  gap: 10px;
  padding: 0;
  /* Stessa larghezza del testo introduttivo: due colonne di testo che
   * finiscono a misure diverse si leggono come due blocchi scollegati. */
  max-width: 560px;
  justify-self: start;
}

.ares-auth .ares-auth-claims li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gate-card-text-2);
  gap: 11px;
}

.ares-auth .ares-auth-claims li::before {
  margin-top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gate-cyan);
  box-shadow: 0 0 0 3px rgba(41, 182, 255, .14);
}

.ares-auth .ares-auth-footer {
  color: #9db3cc;
  font-size: 12px;
}

/* Le due descrizioni. Il default sta QUI, PRIMA della media query del
 * telefono: dichiarato dopo, avrebbe la stessa specificita' e vincerebbe
 * per posizione — la riga breve non sarebbe comparsa mai, e la pagina sul
 * telefono sarebbe rimasta senza descrizione. Misurato a 390x844. */
.gate-lead-lungo { display: block; }
.gate-lead-breve { display: none; }

/* ------------------------------------------------------------------ *
 * 9. Il telefono                                                      *
 * ------------------------------------------------------------------ */

@media (max-width: 759px) {
  .ares-auth .ares-auth-stage {
    padding: 26px 20px 24px;
    gap: 18px;
  }

  .ares-auth .ares-auth-panel {
    max-width: 480px;
    gap: 18px;
  }

  /* La carta prende la larghezza che il mandato le da', e resta dentro i
   * 480px: `calc(100% - 40px)` sul palco, che ha gia' 20px di lato. */
  .ares-auth .ares-auth-card {
    width: 100%;
    padding: 24px 22px 22px;
    border-radius: 18px;
  }

  /* La zona del marchio si stringe, e gli anelli con lei: il centro resta
   * quello della piastra, che qui e' centrata. */
  .ares-auth .ares-auth-plate {
    width: 232px;
    padding: 14px 16px;
  }

  .ares-auth .ares-auth-intro::before {
    width: 260px;
    height: 132px;
    left: 50%;
    top: 52px;
    margin: -66px 0 0 -130px;
  }

  .ares-auth .ares-auth-intro::after {
    width: 208px;
    height: 106px;
    left: 50%;
    top: 52px;
    margin: -53px 0 0 -104px;
  }

  .ares-auth .ares-auth-plate::before {
    width: 168px;
    height: 92px;
    margin: -46px 0 0 -84px;
  }

  .ares-auth .ares-auth-title {
    font-size: clamp(34px, 9vw, 38px);
    max-width: 100%;
  }

  /* Si stringe l'IDENTITA', non il modulo: i 52px del campo e i 56px del
   * comando sono i due numeri che rendono la pagina usabile con un pollice,
   * e non si toccano. Il respiro si prende da sopra. */
  .ares-auth .ares-auth-intro { gap: 12px; }
  .ares-auth .ares-auth-lead { font-size: 15px; line-height: 1.5; }
  .ares-auth .ares-auth-card-note { margin-bottom: 18px; }
  .ares-auth .ares-auth-form { gap: 16px; }
  .ares-auth .ares-auth-card h2 { font-size: 26px; margin-bottom: 8px; }

  /* La descrizione lunga non serve su un telefono: al suo posto la riga
   * breve, che dice la stessa cosa in una battuta. Nessuna delle due e'
   * nascosta agli screen reader — sono due testi diversi, uno per volta. */
  .gate-lead-lungo { display: none; }
  .gate-lead-breve { display: block; }

  .gate-stato {
    margin-top: 12px;
    justify-content: center;
    font-size: 13px;
  }

  .ares-auth .ares-auth-input { min-height: 52px; font-size: 16px; }
  .ares-auth .ares-auth-submit { min-height: 56px; }

  .ares-auth .ares-auth-claims {
    display: grid;
    gap: 7px;
    justify-items: start;
    text-align: left;
  }

  .ares-auth .ares-auth-claims li {
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
  }

  /* Meno ambiente, non meno spettacolo: restano griglia, un fascio e la
   * scansione. Tre fasci su un telefono sono rumore, non scena. */
  .gate-beam-2, .gate-beam-3 { display: none; }
  .gate-grid { bottom: -18vh; height: 74vh; }
}

/* SCHERMO BASSO E STRETTO. Il respiro si stringe, le misure che il mandato
 * fissa — zona del marchio, titolo 34-38px, campi 52px, comando 56px — NON
 * si toccano. Recupera una trentina di pixel e non cambia il disegno.
 *
 * LIMITE DICHIARATO, perche' nessuno lo scopra dopo: a 360x800, 375x812 e
 * 390x844 il comando resta comunque SOTTO la piega. L'aritmetica lo spiega
 * senza margini d'interpretazione — marchio ~90px, titolo su due righe ~80,
 * riga breve ~45, stato ~30, e la sola carta ne vuole ~520 con un widget da
 * 73. Farlo salire sopra la piega significherebbe rinunciare al titolo o al
 * marchio su quegli schermi, cioe' cambiare il mandato: e' una decisione,
 * non un ritocco, e non la prendo qui. */
@media (max-width: 759px) and (max-height: 900px) {
  .ares-auth .ares-auth-stage { padding: 14px 20px 18px; gap: 14px; }
  .ares-auth .ares-auth-panel { gap: 14px; }
  .ares-auth .ares-auth-intro { gap: 10px; }
  .ares-auth .ares-auth-card { padding: 20px 20px 18px; }
  .ares-auth .ares-auth-card-note { margin-bottom: 14px; }
  .ares-auth .ares-auth-form { gap: 13px; }
  .gate-stato { margin-top: 8px; }
  .ares-auth .ares-auth-plate { padding: 11px 16px; }
  .ares-auth .ares-auth-title { line-height: 1.0; }
}

/* ------------------------------------------------------------------ *
 * 9ter. SCHERMO BASSO — il comando deve stare nella prima schermata    *
 * ------------------------------------------------------------------ */

/* IL DIFETTO PEGGIORE QUI NON ERA LO SCORRIMENTO: ERA IL CENTRAGGIO.
 * `.ares-auth-stage` centra con `justify-content: center`. Quando il
 * contenuto supera l'altezza della finestra, un contenitore flex centrato
 * lo fa traboccare DA TUTTE E DUE LE PARTI, e la parte che esce in ALTO non
 * si raggiunge scorrendo: il marchio e il titolo diventavano irraggiungibili
 * invece che semplicemente fuori vista. Misurato a 320x568, dove il comando
 * risultava «nella prima schermata» proprio perche' la testa della pagina
 * era gia' uscita dallo schermo. `flex-start` toglie il caso.
 *
 * POI SI RECUPERANO I PIXEL, E SI RECUPERANO DOVE IL PROPRIETARIO HA DETTO:
 * marchio piu' piccolo, parte descrittiva accorciata, spazi verticali
 * ridotti, decorazioni tolte. NON si toccano le tre misure che rendono la
 * pagina usabile con un pollice — campo 52px, comando 56px, widget nel suo
 * spazio — perche' sono esattamente quelle che il mandato vieta di ridurre. */
@media (max-width: 759px) and (max-height: 920px) {
  .ares-auth .ares-auth-stage {
    justify-content: flex-start;
    padding: 12px 20px 16px;
    gap: 10px;
  }

  .ares-auth .ares-auth-panel { gap: 10px; }
  .ares-auth .ares-auth-intro { gap: 8px; }

  /* Il marchio si ricompone: stessa immagine, stesso rapporto, meno spazio.
   * Il file resta `ares-logo.png` e la piastra resta chiara, perche' senza
   * di lei l'inchiostro del marchio non si vede sul fondo scuro. */
  .ares-auth .ares-auth-plate {
    width: 188px;
    padding: 9px 12px;
    border-bottom-width: 2px;
  }

  .ares-auth .ares-auth-intro::before { width: 216px; height: 112px; top: 40px; margin: -56px 0 0 -108px; }
  .ares-auth .ares-auth-intro::after  { width: 172px; height: 90px;  top: 40px; margin: -45px 0 0 -86px; }
  .ares-auth .ares-auth-plate::before { width: 140px; height: 76px;  margin: -38px 0 0 -70px; }

  .ares-auth .ares-auth-title { font-size: 26px; line-height: 1.06; }

  /* La parte descrittiva si accorcia fino a sparire: resta lo STATO, che e'
   * una riga sola e dice una cosa vera. Il kicker e' identita' ripetuta —
   * il marchio sta due centimetri sopra — quindi qui e' decorazione. */
  /* Si nascondono le DUE descrizioni, non il paragrafo che le contiene:
   * lo stato vive dentro `.ares-auth-lead`, e spegnere il paragrafo lo
   * portava via con se'. Il commento qui sopra diceva «resta lo STATO» e il
   * codice faceva il contrario — trovato guardando lo scatto a 360x800. */
  .ares-auth .gate-lead-lungo,
  .ares-auth .gate-lead-breve { display: none; }
  .ares-auth .ares-auth-lead { margin: 0; }
  .ares-auth .ares-auth-kicker { display: none; }
  .gate-stato { margin-top: 0; font-size: 12.5px; }

  .ares-auth .ares-auth-card { padding: 16px 18px 16px; }
  .ares-auth .ares-auth-card-eyebrow { margin-bottom: 8px; font-size: 10.5px; }
  .ares-auth .ares-auth-card h2 { font-size: 21px; margin-bottom: 4px; }
  /* L'ISTRUZIONE DELLA CARTA NON SI SPEGNE: e' un testo DENTRO la carta, e
   * dice che cosa scrivere nel campo che sta subito sotto — «il codice a 6
   * cifre», «la tua email aziendale», «almeno 8 caratteri». Toglierla lascia
   * un campo senza spiegazione proprio dove lo schermo e' piu' stretto.
   *
   * Finche' questo foglio arrivava alla sola pagina d'accesso la riga
   * toglieva UN testo; ora che il guscio lo serve a tutta l'area ne
   * toglierebbe QUATTRO. Si comprime, non si spegne. */
  .ares-auth .ares-auth-card-note { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }
  .ares-auth .ares-auth-form { gap: 12px; }
  .ares-auth .ares-auth-field-row { gap: 6px; }
  .ares-auth .ares-auth-label { font-size: 11.5px; }
  .ares-auth .ares-auth-turnstile { min-height: 66px; }
  .ares-auth .ares-auth-aside { margin-top: 12px; }

  /* Le assicurazioni stanno SOTTO il comando: non spostano il pulsante, e
   * restano leggibili per chi scorre. */
  /* OMESSE sugli schermi bassi, come il mandato consente: sopra i 920px di
   * altezza restano, compatte.
   *
   * E CON LORO VA TOLTA LA RIGA DELLA GRIGLIA. Un elemento in `display: none`
   * sparisce, ma l'AREA che lo nomina resta nel modello: la riga vuota si
   * prende comunque il proprio `row-gap`. Misurato: dieci pixel, che a 568
   * hanno rimesso il comando fuori dalla prima schermata dopo che c'era gia'
   * entrato. Una regressione introdotta spostando le garanzie, e trovata
   * dalla stessa sonda che aveva misurato la correzione. */
  .ares-auth .ares-auth-claims { display: none; }
  .ares-auth .ares-auth-panel { grid-template-areas: "intro" "carta"; }
  .ares-auth .ares-auth-submit { margin-top: 0; }
}

/* Piu' basso ancora: 320x568 e' la misura che decide. */
@media (max-width: 759px) and (max-height: 640px) {
  .ares-auth .ares-auth-stage { padding: 5px 16px 10px; }
  .ares-auth .ares-auth-plate { width: 156px; padding: 7px 10px; }
  .ares-auth .ares-auth-title { font-size: 22px; }
  .ares-auth .ares-auth-card h2 { font-size: 19px; }
  .ares-auth .ares-auth-card { padding: 14px 14px 14px; }
  .ares-auth .ares-auth-form { gap: 9px; }
  .ares-auth .ares-auth-card-eyebrow { margin-bottom: 6px; }
  .ares-auth .ares-auth-claims { display: none; }
  .ares-auth .ares-auth-footer { display: none; }
  /* SOTTO I 640px DI ALTEZZA CADE ANCHE LO STATO, e va detto invece che
   * lasciato scoprire: costa 27px, e 27px sono esattamente la differenza fra
   * un comando dentro la prima schermata e uno fuori. Restano il marchio, il
   * titolo e il modulo intero — cioe' l'identita' e la funzione. Sopra i
   * 640px lo stato c'e' su tutti i telefoni misurati. */
  .gate-stato { display: none; }
  /* E con lui il paragrafo che lo conteneva: vuoto resta un elemento della
   * griglia e si prende comunque il proprio spazio fra le righe. Otto pixel,
   * che a 568 sono la differenza. */
  .ares-auth .ares-auth-lead { display: none; }
}

/* ------------------------------------------------------------------ *
 * 9bis. Il widget su uno schermo stretto                              *
 * ------------------------------------------------------------------ */

/* IL WIDGET HA UNA LARGHEZZA PROPRIA, 300px, E NON E' NOSTRA.
 * A 320px di finestra la carta ha 252px di luce interna: il widget non ci
 * sta, e la riga spingeva il modulo a 343px — misurato, e presente ANCHE
 * sulla pagina che questa sostituisce, quindi e' debito ereditato e non una
 * regressione di questo lavoro. Si chiude qui perche' 320x568 e' una delle
 * misure che questa pagina deve passare.
 *
 * Il rimedio NON tocca il widget: non cambia `data-sitekey`, non aggiunge
 * `data-size`, non ne altera la configurazione. Riduce la SCALA con cui e'
 * disegnato e toglie alla riga il potere di allargare il modulo
 * (`min-width: 0` su un elemento flex, senza il quale non puo' stringersi
 * sotto il proprio contenuto). Il widget resta quello vero, cliccabile e
 * leggibile, e lo spazio che gli e' riservato non viene tagliato. */
@media (max-width: 389px) {
  .ares-auth .ares-auth-turnstile {
    min-width: 0;
    overflow: hidden;
  }

  .ares-auth .ares-auth-turnstile .cf-turnstile {
    transform: scale(.91);
    /* L'origine segue il centraggio: con `left top` il widget ridotto
     * sarebbe rimasto ancorato a sinistra dentro una riga centrata. */
    transform-origin: top center;
  }
}

@media (max-width: 344px) {
  .ares-auth .ares-auth-card { padding: 22px 14px 20px; }
  .ares-auth .ares-auth-turnstile .cf-turnstile { transform: scale(.83); }
}

/* ------------------------------------------------------------------ *
 * 10. Chi non vuole il movimento                                      *
 * ------------------------------------------------------------------ */

/* Si ferma il MOVIMENTO, non la grafica: la scena resta disegnata, i
 * contrasti sono quelli, la gerarchia non cambia e il modulo funziona
 * identico. Nessun contenuto sparisce. */
@media (prefers-reduced-motion: reduce) {
  .ares-auth .gate-grid,
  .ares-auth .gate-beam,
  .ares-auth .gate-scan,
  .ares-auth .gate-converge,
  .ares-auth .ares-auth-card,
  .ares-auth .ares-auth-card::before,
  .ares-auth .ares-auth-intro::before,
  .ares-auth .ares-auth-intro::after,
  .ares-auth .ares-auth-plate::before,
  .ares-auth .gate-stato::before,
  .ares-auth .ares-auth-input:focus,
  .ares-auth .ares-auth-submit:active {
    animation: none !important;
  }

  .ares-auth .gate-beam { opacity: .5; }
  .ares-auth .gate-scan { transform: translateY(26vh); }
  .ares-auth .ares-auth-submit { transition: box-shadow 160ms ease; }
  .ares-auth .ares-auth-submit:active { transform: none; }
}

/* La scheda nascosta non anima: lo mette `neural-gate.js`, che non fa
 * nient'altro. Senza JavaScript la pagina funziona identica — anima e basta. */
html[data-gate-pausa="si"] .gate-grid,
html[data-gate-pausa="si"] .gate-beam,
html[data-gate-pausa="si"] .gate-scan,
html[data-gate-pausa="si"] .ares-auth-card,
html[data-gate-pausa="si"] .ares-auth-card::before,
html[data-gate-pausa="si"] .ares-auth-intro::before,
html[data-gate-pausa="si"] .ares-auth-intro::after,
html[data-gate-pausa="si"] .ares-auth-plate::before,
html[data-gate-pausa="si"] .gate-stato::before {
  animation-play-state: paused !important;
}

@media (forced-colors: active) {
  .gate-scene { display: none; }
  .ares-auth .ares-auth-card { border: 1px solid CanvasText; }
}

/* ==================================================================== *
 * IL RIASSORBIMENTO DELLO SPAZIO DEL BLOCCO TOLTO                       *
 *                                                                       *
 * `grid-template-areas` nomina una riga `claims`. Se l'elemento non      *
 * esiste la riga vale 0px -- ma il `row-gap` fra le righe si spende lo   *
 * stesso: misurati 22px a 768, cioe' spazio vuoto artificiale.          *
 *                                                                       *
 * `:has()` lega la regola al FATTO, non alla pagina: vale dove l'elenco  *
 * non c'e' e sparisce da sola il giorno in cui tornasse. Dove `:has()`   *
 * non e' supportato la dichiarazione cade e resta il comportamento di    *
 * oggi -- il ripiego e' lo stato attuale, non un difetto nuovo.          *
 * ==================================================================== */

@media (min-width: 1080px) {
  .ares-auth .ares-auth-panel:not(:has(.ares-auth-claims)) {
    grid-template-areas: "intro carta";
  }

  /* Con DUE righe l'identita' era `align-self: end`: finiva in fondo alla
   * PRIMA riga, cioe' appoggiata sull'elenco che le stava sotto. Con una riga
   * sola quello stesso `end` la spingerebbe in fondo al pannello, sotto il
   * comando della carta. Senza l'elenco l'ancoraggio naturale e' il CENTRO
   * della colonna, che e' come sta la carta accanto. */
  .ares-auth .ares-auth-panel:not(:has(.ares-auth-claims)) .ares-auth-intro {
    align-self: center;
  }
}

@media (max-width: 1079px) {
  .ares-auth .ares-auth-panel:not(:has(.ares-auth-claims)) {
    grid-template-areas:
      "intro"
      "carta";
  }
}