/* ==========================================================================
   PlayRustLegacy — stili della home page
   Le parti presenti solo qui: intestazione grande, nastro scorrevole, passi
   dell'installazione. Tutto il resto viene da base.css.
   ========================================================================== */

/* --- intestazione ------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* min-height e non height: se il testo cresce (traduzione piu' lunga, corpo
     ingrandito dalle impostazioni di sistema) la sezione si allunga invece di
     tagliare. dvh e non vh: su telefono vh include la barra dell'indirizzo che
     poi scompare, e il contenuto finisce sotto il bordo. */
  min-height: min(88dvh, 820px);
  padding-block: var(--s-8);
  overflow: hidden;
}

/* Bagliore rosso tenue dietro il titolo. Decorativo, quindi aria-hidden e
   pointer-events: none — non deve intercettare clic.
   Resta anche quando il canvas non parte: e' questo, non l'animazione, a dare
   un fondo finito all'intestazione. */
.hero-luce {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(206, 66, 43, 0.16), transparent 70%),
    radial-gradient(50% 40% at 90% 20%, rgba(255, 107, 82, 0.07), transparent 70%);
}

/* Il canvas dello sfondo animato. Sta sopra il gradiente e sotto il testo: le
   particelle passano dietro le parole, non davanti, altrimenti abbasserebbero
   il contrasto del titolo in modo imprevedibile.
   pointer-events: none e' obbligatorio: il canvas copre tutta l'intestazione e
   senza questo intercetterebbe i clic sui due pulsanti sopra di lui. Il
   puntatore viene comunque letto, perche' sfondo.js ascolta su window. */
.hero-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-interno { position: relative; z-index: 1; width: 100%; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: var(--s-2) var(--s-3);
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: var(--fondo-2);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero h1 {
  font-family: var(--mono);
  /* clamp invece di media query: la dimensione segue il viewport in modo
     continuo, senza il salto che si vede alla soglia di un breakpoint. Il
     minimo, 2.5rem, resta leggibile su 320px. */
  font-size: clamp(2.5rem, 9vw, var(--t-4xl));
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hero h1 .rosso { color: var(--rust-chiaro); }

.hero-testo {
  max-width: 58ch;
  margin-top: var(--s-5);
  color: var(--testo-2);
  font-size: var(--t-lg);
}

.hero-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero-dati {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--bordo-largo) solid var(--bordo);
}

.hero-dato {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
}
.hero-dato b {
  color: var(--rust-chiaro);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}
.hero-dato span { color: var(--testo-3); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: 0.1em; }

/* --- nastro scorrevole --------------------------------------------------- */

.nastro {
  display: flex;
  overflow: hidden;
  padding-block: var(--s-4);
  border-block: var(--bordo-largo) solid var(--bordo);
  background: var(--fondo-2);
  /* La maschera sfuma i due bordi: senza, il testo si troncherebbe di netto
     contro il bordo dello schermo e sembrerebbe un difetto. */
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  user-select: none;
}

.nastro-fila {
  display: flex;
  flex-shrink: 0;
  gap: var(--s-6);
  padding-right: var(--s-6);
  /* La fila e' duplicata nel markup e ciascuna copia scorre di tutta la propria
     larghezza: quando la prima e' uscita, la seconda e' esattamente al suo
     posto, e il ricongiungimento non si vede. */
  animation: scorri 42s linear infinite;
  white-space: nowrap;
}

/* Fermare il nastro al passaggio del mouse non e' un vezzo: e' cio' che permette
   di leggerlo a chi ne ha bisogno. */
.nastro:hover .nastro-fila { animation-play-state: paused; }

@keyframes scorri {
  to { transform: translateX(-100%); }
}

.nastro-voce {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nastro-voce::before {
  content: "+";
  color: var(--rust-chiaro);
  font-weight: 700;
}

/* Chi ha chiesto meno movimento non deve inseguire un testo che scorre. Il
   nastro si ferma e diventa una riga scorrevole a mano. */
@media (prefers-reduced-motion: reduce) {
  .nastro { overflow-x: auto; mask-image: none; }
  .nastro-fila { animation: none; }
  /* La seconda copia, senza animazione, sarebbe solo una ripetizione. */
  .nastro-fila[aria-hidden="true"] { display: none; }
}

/* --- passi dell'installazione -------------------------------------------- */

.passi {
  display: grid;
  gap: var(--s-4);
  counter-reset: passo;
}
@media (min-width: 900px) {
  .passi { grid-template-columns: repeat(3, 1fr); }
}

.passo {
  position: relative;
  padding: var(--s-5);
  padding-top: var(--s-6);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo-2);
  counter-increment: passo;
}
.passo::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  color: var(--rust-chiaro);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.passo h3 {
  margin-bottom: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: uppercase;
}
.passo p { color: var(--testo-2); font-size: var(--t-sm); }

/* --- riquadro di scaricamento -------------------------------------------- */

.scarica {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) {
  .scarica { grid-template-columns: 1.4fr 1fr; }
}

.scarica-file {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo);
  transition: border-color var(--t-media) var(--curva);
}
.scarica-file:hover { border-color: var(--rust-chiaro); }
.scarica-file + .scarica-file { margin-top: var(--s-3); }

.scarica-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  color: var(--rust-chiaro);
}

.scarica-nome {
  flex: 1;
  min-width: 0;  /* permette al testo di troncare invece di far crescere la riga */
}
.scarica-nome b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
}
.scarica-nome span {
  color: var(--testo-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
}

/* --- pannello impronta --------------------------------------------------- */

.impronte-titolo {
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.impronte-testo {
  margin: var(--s-2) 0 var(--s-4);
  color: var(--testo-2);
  font-size: var(--t-sm);
}

/* L'impronta SHA-256 e' 64 caratteri: su telefono va spezzata, altrimenti
   allarga la pagina. break-all e non break-word perche' non ci sono spazi in
   cui andare a capo. */
.impronta {
  padding: var(--s-3);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo);
  color: var(--testo-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  word-break: break-all;
}

/* Il nome del file a cui l'impronta si riferisce. Con tre impronte in colonna,
   senza etichetta non si saprebbe quale confrontare con quale. */
.impronta-nome {
  margin-bottom: var(--s-1);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- avvertenza richiudibile --------------------------------------------- */

/* <details> e non un pannello sempre aperto: l'informazione serve solo a chi
   incontra l'avviso, e chi non lo incontra non deve leggere tre paragrafi sulle
   firme dei certificati prima di scaricare. */
.avvertenza {
  padding: var(--s-3) var(--s-4);
  border: var(--bordo-largo) solid var(--bordo);
  border-left: 3px solid var(--ambra);
  border-radius: var(--raggio);
  background: var(--fondo-2);
}

.avvertenza > summary {
  /* L'area cliccabile deve arrivare a 44px: il testo da solo ne fa ~24. */
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ambra);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  /* Il triangolo predefinito e' minuscolo e disallineato: lo sostituisce ::before. */
  list-style: none;
}

.avvertenza > summary::-webkit-details-marker { display: none; }

.avvertenza > summary::before {
  content: "+";
  flex: none;
  width: 1.1em;
  font-family: var(--mono);
  font-size: 1.1em;
  text-align: center;
}

.avvertenza[open] > summary::before { content: "−"; }

.avvertenza p {
  margin-top: var(--s-3);
  color: var(--testo-2);
  font-size: var(--t-sm);
  line-height: 1.65;
}

.avvertenza p b { color: var(--testo); }

.avvertenza .mono {
  /* I comandi vanno selezionabili e non a capo a meta' parola. */
  padding: 2px 6px;
  border-radius: var(--raggio);
  background: var(--fondo);
  color: var(--testo-2);
  word-break: break-all;
}