/* ==========================================================================
   DESIGN SYSTEM APPLE
   ==========================================================================
   Valori misurati su apple.com/it il 9 ottobre 2026 (stili calcolati e
   fogli CSS di Apple): vedi design-system/01-ANALISI-APPLE.md.

   Regola di convivenza: qui non si stilizza nessun elemento "nudo" a parte
   html e body. Tutto passa da classi, perche' le due isole (le card dei
   progetti e le citazioni dei colleghi) devono restare identiche e non
   ereditare niente di nostro oltre a quello che ridichiarano da sole.
   ========================================================================== */

/* ---------- Token ---------- */
:root {
  /* Neutri chiari */
  --a-bianco: #ffffff;
  --a-alluminio: #f5f5f7;        /* fondo alternato, footer, card su bianco */
  --a-grigio-incavo: #e8e8ed;    /* paddle, controlli segmentati */
  --a-grigio-filo: #d2d2d7;      /* fili e separatori */
  --a-grigio-terziario: #86868b; /* copy grigio dei titoli, didascalie su nero */
  --a-grigio-secondario: #6e6e73;/* testo secondario su chiaro */
  --a-inchiostro: #1d1d1f;       /* testo principale: mai nero puro sul bianco */

  /* Neutri scuri */
  --a-nero: #000000;             /* palco: hero e sezioni "Pro" */
  --a-nero-menu: #161617;
  --a-nero-superficie: #1d1d1f;
  --a-nero-superficie-2: #272729;
  --a-chiaro-su-nero: #f5f5f7;
  --a-grigio-su-nero: #86868b;

  /* Accento: il blu Apple, solo su cio' che si preme */
  --a-blu: #0071e3;
  --a-blu-hover: #0077ed;
  --a-blu-premuto: #006edb;
  --a-link: #0066cc;
  --a-link-su-nero: #2997ff;
  --a-fuoco: #0071e3;

  /* Vetro della nav */
  --a-vetro-chiaro: rgba(250, 250, 252, 0.8);
  --a-vetro-scuro: rgba(22, 22, 23, 0.8);
  --a-vetro-filtro: saturate(1.8) blur(20px);

  /* Carattere: SF Pro su Mac e iPhone (carattere di sistema), poi gli stessi
     ripieghi che dichiara Apple. SF Pro non si puo' ospitare sul web. */
  --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --a-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Misure */
  --a-nav: 52px;                         /* local nav */
  --a-testo: 980px;                      /* colonna classica di Apple */
  --a-ampio: min(1260px, 87.5%);         /* .viewport-content */
  --a-sezione: 160px;                    /* padding verticale delle sezioni */
  --a-sezione-ridotta: 110px;
  --a-gap-tile: 12px;
  --a-gap-galleria: 20px;

  /* Raggi */
  --a-raggio-pillola: 980px;
  --a-raggio-card: 28px;                 /* galleria "highlights" */
  --a-raggio-store: 18px;                /* card dello Store */
  --a-raggio-badge: 6px;

  /* Ombre: solo le card dello Store ne hanno una */
  --a-ombra-card: 2px 4px 12px rgba(0, 0, 0, 0.08);
  --a-ombra-card-su: 2px 4px 16px rgba(0, 0, 0, 0.16);

  /* Movimento */
  --a-curva: cubic-bezier(0.4, 0, 0.6, 1);           /* la piu' usata: nav, menu, colori */
  --a-curva-uscita: cubic-bezier(0, 0, 0.5, 1);      /* card dello Store */
  --a-curva-contenuto: cubic-bezier(0.25, 0.1, 0.3, 1);
  --a-curva-rivela: cubic-bezier(0.28, 0.11, 0.32, 1);
  --a-durata-comando: 0.1s;
  --a-durata-menu: 0.24s;
  --a-durata-colore: 0.32s;
  --a-durata-card: 0.3s;
}

@media (max-width: 1068px) {
  :root { --a-testo: 692px; --a-sezione: 120px; --a-sezione-ridotta: 90px; }
}
@media (max-width: 834px) {
  :root { --a-nav: 48px; }
}
@media (max-width: 734px) {
  :root { --a-testo: 87.5%; --a-ampio: 87.5%; --a-sezione: 80px; --a-sezione-ridotta: 64px; }
}

/* ---------- Base ---------- */
html {
  font-size: 106.25%;               /* 17 px, come Apple */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--a-nav);
  color-scheme: light;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--a-bianco);
  color: var(--a-inchiostro);
  font-family: var(--a-font);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }

/* Fuoco: anello blu Apple, scarto 1 px (3 px sui contenitori) */
:focus-visible { outline: 2px solid var(--a-fuoco); outline-offset: 1px; }
.a-contenitore-fuoco:focus-visible { outline-offset: 3px; }

/* Solo per lettori di schermo */
.a-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Tipografia ----------
   Tracking ottico: segue la dimensione come in SF Pro (negativo sotto i 20 px,
   leggermente positivo fra 19 e 40, di nuovo negativo sopra i 48). */
.a-tipo-hero {             /* media-hero-headline-elevated */
  font-family: var(--a-font-display);
  font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em;
}
.a-tipo-titolo {           /* headline / gallery section header */
  font-family: var(--a-font-display);
  font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em;
}
.a-tipo-sottotitolo {      /* tile-subhead */
  font-family: var(--a-font-display);
  font-size: 28px; line-height: 1.14286; font-weight: 400; letter-spacing: 0.007em;
}
.a-tipo-card {             /* feature-card-headline */
  font-family: var(--a-font-display);
  font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.007em;
}
.a-tipo-etichetta {        /* label: 24 px / 600 */
  font-family: var(--a-font-display);
  font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: 0.009em;
}
.a-tipo-intro {            /* intro */
  font-family: var(--a-font-display);
  font-size: 21px; line-height: 1.38105; font-weight: 400; letter-spacing: 0.011em;
}
.a-tipo-copy {             /* article copy: grigio pieno, parole chiave in inchiostro */
  font-family: var(--a-font-display);
  font-size: 21px; line-height: 1.38105; font-weight: 600; letter-spacing: 0.011em;
}
.a-tipo-corpo { font-size: 17px; line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em; }
.a-tipo-ridotto { font-size: 14px; line-height: 1.42859; font-weight: 400; letter-spacing: -0.016em; }
.a-tipo-didascalia { font-size: 12px; line-height: 1.33337; font-weight: 400; letter-spacing: -0.01em; }

@media (max-width: 1068px) {
  .a-tipo-hero { font-size: 64px; line-height: 1.0625; letter-spacing: -0.009em; }
  .a-tipo-titolo { font-size: 48px; line-height: 1.08349; letter-spacing: -0.003em; }
  .a-tipo-card { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
  .a-tipo-etichetta { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }
}
@media (max-width: 734px) {
  .a-tipo-hero { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
  .a-tipo-titolo { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
  .a-tipo-sottotitolo { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
  .a-tipo-card { font-size: 21px; line-height: 1.19048; letter-spacing: 0.011em; }
  .a-tipo-intro, .a-tipo-copy { font-size: 19px; line-height: 1.4211; letter-spacing: 0.012em; }
}

/* Titoli a due toni (Store: "Da non perdere. Dai un'occhiata..."):
   la seconda parte, che nel markup e' un <em>, passa al grigio. */
.a-due-toni em { font-style: normal; color: var(--a-grigio-secondario); }
.a-scuro .a-due-toni em { color: var(--a-grigio-su-nero); }

/* Copy grigio con le parole chiave in inchiostro (MacBook Air, "Design") */
.a-tipo-copy { color: var(--a-grigio-terziario); }
.a-tipo-copy strong, .a-tipo-copy b { font-weight: 600; color: var(--a-inchiostro); }
.a-scuro .a-tipo-copy strong, .a-scuro .a-tipo-copy b { color: var(--a-chiaro-su-nero); }

/* ---------- Contenitori ---------- */
.a-colonna { width: var(--a-testo); max-width: 100%; margin-inline: auto; }
.a-largo   { width: var(--a-ampio); margin-inline: auto; }
.a-sezione { padding-block: var(--a-sezione); }
.a-sezione-ridotta { padding-block: var(--a-sezione-ridotta) calc(var(--a-sezione-ridotta) + 10px); }

/* Blocchi: bianco, alluminio, nero */
.a-chiaro { background: var(--a-bianco); color: var(--a-inchiostro); }
.a-alluminio { background: var(--a-alluminio); color: var(--a-inchiostro); }
.a-scuro { background: var(--a-nero); color: var(--a-chiaro-su-nero); }

/* ---------- Bottoni ----------
   Pillola: fondo blu, raggio 980 px, 11 x 21 px, 17 px / 400.
   Secondario: trasparente, bordo e testo nel colore del link; al passaggio
   si riempie di blu come su apple.com. Piccolo: 14 px, 8 x 15 px. */
.a-pillola {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  min-width: 28px;
  padding: 11px 21px;
  border: 1px solid transparent;
  border-radius: var(--a-raggio-pillola);
  background: var(--a-blu);
  color: #ffffff;
  font-family: var(--a-font);
  font-size: 17px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -0.022em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--a-durata-comando) linear, color var(--a-durata-comando) linear, border-color var(--a-durata-comando) linear;
}
.a-pillola:hover { background: var(--a-blu-hover); color: #ffffff; }
.a-pillola:active { background: var(--a-blu-premuto); }
.a-pillola.a-secondaria {
  background: transparent;
  border-color: var(--a-link);
  color: var(--a-link);
}
.a-scuro .a-pillola.a-secondaria, .a-pillola.a-secondaria.a-su-nero {
  border-color: var(--a-link-su-nero);
  color: var(--a-link-su-nero);
}
.a-pillola.a-secondaria:hover {
  background: var(--a-blu-hover);
  border-color: transparent;
  color: #ffffff;
}
.a-pillola.a-piccola { padding: 8px 15px; font-size: 14px; line-height: 1.28577; letter-spacing: -0.016em; }
.a-pillola.a-mini { padding: 3px 10px; font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; }
@media (max-width: 734px) {
  .a-pillola { padding: 8px 15px; font-size: 14px; line-height: 1.28577; letter-spacing: -0.016em; }
}

/* Link di testo con la freccia, come "Scopri di piu' su Apple Intelligence" */
.a-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--a-link);
  font-size: 17px;
  line-height: 1.23536;
  letter-spacing: -0.022em;
  text-decoration: none;
}
.a-link:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.a-scuro .a-link { color: var(--a-link-su-nero); }
.a-link svg { width: 0.7em; height: 0.7em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Local nav ----------
   52 px (48 sul telefono), vetro rgba(250,250,252,.8) + saturate(1.8) blur(20px),
   titolo 21 / 600 a sinistra, link 12 px a destra, pillola blu in fondo.
   Sui blocchi neri diventa scura, come la local nav delle pagine "Pro". */
.a-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9997;
  min-height: var(--a-nav);
  color: var(--a-inchiostro);
  font-family: var(--a-font);
}
.a-nav-sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--a-vetro-chiaro);
  -webkit-backdrop-filter: var(--a-vetro-filtro);
  backdrop-filter: var(--a-vetro-filtro);
  transition: background-color var(--a-durata-colore) var(--a-curva);
}
.a-nav-sfondo::after {          /* filo sotto la barra, quando la pagina scorre */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: opacity var(--a-durata-colore) var(--a-curva);
}
.a-nav.a-nav-scorsa .a-nav-sfondo::after { opacity: 1; }
.a-nav.a-nav-scura { color: var(--a-chiaro-su-nero); }
.a-nav.a-nav-scura .a-nav-sfondo { background: var(--a-vetro-scuro); }
.a-nav.a-nav-scura .a-nav-sfondo::after { background: rgba(255, 255, 255, 0.24); }

/* ---------- Galleria orizzontale (highlights) ----------
   Scorrimento nativo con scroll-snap, card a raggio 28, 20 px fra le card,
   il bordo sinistro allineato al testo, frecce da 36 px in basso a destra. */
.a-galleria {
  display: grid;
  grid-auto-flow: column;
  gap: var(--a-gap-galleria);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--a-ampio)) / 2);
  padding-inline: calc((100% - var(--a-ampio)) / 2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.a-galleria::-webkit-scrollbar { display: none; }
.a-galleria > * { scroll-snap-align: start; }

.a-paddle-riga {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  width: var(--a-ampio);
  margin: 48px auto 0;
}
.a-paddle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--a-grigio-incavo);
  color: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  transition: background-color var(--a-durata-comando) linear, color var(--a-durata-comando) linear, opacity var(--a-durata-comando) linear;
}
.a-paddle:hover { background: #dfdfe4; color: rgba(0, 0, 0, 0.64); }
.a-paddle:active { background: #c1c1c6; }
.a-paddle[disabled] { opacity: 0.42; cursor: default; background: var(--a-grigio-incavo); }
.a-paddle svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Card ---------- */
.a-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--a-raggio-card);
  background: var(--a-bianco);
}
.a-alluminio .a-card { background: var(--a-bianco); }
.a-chiaro .a-card { background: var(--a-alluminio); }
.a-card.a-card-scura { background: var(--a-nero); color: var(--a-chiaro-su-nero); }

/* Card dello Store: raggio 18, ombra leggera, al passaggio cresce dell'1% */
.a-card-store {
  border-radius: var(--a-raggio-store);
  box-shadow: var(--a-ombra-card);
  transition: transform var(--a-durata-card) var(--a-curva-uscita), box-shadow var(--a-durata-card) var(--a-curva-uscita);
}
@media (hover: hover) {
  .a-card-store:hover { transform: scale(1.01); box-shadow: var(--a-ombra-card-su); }
}

/* ---------- Statistiche (ps-stat) ---------- */
.a-stat dt { font-size: 14px; line-height: 1.42859; letter-spacing: -0.016em; color: var(--a-grigio-secondario); }
.a-stat dd {
  margin: 4px 0 0;
  font-family: var(--a-font-display);
  font-size: 24px; line-height: 1.16667; font-weight: 600; letter-spacing: 0.009em;
}

/* ---------- Footer ---------- */
.a-footer {
  background: var(--a-alluminio);
  color: rgba(0, 0, 0, 0.56);
  font-size: 12px;
  line-height: 1.33337;
  letter-spacing: -0.01em;
}
.a-footer-contenuto {
  width: var(--a-testo);
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 22px;
}

/* ---------- Movimento ----------
   Le scene legate allo scorrimento usano le timeline di scorrimento del CSS
   (Chrome 115+, Safari 26+): girano fuori dal thread principale. Dove non ci
   sono, la pagina resta ferma e completa. Con movimento ridotto: niente. */
@keyframes a-entra {                  /* dissolvenza dal basso, come le intro Apple */
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes a-sale {                   /* rivelazione legata allo scorrimento */
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes a-cresce {                 /* scala delle scene "media hero" */
  from { opacity: 0.5; scale: 0.9; }
  to   { opacity: 1; scale: 1; }
}
@keyframes a-svanisce {               /* il contenuto dell'hero se ne va mentre esce */
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 -48px; }
}

/* Ogni animazione di questo foglio e di pagina.css sta dentro
   @media (prefers-reduced-motion: no-preference): con movimento ridotto non
   parte niente. Le isole hanno le loro regole e non vanno toccate. */

/* Modalita' leggera (prestazioni.js): niente vetro sfocato, che e' la cosa
   piu' cara da disegnare su una macchina lenta. */
body.leggero .a-nav-sfondo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 250, 252, 0.97); }
body.leggero .a-nav.a-nav-scura .a-nav-sfondo { background: rgba(22, 22, 23, 0.97); }