/* Gravity — font, reset e classi tipografiche.
   Due caratteri: Geist Pixel Circle, a pallini, solo per gli H1; Instrument Sans per
   tutto il resto, dai titoli di sezione alle etichette. Instrument Sans arriva da
   Google Fonts con il <link> in testa alle pagine. */

/* Il Pixel Circle è nel sito. In assets/fonts ci sono anche le varianti Square, Grid e
   Line e i vecchi Geist e Geist Mono, non più dichiarati. */
@font-face {
  font-family: "Geist Pixel Circle";
  src: url("../assets/fonts/GeistPixel-Circle.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Departure Mono";
  src: url("../assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--gv-nav-height) + 32px);
  background: var(--gv-bg);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--gv-bg);
  color: var(--gv-text);
  font-family: var(--gv-font-sans);
  font-size: var(--gv-type-body);
  line-height: var(--gv-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* I titoli non hanno un peso loro: lo decide il ruolo, qui sotto e in site.css. */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: inherit;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--gv-transition-hover);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gv-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--gv-accent);
  color: var(--gv-black);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ tipografia */

/* I ruoli. Ogni testo del sito ne usa uno, e i corpi stanno solo nei token.

   Pixel Circle, solo per gli H1: interlinea 1 e crenatura stretta, il blocco deve
   leggersi come una massa compatta, non come una fila di caratteri sparsi. */
.gv-pixel {
  font-family: var(--gv-font-pixel);
  font-weight: 500;
  line-height: var(--gv-leading-none);
  letter-spacing: var(--gv-type-display-tracking);
}

/* Display: l'H1 dell'hero. */
.gv-pixel--hero {
  font-size: var(--gv-type-display);
}

/* L'H1 delle pagine progetto: stesso carattere, al corpo dei titoli di sezione. */
.gv-pixel--section {
  font-size: var(--gv-type-heading);
}

/* Heading: i titoli di sezione, in Instrument Sans. */
.gv-heading {
  font-family: var(--gv-font-sans);
  font-size: var(--gv-type-heading);
  font-weight: 500;
  line-height: var(--gv-leading-heading);
  letter-spacing: var(--gv-type-heading-tracking);
  text-wrap: balance;
}

/* Title, il titolo di una voce, sta in .gv-card__title di site.css. Body, il testo
   corrente, è il carattere del body e non ha bisogno di classi. */

/* Label: etichette, dati e collegamenti, maiuscoli e nella larghezza stretta. */
.gv-label {
  font-size: var(--gv-type-label);
  line-height: var(--gv-leading-label);
  font-weight: 500;
  font-stretch: var(--gv-type-label-stretch);
  text-transform: uppercase;
  letter-spacing: var(--gv-type-label-tracking);
}

/* Small: tag, note e contatori. */
.gv-label--sm {
  font-size: var(--gv-type-small);
}

.gv-muted {
  color: var(--gv-text-muted);
}

.gv-dim {
  color: var(--gv-text-dim);
}

/* --------------------------------------------------------------- layout */

/* Nessun contenitore centrato con larghezza massima: la pagina occupa lo
   schermo e respira con il solo padding laterale. */
.gv-bleed {
  width: 100%;
  padding-inline: var(--gv-pad);
}

/* Nessun fondo sulle sezioni: sotto passa la pioggia di pixel, e il nero lo mette
   il documento. Le superfici che devono coprirla, navbar e schede, lo dichiarano. */
.gv-section {
  position: relative;
  padding-top: var(--gv-section-top);
  padding-bottom: var(--gv-section-bottom);
}

/* La tela della pioggia sta sotto al contenuto e sopra al nero del documento. */
.gv-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
}

.gv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.gv-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--gv-text);
  color: var(--gv-black);
  font-size: var(--gv-type-label);
  font-weight: 500;
  font-stretch: var(--gv-type-label-stretch);
  text-transform: uppercase;
  letter-spacing: var(--gv-type-label-tracking);
  transform: translateY(-200%);
}

.gv-skip-link:focus-visible {
  transform: none;
}

/* ------------------------------------------------------------- materiale
   Una sola superficie per tutte le schede: velo chiaro, sfocatura di cio' che
   passa dietro, bordo sottile, angoli vivi. Con la trasparenza ridotta il velo
   diventa opaco invece di sparire. */

.gv-frost {
  background: var(--gv-frost-bg);
  border: var(--gv-border) solid var(--gv-line-mid);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .gv-frost {
    -webkit-backdrop-filter: var(--gv-frost-filter);
    backdrop-filter: var(--gv-frost-filter);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .gv-frost {
    background: var(--gv-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ------------------------------------------------------------- scramble
   Il testo animato è sempre testo vero. Un fronte da sinistra a destra lo
   attraversa: davanti il testo di prima, sul fronte glifi a caso, dietro il
   testo nuovo. Le celle del fronte hanno la larghezza della lettera che le
   occuperà, altrimenti ogni glifo scambiato farebbe ballare la riga. */

.gv-scramble__w {
  white-space: nowrap;
}

.gv-scramble__cell {
  display: inline-block;
  white-space: pre;
  text-align: center;
  color: var(--gv-text-dim);
}

/* Titolo in attesa del fronte: già scritto per intero, solo spento. Doppio
   attributo per prevalere sul colore che ogni titolo dichiara in site.css. */
[data-reveal][data-scramble="wait"],
.gv-scramble__ghost {
  color: var(--gv-text-ghost);
}