/* Regista — Coming soon. Stili di pagina.
   Ogni valore viene dai token del design system. Le due sole aggiunte sono
   dichiarate qui sotto, con la motivazione, come prescrive il readme del DS. */

:root{
  /* AGGIUNTA DICHIARATA — superficie del campo.
     Il livello Mapped non ha un token per il fondo di un input: ha surface-page,
     surface-primary e surface-action, nessuno dei quali serve a far leggere un
     campo appoggiato su una card. In chiaro punta al bianco pieno (--neutral-100);
     in scuro (vedi override sotto) al fondo pagina, più scuro della card.
     Da sostituire se il DS introdurrà un surface-field. */
  --surface-field: var(--neutral-100);

  /* DEVIAZIONE DICHIARATA — hover del pulsante primario.
     Il DS mappa --surface-action-hover su --primary-70 (#AC9FFF) in light e
     --primary-60 (#907EFF) in dark: con --text-on-action bianco si ottengono
     circa 2.0:1 e 2.6:1, sotto la soglia AA in entrambi i temi. L'hover qui
     scende nella scala invece di salire (--primary-30, #420DD5: ~9.4:1 in bianco),
     conservando la leggibilità. Va risolto a monte nel design system. */
  --surface-action-hover-accessible: var(--primary-30);
}

/* In dark il campo non può essere bianco: sarebbe testo bianco su fondo bianco.
   Va al fondo pagina (--neutral-10), più scuro della card (--neutral-20) su cui
   poggia, così il campo si stacca e il testo bianco resta leggibile. */
[data-theme="dark"]{
  --surface-field: var(--neutral-10);
}

body{
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3xl);
  padding: var(--space-xl) var(--grid-margin-sm);
  /* Lo sfondo fixed è largo 100vw: quando c'è la scrollbar verticale, 100vw
     supera la larghezza utile e genererebbe scroll orizzontale. Qui lo si taglia. */
  overflow-x: hidden;
}

@media (min-width: 768px){
  body{ padding: var(--space-2xl) var(--grid-margin-md); }
}

@media (min-width: 1024px){
  body{ padding: var(--space-2xl) var(--grid-margin-lg); }
}

.rg-shell{
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* ---- marchio ---- */

.rg-brand{
  /* Area di rispetto 2u, con u = un quarto della larghezza dell'icona.
     Nel lockup l'asterisco misura ~78 delle 739.87 unità del viewBox:
     a 240px di larghezza, 2u ≈ 13px. Il padding qui è molto più generoso. */
  padding: var(--space-xs) 0;
}

.rg-brand img{
  width: 200px;
  height: auto;
}

@media (min-width: 768px){
  .rg-brand img{ width: 240px; }
}

/* Chip in vetro dietro il logo. La pillola (raggio full) è la forma di marca.
   Il fondo è la superficie di pagina semitrasparente + blur: sfoca la griglia
   dietro il logo e ne alza il contrasto. Fallback senza backdrop-filter: il
   color-mix resta comunque un fondo semiopaco, quindi il logo è leggibile lo stesso. */
.rg-brand-chip{
  display: inline-flex;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-page) 60%, transparent);
  border: var(--border-width-hairline) solid color-mix(in srgb, var(--neutral-100) 8%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* ---- contenuto ---- */

.rg-main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
}

.rg-eyebrow{
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}

.rg-headline{
  /* --tracking-tight solo sui titoli grandi, come prescrive il DS. */
  letter-spacing: var(--tracking-tight);
  max-width: 15ch;
}

.rg-lede{
  color: var(--text-body);
  /* Misura di lettura 46–60 caratteri. */
  max-width: 54ch;
}

.rg-stack{
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ---- blocco iscrizione ---- */

.rg-signup{
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 560px;
}

@media (min-width: 768px){
  .rg-signup{ padding: var(--space-xl); }
}

.rg-signup-label{
  /* Unica occorrenza del crimson in pagina: è il momento di conversione.
     #D32668 su --surface-page fa 4.82:1 — AA per il testo normale. */
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--weight-semibold);
}

.rg-signup-title{
  color: var(--text-headings);
  font-weight: var(--weight-semibold);
}

.rg-field-row{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 560px){
  .rg-field-row{
    flex-direction: row;
    align-items: flex-start;
  }
  .rg-field{ flex: 1; }
}

.rg-field{
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.rg-field label{
  color: var(--text-headings);
  font-weight: var(--weight-medium);
}

.rg-input{
  font-family: var(--font-secondary);
  font-size: var(--type-size-body-md);
  line-height: var(--line-height-normal);
  color: var(--text-headings);
  background: var(--surface-field);
  border: var(--border-width-hairline) solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.rg-input::placeholder{ color: var(--text-disabled) }

.rg-input:hover{ border-color: var(--border-disabled) }

.rg-input[aria-invalid="true"]{ border-color: var(--border-error) }

.rg-hint{ color: var(--text-body) }

.rg-error{
  /* In tema chiaro --text-error fa 3.82:1: non passa come testo.
     Si usa la variante dichiarata dal DS. */
  color: var(--text-error-strong);
  font-weight: var(--weight-medium);
}

/* ---- pulsante ---- */

.rg-button{
  font-family: var(--font-secondary);
  font-size: var(--type-size-body-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--text-on-action);
  background: var(--surface-action);
  border: 0;
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.rg-button:hover{ background: var(--surface-action-hover-accessible) }

/* Press: scale(0.98). Solo questo. */
.rg-button:active{ transform: scale(0.98) }

.rg-button:disabled{
  background: var(--surface-disabled);
  color: var(--text-on-disabled);
  cursor: not-allowed;
}

/* Allinea il pulsante alla base del campo quando la riga è affiancata. */
@media (min-width: 560px){
  .rg-field-row .rg-button{ margin-top: calc(var(--type-size-body-md) * var(--line-height-normal) + var(--space-2xs)) }
}

/* ---- consenso ---- */

.rg-consent{
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--text-body);
}

.rg-consent input[type="checkbox"]{
  margin: 0;
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  margin-top: 2px;
  accent-color: var(--surface-action);
}

/* ---- esito ---- */

.rg-sent{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-success);
  border: var(--border-width-hairline) solid var(--border-success);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--text-success-strong);
  font-weight: var(--weight-medium);
}

.rg-sent svg{ flex: none; color: var(--icon-success) }

.rg-notice{
  background: var(--surface-warning);
  border: var(--border-width-hairline) solid var(--border-warning);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--text-warning-strong);
}

[hidden]{ display: none !important }

/* ---- piede ---- */

.rg-footer{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  align-items: baseline;
  color: var(--text-body);
  border-top: var(--border-width-hairline) solid var(--border-primary);
  padding-top: var(--space-lg);
}

.rg-footer p{ margin: 0 }
.rg-footer-spacer{ flex: 1 }

/* ---- sfondo animato (wave grid) ---- */

/* Layer isolato dietro tutto: 100vw × 100vh, non entra nel flusso della griglia
   del body (è fixed). Il background è --surface-page: quando l'effetto non parte
   (reduced-motion, no WebGL) resta un fondo dark pulito. */
.rg-hero-fx{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background: var(--surface-page);
}

.rg-hero-fx canvas{
  display: block;
  width: 100%;
  height: 100%;
}

/* Contenuto sopra il layer. */
body > header,
body > main,
body > footer{
  position: relative;
  z-index: 1;
}

/* Perché l'onda segua il mouse anche sopra il testo dell'hero, le zone non
   interattive lasciano passare gli eventi al canvas sottostante; i controlli
   restano cliccabili. Scoping con :has() così la regola NON tocca la pagina
   privacy (che condivide queste classi ma non ha l'effetto). */
body:has(.rg-hero-fx) .rg-brand,
body:has(.rg-hero-fx) .rg-main > .rg-stack{
  pointer-events: none;
}
body:has(.rg-hero-fx) .rg-brand a{
  pointer-events: auto;
}

/* Sopra la griglia in movimento il blocco iscrizione ha bisogno di un bordo
   che lo definisca (in dark l'ombra non basta) e di leggerissima elevazione. */
body:has(.rg-hero-fx) .rg-signup{
  border: var(--border-width-hairline) solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

/* ---- ottimizzazioni mobile ---- */

@media (max-width: 767px){
  /* Ritmo verticale più stretto: su schermo piccolo i gap 3xl (64px) sprecano
     altezza e spingono l'iscrizione fuori dalla prima schermata. */
  body{
    gap: var(--space-2xl);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
  .rg-main{ gap: var(--space-xl); }

  /* La headline non ha bisogno del limite di 15ch sotto i 768px: lì lo spazio
     è già stretto e il cap accorcia la riga senza motivo. */
  .rg-headline{ max-width: 100%; }

  /* Il chip del logo si adatta alla larghezza dello schermo senza sbordare. */
  .rg-brand-chip{ max-width: 100%; }
  .rg-brand-chip img{ width: min(200px, 60vw); }

  /* La riga campo+pulsante resta impilata (già così sotto i 560px): il pulsante
     va a larghezza piena per un target touch più comodo. */
  .rg-signup{ padding: var(--space-lg); }
  .rg-field-row .rg-button{ width: 100%; }
}