/* Sito di Alessandro Quarta — nero, bianco e blu, forme stondate */

:root {
  --nero: #000;
  --fondo-2: #09090b;
  --superficie: #121215;
  --superficie-alta: #1a1a1f;
  --bianco: #fff;
  --testo: #d6d6da;
  --tenue: #8b8b93;
  --linea: rgba(255, 255, 255, 0.09);
  --linea-forte: rgba(255, 255, 255, 0.2);
  --blu: #2f7bff;
  --blu-chiaro: #6aa1ff;
  --blu-tenue: rgba(47, 123, 255, 0.16);

  --largo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --larghezza: 1200px;
  --margine: clamp(16px, 5vw, 56px);
  --raggio: 28px;
  color-scheme: dark;
}

/* Lingue: si vede solo il testo della lingua scelta */
html[data-lingua="it"] [lang="en"],
html[data-lingua="en"] [lang="it"] { display: none !important; }

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

html { background: var(--nero); overflow-x: clip; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nero);
  color: var(--testo);
  font: 400 17px/1.6 var(--largo);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--bianco); margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
strong { color: var(--bianco); font-weight: 600; }
::selection { background: var(--blu); color: #fff; }

.contenuto { max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }

/* Puntino blu */
.punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--blu);
  box-shadow: 0 0 0 4px var(--blu-tenue), 0 0 14px var(--blu);
  animation: respiro 2.8s ease-in-out infinite;
}
@keyframes respiro { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }

.etichetta {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blu-chiaro);
}
.etichetta--tenue { color: var(--tenue); }

/* Barra in alto */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  padding: 12px var(--margine);
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
.barra__nome {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  font: 800 18px/1 var(--largo); font-variation-settings: "wdth" 125;
  letter-spacing: 0.04em; color: var(--bianco); text-decoration: none;
}
.barra__menu {
  display: flex; gap: 4px;
  padding: 4px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea);
}
.barra__menu a {
  font: 500 14px/1 var(--largo);
  color: var(--tenue); text-decoration: none;
  padding: 9px 14px; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.barra__menu a:hover { color: var(--bianco); background: var(--superficie-alta); }
.lingue { grid-column: 3; justify-self: end; display: flex; padding: 4px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); }
.lingue button {
  border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--tenue); padding: 8px 11px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.lingue button[aria-pressed="true"] { background: var(--bianco); color: var(--nero); }
@media (max-width: 860px) { .barra__menu { display: none; } }

/* Pannelli che scorrono uno sopra l'altro: ognuno resta fermo quando il
   suo fondo arriva al fondo dello schermo, e il successivo ci sale sopra.
   Il punto in cui si ferma (--fermo) lo calcola js/sito.js. */
.pannello {
  position: sticky; top: var(--fermo, 0px);
  background: var(--nero);
  border-radius: 40px 40px 0 0;
  border-top: 1px solid var(--linea);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.85);
  padding: clamp(72px, 10vw, 128px) 0;
  transform-origin: 50% 0;
}
.pannello:nth-child(even) { background: var(--fondo-2); }
/* Con il menu del CV aperto, il pannello dell'apertura resta sopra il
   successivo, altrimenti il menu ci finisce dietro. */
.pannello:has(.scarica__menu:not([hidden])) { z-index: 2; }
.pannello::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #000; opacity: var(--velo, 0); pointer-events: none;
}

/* Apertura */
.apertura {
  border-radius: 0; border-top: 0; box-shadow: none;
  padding-top: clamp(40px, 6vw, 72px);
  min-height: calc(100svh - 62px); display: flex; align-items: center;
}
.apertura__griglia {
  /* Due colonne vuote ai lati tengono testo e foto al centro della pagina */
  display: grid; grid-template-columns: 1fr minmax(0, 470px) minmax(0, 380px) 1fr; align-items: end;
  column-gap: clamp(28px, 3.5vw, 48px); width: 100%;
}
.apertura__titolo { grid-column: 1 / -1; container-type: inline-size; }
/* Il testo si appoggia alla foto: allineato a destra, vicino a lei */
.apertura__testo { grid-column: 2; align-self: center; justify-self: end; text-align: right; }
.ritratto { grid-column: 3; }
.apertura__testo .apertura__frase { margin-left: auto; }
.apertura__testo .azioni { justify-content: flex-end; }
.apertura__testo .scarica__menu { left: auto; right: 0; text-align: left; }
.nome {
  display: flex; flex-direction: column;
  margin: 22px 0 clamp(32px, 4vw, 48px);
  font: 900 11.4cqw/0.86 var(--largo);
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.nome span:last-child { color: transparent; -webkit-text-stroke: 1.5px var(--bianco); }
.ruolo {
  display: inline-block;
  font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--bianco);
  padding: 11px 16px; border-radius: 999px; border: 1px solid var(--linea-forte);
}
.apertura__frase { margin-top: 24px; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.55; max-width: 34ch; }

.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 15px/1 var(--largo); text-decoration: none; cursor: pointer;
  color: var(--bianco); background: transparent;
  border: 1px solid var(--linea-forte);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.pulsante:hover { border-color: var(--bianco); }
.pulsante--pieno { background: var(--blu); border-color: var(--blu); }
.pulsante--pieno:hover { background: #4a8cff; border-color: #4a8cff; transform: translateY(-1px); }
.pulsante__freccia { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Scelta della lingua del CV */
.scarica { position: relative; }
.scarica__menu {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 5;
  min-width: 220px; padding: 6px; border-radius: 22px;
  background: var(--superficie-alta); border: 1px solid var(--linea-forte);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  display: grid; gap: 2px;
  animation: apri 0.18s ease-out;
}
.scarica__menu[hidden] { display: none; }
@keyframes apri { from { opacity: 0; transform: translateY(-6px); } }
.scarica__menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  font-weight: 600; color: var(--bianco); text-decoration: none;
}
.scarica__menu a:hover { background: var(--blu-tenue); }
.scarica__sigla {
  font: 500 11px/1 var(--mono); letter-spacing: 0.08em;
  padding: 6px 8px; border-radius: 999px; background: var(--blu); color: #fff;
}

/* Foto */
.ritratto {
  margin: 0; justify-self: end; width: 100%;
  aspect-ratio: 4 / 5; border-radius: 36px; overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linea), 0 30px 80px -20px rgba(47, 123, 255, 0.35);
}
.ritratto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

@media (max-width: 800px) {
  .apertura { min-height: 0; }
  .apertura__griglia { grid-template-columns: 1fr; }
  .apertura__testo, .ritratto { grid-column: 1; }
  .apertura__testo { justify-self: start; text-align: left; }
  .apertura__testo .apertura__frase { margin-left: 0; }
  .apertura__testo .azioni { justify-content: flex-start; }
  .apertura__testo .scarica__menu { left: 0; right: auto; }
  .ritratto { margin-top: 44px; justify-self: stretch; max-width: 420px; aspect-ratio: 1; }
}

/* Testata delle sezioni */
.sezione__testa { margin-bottom: clamp(36px, 5vw, 64px); }
.sezione__testa .etichetta { padding: 8px 12px; border-radius: 999px; background: var(--blu-tenue); }
.sezione__testa h2 {
  margin-top: 18px;
  font: 800 clamp(34px, 5.6vw, 68px)/0.95 var(--largo);
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em; text-transform: uppercase;
}

/* Esperienza */
.percorso { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lavoro {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: clamp(24px, 4vw, 44px); border-radius: var(--raggio);
  background: var(--superficie); border: 1px solid var(--linea);
}
.lavoro__quando {
  display: inline-block;
  font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blu-chiaro); padding: 8px 12px; border-radius: 999px; background: var(--blu-tenue);
}
.lavoro__dove {
  margin-top: 14px;
  font: 800 22px/1.1 var(--largo); font-variation-settings: "wdth" 120;
  color: var(--bianco); text-transform: uppercase; letter-spacing: 0.01em;
}
.lavoro h3 { font: 700 clamp(24px, 2.8vw, 32px)/1.15 var(--largo); margin-bottom: 24px; }
.area + .area { margin-top: 24px; }
.area h4 {
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 12px;
}
.area ul, .elenco { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.area li, .elenco li { position: relative; padding-left: 22px; }
.area li::before, .elenco li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blu);
}
@media (max-width: 720px) { .lavoro { grid-template-columns: 1fr; gap: 18px; } }

/* Progetti */
.progetto {
  border-radius: 36px; padding: clamp(22px, 4vw, 48px);
  background: var(--superficie); border: 1px solid var(--linea);
}
.progetto + .progetto { margin-top: 20px; }
.progetto h3 {
  margin: 14px 0 16px;
  font: 800 clamp(28px, 3.6vw, 44px)/1 var(--largo); font-variation-settings: "wdth" 110;
  text-transform: uppercase; letter-spacing: -0.01em;
}
.progetto__intro { font-size: 18px; }
.progetto h4 {
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 14px;
}
.progetto__dettagli {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px 56px; margin-top: 44px;
}
.progetto--breve .etichette { margin-top: 26px; }
.progetto__punti { font-size: 17px; }
.etichette.progetto__etichette { margin-top: 32px; justify-content: center; }
.nota { margin-top: 18px; text-align: center; font: 400 12px/1.4 var(--mono); color: var(--tenue); }

/* Dispositivi con la dashboard dentro */
.dispositivi {
  display: grid; grid-template-columns: 1fr 22%;
  gap: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px);
  align-items: center; margin-top: 48px;
  padding: clamp(20px, 4vw, 56px); border-radius: 32px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(47, 123, 255, 0.22), transparent 60%), #050507;
  border: 1px solid var(--linea);
}
.dispositivo { margin: 0; }
.dispositivo figcaption {
  margin-top: 14px; text-align: center;
  font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue);
}
/* Solo da guardare: le schermate scorrono da sole (js/sito.js) */
.dispositivo__schermo iframe { pointer-events: none; }
/* Un velo trasparente sopra lo schermo: nessun tocco, clic o scorrimento
   arriva alla dashboard, nemmeno dove pointer-events non basta. */
.dispositivo__schermo::after { content: ""; position: absolute; inset: 0; z-index: 3; }

.dispositivo__cornice {
  position: relative; background: #1b1b1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px rgba(0, 0, 0, 0.6);
}
.dispositivo__schermo {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: var(--larghezza) / var(--altezza);
}
.dispositivo__schermo iframe {
  position: absolute; left: 0; border: 0; display: block;
  /* Sul telefono lascia in alto lo spazio della barra di stato */
  top: calc(var(--barra-stato, 0) * var(--scala, 0.5) * 1px);
  width: calc(var(--larghezza) * 1px); height: calc((var(--altezza) - var(--barra-stato, 0)) * 1px);
  transform: scale(var(--scala, 0.5)); transform-origin: 0 0;
  background: #000;
}
.dispositivo--tablet .dispositivo__cornice { padding: 2.2%; border-radius: clamp(18px, 3vw, 36px); }
.dispositivo--tablet .dispositivo__schermo { border-radius: clamp(8px, 1.4vw, 16px); }
.dispositivo--telefono .dispositivo__cornice { padding: 5%; border-radius: clamp(26px, 4vw, 48px); }
.dispositivo--telefono .dispositivo__schermo { border-radius: clamp(20px, 3.2vw, 40px); }
.dispositivo__schermo { container-type: inline-size; }
.dispositivo__stato {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  height: calc(var(--barra-stato) / var(--altezza) * 100%);
  display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 12%;
  font: 600 4.2cqw/1 -apple-system, "SF Pro Text", var(--largo); color: #fff;
}
.dispositivo__stato svg { width: 17cqw; fill: currentColor; stroke: currentColor; }
.dispositivo__isola {
  position: absolute; z-index: 2; left: 50%; top: 6.4%; translate: -50% 0;
  width: 30%; height: 3.2%; border-radius: 999px; background: #000;
}
/* Il pannello a muro è bianco, con la cornice più spessa */
.dispositivo--termostato .dispositivo__cornice {
  padding: 4.5% 4.5% 7%; border-radius: clamp(16px, 2.4vw, 26px);
  background: linear-gradient(160deg, #f4f3f0, #d9d8d4);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 #fff;
}
.dispositivo--termostato .dispositivo__schermo { border-radius: 8px; }

@media (max-width: 720px) {
  .dispositivi { grid-template-columns: 1fr; padding: 18px; }
  .dispositivo--telefono { justify-self: center; width: 56%; }
}

/* Termostato: il pannello a sinistra, come funziona a destra */
.termostato {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: 44px;
}
.termostato__palco {
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px); border-radius: 32px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(47, 123, 255, 0.22), transparent 60%), #050507;
  border: 1px solid var(--linea);
  position: sticky; top: 100px;
}
.termostato__palco .dispositivo { width: 100%; }
.termostato .progetto__dettagli { grid-template-columns: 1fr; margin-top: 0; gap: 32px; }
@media (max-width: 860px) {
  .termostato { grid-template-columns: 1fr; }
  .termostato__palco { position: static; }
}

.etichette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etichette li {
  font: 500 13px/1 var(--largo);
  padding: 10px 14px; border-radius: 999px;
  background: var(--superficie-alta); border: 1px solid var(--linea);
  color: var(--bianco);
}

/* In breve */
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scheda {
  padding: 26px; border-radius: var(--raggio);
  background: var(--superficie); border: 1px solid var(--linea);
  display: grid; align-content: start; gap: 6px;
}
.scheda--larga { grid-column: span 2; }
.scheda h3 {
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 10px;
}
.scheda p { color: var(--bianco); }
.scheda .scheda__tenue { color: var(--tenue); }
.scheda--accento { background: linear-gradient(140deg, #1f4fb0, var(--blu)); border-color: transparent; }
.scheda--accento h3 { color: rgba(255, 255, 255, 0.75); }
.scheda__grande { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; }
@media (max-width: 900px) { .schede { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .schede { grid-template-columns: 1fr; } .scheda--larga { grid-column: auto; } }

/* Contatti */
.contatti { padding-bottom: 0; }
.contatti .contenuto { container-type: inline-size; }
.contatti__titolo {
  margin-top: 18px;
  font: 900 9.4cqw/0.88 var(--largo); font-variation-settings: "wdth" 120;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.contatti__elenco {
  list-style: none; padding: 0; margin: clamp(40px, 6vw, 64px) 0 0;
  display: grid; gap: 12px;
}
.contatti__elenco > li > a, .contatti__cv {
  display: grid; gap: 12px; height: 100%;
  padding: 24px 26px; border-radius: var(--raggio);
  background: var(--superficie); border: 1px solid var(--linea);
  font: 600 clamp(17px, 2vw, 24px)/1.2 var(--largo); color: var(--bianco);
  text-decoration: none; overflow-wrap: anywhere;
  width: 100%; text-align: left; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.contatti__elenco > li > a:hover, .contatti__cv:hover, .contatti__cv[aria-expanded="true"] { background: var(--blu-tenue); border-color: var(--blu); transform: translateY(-2px); }
.contatti__tipo { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tenue); }

.piede {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(64px, 9vw, 112px);
  padding: 26px 0 max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--tenue);
}