/* ==========================================================================
   studio matce. — la home è una lettera, una frase alla volta
   Tutti i valori estetici stanno qui sotto: cambiali in questo punto solo.
   ========================================================================== */

:root {
  /* Colori — l'inchiostro è l'unico colore della pagina */
  --carta: #F2F0EB;            /* panna "sporco" */
  --carta-ombra: #E8E6E0;      /* bordi appena più scuri, carta non perfetta */
  --inchiostro: #0000FF;

  /* Tipografia */
  --font-lettera: "DM Sans", system-ui, sans-serif;
  --corpo: clamp(24px, 1rem + 2.6vw, 46px);   /* 24px su telefono → 46px su schermi grandi */
  --interlinea: 1.28;
  --peso-testo: 350;
  --peso-grassetto: 600;
  --spaziatura-lettere: 0.01em;   /* spazio tra i caratteri: negativo = più stretto, positivo = più largo */

  /* Colonna e margini */
  --colonna: 19em;             /* larghezza massima della frase: corta, si legge d'un fiato */
  --margine-lato: 28px;

  /* Ritmo di lettura: quanto bisogna scrollare per ogni "unità" di frase.
     Più alto = lettura più lenta. Le frasi lunghe ricevono in automatico più spazio. */
  --passo-frase: 55svh;
  /* Modalità a step: quanto scroll per passare da una frase alla successiva (una schermata) */
  --passo-step: 100svh;

  /* Angoli (logo, lingua, contatti, colori) */
  --margine-angoli: 20px;      /* distanza dai bordi dello schermo */
  --corpo-angoli: 12px;
  --logo-altezza: 28px;
  --invito-basso: 84px;        /* su mobile sta sopra i contatti, per non sovrapporsi */

  /* Pieghe della lettera (foglio piegato in tre): 0 = invisibili */
  --piega-ombra: 0.08;         /* quanto è scura la linea della piega */
  --piega-luce: 0.3;           /* quanto è chiaro il riflesso appena sotto la piega */
  --piega-valle: 0.25;         /* quanto si scurisce il foglio avvicinandosi alla piega (rispetto alla linea) */

  /* Grana */
  --grana-opacita: 0.28;
  --grana-dimensione: 220px;   /* più grande = rumore più grosso, si vede meglio su retina */
}

@media (min-width: 768px) {
  :root {
    --margine-lato: 64px;
    --margine-angoli: 32px;
    --corpo-angoli: 13px;
    --logo-altezza: 34px;
    --invito-basso: 28px;
  }
}

/* Negativo: carta e inchiostro si scambiano. Tutto il resto segue da solo */
:root[data-tema="negativo"] {
  --piega-ombra: 0.16;         /* sul blu l'ombra deve essere più decisa e la luce molto più debole */
  --piega-luce: 0.07;
  --carta: #0000FF;
  --carta-ombra: #0000C4;
  --inchiostro: #F2F0EB;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--inchiostro);
  /* Carta: fondo piatto più una leggera irregolarità ai bordi */
  background-color: var(--carta);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, var(--carta-ombra) 100%);
  background-attachment: fixed;
  font-family: var(--font-lettera);
  font-size: var(--corpo);
  font-weight: var(--peso-testo);
  font-optical-sizing: auto;
  line-height: var(--interlinea);
  letter-spacing: var(--spaziatura-lettere);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 600ms ease, color 600ms ease;
}

::selection {
  background: var(--inchiostro);
  color: var(--carta);
}

a { color: inherit; }

a:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 6px;
  border-radius: 2px;
}

/* Nasconde alla vista ma lascia leggibile a motori di ricerca e screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Impaginazione "normale" ----------
   È quella che vedi senza JS o con "riduci movimento": la lettera intera, centrata. */

.foglio {
  padding: 22svh var(--margine-lato) 30svh;
}

.lettera {
  max-width: var(--colonna);
  margin: 0 auto;
  text-align: center;
  text-wrap: balance; /* righe di lunghezza simile, più belle al centro */
}

.lettera p {
  margin: 0 0 1.4em;
}

.lettera strong {
  font-weight: var(--peso-grassetto);
}

.firma {
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1;
  margin: 2em 0 0.3em !important;
}

.studio {
  font-size: 0.5em;
  letter-spacing: 0.02em;
  margin-bottom: 2.4em !important;
}

.cta {
  font-size: 0.62em;
  font-weight: 450;
}

.cta a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 160ms ease, text-underline-offset 160ms ease;
}


.cta a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.32em;
}

/* Link secondari (Rileggi, Portfolio): più piccoli e più tenui, affiancati, sottolineati al passaggio */
.secondarie {
  display: flex;
  justify-content: center;
  gap: 1.8em;
  font-size: 0.4em;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-top: 1.8em !important;
}

.secondarie a {
  text-decoration: none;
}

.secondarie a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* ---------- Una frase alla volta ----------
   Si attiva solo quando main.js aggiunge .scrittura-attiva a <html>.
   Il foglio diventa alto (lo imposta main.js), la lettera resta ferma al centro
   dello schermo con position: sticky, e lo scroll nativo decide quale frase si vede. */

/* In attesa di main.js nascondo la lettera, per evitare un lampo di testo intero */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.scrittura-attiva) .lettera { opacity: 0; }
}

.scrittura-attiva .foglio {
  padding: 0;
}

.scrittura-attiva .lettera {
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: none;
}

.scrittura-attiva .lettera p { margin: 0; }
.lettera:focus { outline: none; } /* riceve il focus solo da "Rileggi", non serve il contorno */
.scrittura-attiva .lettera br { display: none; }

/* Ogni frase occupa tutto lo schermo ed è centrata; le frasi sono sovrapposte */
.scrittura-attiva .riga,
.scrittura-attiva .chiusura {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--margine-lato);
  opacity: 0;
  pointer-events: none; /* le frasi invisibili non devono intercettare clic */
}

.scrittura-attiva .riga__testo {
  display: block;
  max-width: var(--colonna);
}

/* La chiusura diventa cliccabile solo quando è comparsa (classe messa da main.js) */
.scrittura-attiva .chiusura.attiva { pointer-events: auto; }

.scrittura-attiva .firma { margin-top: 0 !important; }

/* ---------- Modalità a step ----------
   Attiva quando main.js aggiunge .a-step a <html> (SCROLL_A_STEP = true).
   Lo scroll resta del browser: con scroll-snap si aggancia da solo all'inizio di ogni step,
   e "scroll-snap-stop: always" impedisce di saltare frasi anche con uno swipe veloce. */

.a-step { scroll-snap-type: y mandatory; }
.a-step .foglio { position: relative; }

.punto-step {
  position: absolute;
  left: 0;
  width: 1px;
  height: var(--passo-step);
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---------- Invito a scendere ---------- */

.invito { display: none; }

.scrittura-attiva .invito {
  position: fixed;
  left: 50%;
  bottom: calc(var(--invito-basso) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.invito__testo { white-space: nowrap; } /* "scorri lentamente · 2 minuti" sempre su una riga */

.invito__linea {
  width: 1px;
  height: 40px;
  background: var(--inchiostro);
  transform-origin: top;
  animation: invito-linea 2.8s ease-in-out infinite;
}

@keyframes invito-linea {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.invito--nascosto { opacity: 0; }

/* ---------- I quattro angoli ----------
   Fissi, piccoli, sempre al loro posto: incorniciano la lettera senza distrarre. */

.angolo {
  position: fixed;
  z-index: 5;
  font-size: var(--corpo-angoli);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.angolo--alto-sx { top: calc(var(--margine-angoli) + env(safe-area-inset-top)); left: calc(var(--margine-angoli) + env(safe-area-inset-left)); }
.angolo--alto-dx { top: calc(var(--margine-angoli) + env(safe-area-inset-top)); right: calc(var(--margine-angoli) + env(safe-area-inset-right)); }
.angolo--basso-sx { bottom: calc(var(--margine-angoli) + env(safe-area-inset-bottom)); left: calc(var(--margine-angoli) + env(safe-area-inset-left)); }
.angolo--basso-dx { bottom: calc(var(--margine-angoli) + env(safe-area-inset-bottom)); right: calc(var(--margine-angoli) + env(safe-area-inset-right)); }

.angolo a { text-decoration: none; }

/* Logo: SVG dentro l'HTML con fill="currentColor", quindi prende il colore dell'inchiostro */
.logo svg {
  display: block;
  height: var(--logo-altezza);
  width: auto;
}

/* Lingue: tutto a colore pieno, la lingua attiva è sottolineata */
.lingue {
  display: flex;
  gap: 0.45em;
}

.lingue a[aria-current="page"],
.lingue a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Contatti */
.contatti {
  display: flex;
  flex-direction: column;
  font-style: normal; /* <address> di default è in corsivo */
}

.contatti a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* In alto a destra: il mestiere e, sotto, la frase che dice cosa faccio */
.mestiere {
  max-width: min(21em, calc(100vw - 2 * var(--margine-angoli) - 110px)); /* lascia spazio al logo */
  text-align: right;
}

.mestiere p { margin: 0; }

.mestiere__frase {
  /* Stesso corpo, peso e interlinea di "Visual & Brand Design": li eredita da .angolo */
  text-wrap: balance;
}


/* In basso a destra: lingue e colore sulla stessa riga */
.angolo--basso-dx {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Interruttore negativo: un cerchio.
   Su carta è vuoto; al passaggio si riempie; cliccato resta pieno (negativo attivo).
   In negativo fa il contrario: al passaggio si svuota, e cliccando si torna alla carta. */
.tema {
  display: block;
  padding: 10px;
  margin: -10px; /* area di tocco più grande senza spostare il cerchio */
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.tema[hidden] { display: none; }

.tema:focus-visible {
  outline: 2px solid var(--inchiostro);
  outline-offset: 2px;
  border-radius: 50%;
}

.tema__icona {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 250ms ease;
}

.tema:hover .tema__icona,
.tema[aria-pressed="true"] .tema__icona { background-color: currentColor; }

.tema[aria-pressed="true"]:hover .tema__icona { background-color: transparent; }

/* Sui touch non c'è il passaggio del mouse: evito che il cerchio resti "a metà stato" dopo il tocco */
@media (hover: none) {
  .tema:hover .tema__icona { background-color: transparent; }
  .tema[aria-pressed="true"] .tema__icona,
  .tema[aria-pressed="true"]:hover .tema__icona { background-color: currentColor; }
}

/* ---------- Contatore "12 / 36" ----------
   Prende il posto dell'invito a scendere quando si comincia a leggere. */

.contatore { display: none; }

.scrittura-attiva .contatore {
  display: block;
  position: fixed;
  left: 50%;
  bottom: calc(var(--invito-basso) + 10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-size: var(--corpo-angoli);
  font-weight: 400;
  letter-spacing: 0.02em; /* come gli altri testi della cornice */
  font-variant-numeric: tabular-nums; /* le cifre hanno tutte la stessa larghezza: il testo non balla */
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.contatore--visibile { opacity: 1 !important; }

/* Su mobile il contatore entra nella cornice: nell'angolo in basso a destra, appena sopra IT / EN */
@media (max-width: 767px) {
  .scrittura-attiva .contatore {
    left: auto;
    right: calc(var(--margine-angoli) + env(safe-area-inset-right));
    bottom: calc(var(--margine-angoli) + 26px + env(safe-area-inset-bottom));
    transform: none;
    text-align: right;
  }
}

/* Da tablet in su c'è spazio: il contatore si allinea alla riga degli angoli in basso */
@media (min-width: 768px) {
  .scrittura-attiva .contatore { bottom: calc(var(--margine-angoli) + env(safe-area-inset-bottom)); }
}

/* ---------- Pieghe ----------
   Due pieghe orizzontali a 1/3 e 2/3 dello schermo, come una lettera piegata in tre e riaperta.
   Per ogni piega: un'ombra morbida che scende verso la piega, una linea scura sottile
   e un riflesso chiaro subito sotto. Nero e bianco trasparenti: funzionano anche in negativo. */

.pieghe {
  position: fixed;
  inset: 0;
  z-index: 9; /* sopra al testo (la piega segna anche l'inchiostro), sotto alla grana */
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgb(0 0 0 / 0) 0%,
      rgb(0 0 0 / calc(var(--piega-ombra) * var(--piega-valle))) calc(33.333% - 1px),
      rgb(0 0 0 / var(--piega-ombra)) 33.333%,
      rgb(255 255 255 / var(--piega-luce)) calc(33.333% + 1px),
      rgb(255 255 255 / 0) calc(33.333% + 28px),
      rgb(0 0 0 / 0) calc(33.333% + 29px),
      rgb(0 0 0 / calc(var(--piega-ombra) * var(--piega-valle))) calc(66.666% - 1px),
      rgb(0 0 0 / var(--piega-ombra)) 66.666%,
      rgb(255 255 255 / var(--piega-luce)) calc(66.666% + 1px),
      rgb(255 255 255 / 0) calc(66.666% + 28px),
      rgb(0 0 0 / 0) 100%);
}

/* Pieghe nascoste per ora: per riattivarle cancella questa regola */
.pieghe { display: none; }

/* ---------- Grana ----------
   Rumore SVG (feTurbulence) in un layer fisso: non scorre col contenuto.
   Il tile è grande apposta, così il rumore resta visibile anche su schermi retina. */

.grana {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: var(--grana-opacita);
  mix-blend-mode: multiply;
  background-size: var(--grana-dimensione) var(--grana-dimensione);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Riduci movimento: nessun effetto ---------- */

@media (prefers-reduced-motion: reduce) {
  .invito, .contatore { display: none !important; }
}