/* Varco di accesso — la pagina che vede chi non ha effettuato l'accesso.

   Caricato da lep_enqueue_login_gate() (ledea-plugin.php) SOLO sulle pagine che
   stampano il varco e SOLO a utente non autenticato: sono ~7 KB che non hanno
   ragione di pesare sul resto del sito, ne' sulle aree riservate.

   Origine: "Ledea Aggiungi Connessione" di Claude Design, che consegna il markup
   con gli stili scritti inline (60 attributi style=). Qui sono diventati classi,
   e l'intestazione e il pie' di pagina del file di Design sono spariti: il varco
   vive dentro il tema, che la barra del menu e il footer li mette gia' lui.

   PREFISSO: le-gate-*, non va-*. Le classi va-* sono il residuo dell'era Leira
   che CLAUDE.md segna come rinomina ancora da fare; scrivere un foglio nuovo con
   quel prefisso allungherebbe la lista invece di lasciarla ferma. Stessa scelta
   fatta per le-hp-* nella homepage del tema.

   COLORI: tutti dalle rampe del design system (ledea-theme/assets/css/ledea-ds/),
   che arrivano qui perche' questo foglio dipende da lat-style. Nessun esadecimale
   scritto a mano, tranne le trasparenze su fondo scuro, che una rampa non puo'
   esprimere e che sono derivate da teal-100 e teal-400.

   TEMA CHIARO FISSO: i ruoli semantici del design system (--surface-card,
   --heading, --border...) commutano sotto prefers-color-scheme: dark. Questa
   pagina no: e' una composizione voluta di carta chiara su verde scuro, e seguire
   il tema di sistema ribalterebbe solo le carte. Per questo si usano le rampe
   (--teal-*, --gray-*, --paper), che non commutano mai. */


/* ============================================================
   1. Radice e contenitore del tema
   ============================================================ */

.le-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Riempie quello che resta fra la barra in cima e il footer. Le due variabili
     sono le stesse che style.css usa per .va-container; il fallback copre il caso
     in cui non siano definite (vedi ledea-theme/docs/punti-aperti.md §5). */
  min-height: calc(100dvh - var(--nav-height, 56px) - var(--footer-height, 60px));
  padding: clamp(36px, 7vh, 84px) 0 clamp(44px, 8vh, 96px);
  background: var(--teal-900);
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--teal-50);
  overflow: hidden;
}

/* Il tema infila lo shortcode dentro .va-container > .row (un .container o un
   .container-fluid di Bootstrap, a seconda del template scelto per la pagina).
   Tre cose vanno tolte al contenitore, altrimenti il verde non arriva ai bordi:
   - il max-width del .container, che lascerebbe due bande di carta ai lati;
   - il padding orizzontale, che lascerebbe una striscia chiara;
   - il min-height, che qui se lo calcola gia' .le-gate.
   E una alla riga: le gutter negative, che senza il padding del contenitore a
   compensarle spingerebbero il verde 12px oltre il bordo e aprirebbero una barra
   di scorrimento orizzontale.
   Il rientro del testo se lo da' .le-gate-inner. */
.va-container:has(.le-gate),
.va-container-sticky-top:has(.le-gate) {
  max-width: none;
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
}
.row:has(> .le-gate) {
  margin-left: 0;
  margin-right: 0;
}

.le-gate-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
}


/* ============================================================
   2. Gli sfondi in movimento
   ============================================================ */

/* Alone verde che segue il puntatore. La posizione di riposo — quella che si vede
   senza JS, con il movimento ridotto o da telefono — sta qui e non nel JS: e'
   l'unico modo perche' sia giusta anche per chi quel file non lo esegue. Con il
   puntatore attivo il JS sovrascrive la transform, e quando smette la ritoglie,
   riportando l'alone qui. */
.le-gate-spot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(58vw, 46vh, 0);
  width: 840px;
  height: 840px;
  margin: -420px 0 0 -420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 158, 117, 0.30), rgba(29, 158, 117, 0) 62%);
  pointer-events: none;
  will-change: transform;
}

.le-gate-waves,
.le-gate-links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.le-gate-links { opacity: 0.7; }
.le-gate-waves g { will-change: transform; }

/* I tratteggi scorrono lungo il proprio tracciato: e' l'unica animazione che non
   passa dal JS, perche' non dipende ne' dal puntatore ne' dalla misura. */
.le-gate-dash {
  animation: le-gate-dash 26s linear infinite;
}
.le-gate-dash--slow {
  animation: le-gate-dash 34s linear infinite reverse;
}

@keyframes le-gate-dash {
  to { stroke-dashoffset: -240; }
}

/* La costellazione di nodi: cerchi vuoti con dentro un'icona. Decorativi. */
.le-gate-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.le-gate-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(159, 225, 203, 0.26);
  border-radius: 50%;
  color: var(--teal-200);
  will-change: transform;
}

/* Posizioni e misure: sette punti sparsi, non una griglia. */
.le-gate-node--0 { left: 5%;  top: 16%; width: 66px; height: 66px; }
.le-gate-node--1 { left: 16%; top: 68%; width: 56px; height: 56px; color: var(--teal-100); border-color: rgba(159, 225, 203, 0.22); }
.le-gate-node--2 { left: 47%; top: 7%;  width: 60px; height: 60px; }
.le-gate-node--3 { left: 86%; top: 20%; width: 72px; height: 72px; color: var(--coral-200); border-color: rgba(159, 225, 203, 0.30); }
.le-gate-node--4 { left: 91%; top: 64%; width: 54px; height: 54px; color: var(--teal-100); border-color: rgba(159, 225, 203, 0.22); }
.le-gate-node--5 { left: 68%; top: 86%; width: 48px; height: 48px; border-color: rgba(159, 225, 203, 0.20); }
.le-gate-node--6 { left: 30%; top: 90%; width: 44px; height: 44px; color: var(--teal-100); border-color: rgba(159, 225, 203, 0.18); }

/* Le posizioni dei nodi sono in percentuale, il testo no: sotto i 1320px la
   colonna del testo si allarga fino a sfiorarli, e il cerchio del primo nodo
   finisce addosso alla prima lettera del titolo. Non si spostano — restano dove
   il disegno li vuole — ma si smorzano, cosi' leggono come trama di fondo; e i
   due piu' vicini alle carte spariscono. */
@media (max-width: 1319.98px) {
  .le-gate-node { opacity: 0.45; }
  .le-gate-node--5,
  .le-gate-node--6 { display: none; }
}

/* Su schermo stretto la costellazione si dirada ancora: restano i tre nodi ai
   bordi. La soglia e' la stessa che il JS usa per spegnere la parallasse, qui
   ripetuta nel CSS perche' valga anche senza JS. */
@media (max-width: 899.98px) {
  .le-gate-node { opacity: 0.4; }
  .le-gate-node--3,
  .le-gate-node--4 { display: none; }
}


/* ============================================================
   3. Il testo del varco
   ============================================================ */

.le-gate-eyebrow {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--text-caption);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
  will-change: transform;
}

.le-gate-eyebrow__glyph {
  display: inline-flex;
  color: var(--coral-200);
  animation: le-gate-pulse 4.5s var(--ease-standard) infinite;
}

@keyframes le-gate-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.le-gate-title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 7.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--teal-50);
  max-width: 15em;
}
.le-gate-title span {
  display: block;
  will-change: transform;
}
.le-gate-title span:nth-child(2) { color: var(--teal-200); }

.le-gate-lede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: clamp(30px, 5vh, 54px);
  will-change: transform;
}

.le-gate-lede p {
  margin: 0;
  max-width: 26em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--teal-100);
}

/* La targhetta dell'invito: dice da quale struttura arriva il link. Compare solo
   quando la struttura e' stata riconosciuta, quindi non e' mai vuota. */
.le-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(159, 225, 203, 0.14);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--teal-50);
}
.le-gate-badge svg { flex: 0 0 auto; }


/* L'avviso: qualcosa non ha funzionato, ma la pagina resta usabile lo stesso.
   Il ruolo e' `warning`, cioe' la rampa ochre — che nel design system e' testo e
   superficie tenue, MAI un riempimento. I token semantici pero' non servono qui:
   --warning e' ochre-600, pensato per stare su carta, e su questo verde
   misurerebbe 1,7:1. Su fondo scuro il ruolo lo porta ochre-100, che sul teal-900
   sta intorno a 10:1, con dietro la stessa trasparenza tenue della targhetta. */
.le-gate-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Stessa larghezza della griglia delle carte qui sotto: cosi' il bordo destro
     dell'avviso cade sul bordo destro di «Prima volta su Ledea?» e i due blocchi
     leggono come una colonna sola invece che come due larghezze diverse. */
  max-width: 1000px;
  margin: 0 0 clamp(26px, 4vh, 44px);
  padding: 12px 18px;
  border: 1px solid rgba(242, 220, 169, 0.32);
  border-radius: var(--radius-md);
  background: rgba(242, 220, 169, 0.10);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ochre-100);
  will-change: transform;
}
.le-gate-notice svg {
  flex: 0 0 auto;
  margin-top: 2px;
}


/* ============================================================
   4. Le due carte
   ============================================================ */

.le-gate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2.4vw, 26px);
  max-width: 1000px;
}

.le-gate-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  background: var(--paper);
  will-change: transform;
}

.le-gate-card__wave {
  display: block;
  color: var(--teal-400);
}
/* La seconda carta e' la strada alternativa: l'onda si spegne sul neutro, cosi'
   il verde resta un segno solo, sulla carta di chi ha gia' un account. */
.le-gate-card--alt .le-gate-card__wave { color: var(--gray-100); }

.le-gate-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.1;
  color: var(--teal-900);
}

.le-gate-card__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--gray-600);
}


/* ============================================================
   5. I due bottoni
   ============================================================ */

/* Non sono .btn di Bootstrap: hanno misure proprie (48px di altezza, la stessa
   del componente Button del design system) e vivono su carta dentro una pagina
   verde. I ruoli pero' sono quelli soliti — un pieno per blocco, e il blocco qui
   e' la singola carta: il pieno sta su «Accedi», l'outline su «Crea un account». */
/* La `a` in testa a ogni selettore, e il :focus accanto a :hover, non sono
   decorazione. In `style.css` del tema c'e' la regola degli hover dei link di
   testo, `a:not(.btn,.nav-link,.dropdown-item,...):hover`, che fa 0,2,1 di
   specificita' e batteva `.le-gate-btn--fill:hover` (0,2,0): portava il testo a
   --bs-secondary, cioe' teal-800, che e' esattamente il fondo dell'hover del
   pieno — testo e fondo dello stesso colore, 1:1, sul solo modo di accedere che
   questa pagina offre. E lo sottolineava.
   La sede della decisione e' il tema, dove `.le-gate-btn` e' stato aggiunto
   all'elenco `:not()` insieme a `.btn` e `.le-hp-btn`. Qui si tiene comunque la
   difesa: con la `a` i selettori vanno anch'essi a 0,2,1 e, dato che questo
   foglio dipende da `lat-style` e quindi carica dopo, vincono a parita'. Serve
   perche' il plugin non puo' dare per scontata la versione del tema installata,
   e un deploy scoordinato non deve lasciare un bottone invisibile. */
.le-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  min-height: 48px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base, 200ms) var(--ease-standard),
              border-color var(--duration-base, 200ms) var(--ease-standard),
              color var(--duration-base, 200ms) var(--ease-standard),
              transform 300ms var(--ease-standard);
  will-change: transform;
}

/* I bottoni non si sottolineano mai: hanno una superficie propria, e la riga
   sotto l'etichetta la fa leggere come un link di testo dentro un rettangolo
   pieno. Vale in ogni stato, non solo a riposo. */
a.le-gate-btn,
a.le-gate-btn:hover,
a.le-gate-btn:focus,
a.le-gate-btn:focus-visible {
  text-decoration: none;
}

a.le-gate-btn--fill {
  border-color: var(--teal-600);
  background: var(--teal-600);
  color: var(--teal-50);
}
a.le-gate-btn--fill:hover,
a.le-gate-btn--fill:focus,
a.le-gate-btn--fill:focus-visible {
  border-color: var(--teal-800);
  background: var(--teal-800);
  color: var(--teal-50);
}

a.le-gate-btn--outline {
  border-color: var(--teal-600);
  background: transparent;
  color: var(--teal-800);
}
a.le-gate-btn--outline:hover,
a.le-gate-btn--outline:focus,
a.le-gate-btn--outline:focus-visible {
  border-color: var(--teal-800);
  background: var(--teal-50);
  color: var(--teal-900);
}

.le-gate-btn:focus-visible {
  outline: var(--focus-ring-width, 3px) solid var(--teal-400);
  outline-offset: 3px;
}


/* ============================================================
   6. Movimento ridotto
   ============================================================ */

/* Il movimento e' un livello in piu', mai la condizione per leggere la pagina:
   con reduce si spegne tutto e resta lo stato fermo. Il JS fa la sua parte (non
   avvia il ciclo di disegno), qui si fermano le due animazioni CSS. */
@media (prefers-reduced-motion: reduce) {
  .le-gate-dash,
  .le-gate-dash--slow,
  .le-gate-eyebrow__glyph {
    animation: none;
  }
  .le-gate-btn { transition: none; }
}