/* ==========================================================================
   ATLAS ESTATE — BASE
   Reset, elementi, landmark, accessibilita, reduced motion.
   Carica sempre DOPO tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* hidden come fallback, clip come regola: hidden da solo lascia comunque
     spostare la pagina di lato da codice, e basta un anchor per rovinarla. */
  overflow-x: hidden;
  overflow-x: clip;
}

body{
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd{ margin: 0; }
ul[class], ol[class]{ list-style: none; margin: 0; padding: 0; }

img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
}
img, video{ height: auto; }

input, button, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: 0; padding: 0; cursor: pointer; }

table{ border-collapse: collapse; width: 100%; }

::selection{ background: var(--accent); color: var(--text-on-accent); }

/* --------------------------------------------------------------------------
   2 · TIPOGRAFIA DEGLI ELEMENTI
   La misura di riga si applica sull'elemento di testo, mai sul contenitore:
   ch si risolve sul font ereditato dall'elemento stesso.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1{
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  max-width: var(--measure-head);
}
h2{
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-h2);
  max-width: var(--measure-head);
}
h3{ font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
h4{ font-size: var(--fs-h4); font-weight: var(--fw-semi); }

p{ max-width: var(--measure-body); text-wrap: pretty; }

strong, b{ font-weight: var(--fw-semi); }
small{ font-size: var(--fs-small); }

a{
  color: inherit;
  text-decoration-color: var(--accent-muted);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease-out),
              text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover{
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

/* Eyebrow e micro etichette. Il "mono" di Atlas: Archivo maiuscolo spaziato,
   che e gia la firma tipografica del marchio. Vedi DECISIONS.md D-09. */
.ae-label{
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.ae-lead{
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  max-width: var(--measure-lead);
}

/* --------------------------------------------------------------------------
   3 · LANDMARK E ACCESSIBILITA
   -------------------------------------------------------------------------- */
main:focus{ outline: none; }

.ae-skip{
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-modal);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-semi);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease-out);
}
.ae-skip:focus{ transform: translateY(0); }

:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible){ outline: none; }

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

[hidden]{ display: none !important; }

/* Target da 44px sotto puntatore grossolano, aggiunti senza cambiare layout.
   Nota: cambiando display si RIDICHIARA sempre l'allineamento, altrimenti
   un inline-flex nudo allinea l'etichetta a sinistra e restringe le righe piene. */
@media (pointer: coarse){
  .ae-btn, .ae-link-btn, .ae-tap{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   4 · LAYOUT DI BASE
   -------------------------------------------------------------------------- */
.ae-container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ae-container--text{ max-width: var(--container-text); }
.ae-container--wide{ max-width: var(--container-wide); }

.ae-section{ padding-block: var(--section-y); position: relative; }
.ae-section--lg{ padding-block: var(--section-y-lg); }

/* --------------------------------------------------------------------------
   5 · IL LAYER AMBIENTE
   Un solo strato fisso dietro tutto: il pattern colonnato in filigrana, con
   una deriva lentissima. Serve a far sentire lo scroll come attraversare un
   luogo invece che scorrere sezioni impilate.
   Opacita massima 0.06 su blu notte: mai a piena forza dietro al testo.
   -------------------------------------------------------------------------- */
.ae-ambient{
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  opacity: .06;
  background-image:
    repeating-linear-gradient(90deg,
      var(--accent) 0 1px, transparent 1px 148px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%,
      #000 10%, transparent 78%);
  animation: ae-ambient-drift 90s linear infinite;
  animation-delay: -22s;   /* meta ciclo al primo paint: nessuno scatto d'avvio */
}
@keyframes ae-ambient-drift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-148px,0,0); }
}

/* --------------------------------------------------------------------------
   6 · FONT
   Due famiglie, auto-ospitate. Nessun peso "per sicurezza".

   Archivo e un font variabile: un solo file copre 400, 500 e 600.
   Spectral e statico e viene caricato SOLO nei pesi 500 e 600: il 400
   servirebbe in due punti soli e costerebbe un file intero.

   I file latin-ext esistono ma si scaricano solo se compare un carattere
   fuori dal latin di base. Con testo italiano non partono mai, quindi il
   peso reale a caricamento e:
     archivo-latin 34 KB + spectral-500-latin 22 KB + spectral-600-latin 22 KB
     = circa 80 KB, dentro il budget di 95 KB.
   -------------------------------------------------------------------------- */

/* Archivo — variabile, 400 a 600 in un solo file */
@font-face{
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral — statico, solo i due pesi realmente usati */
@font-face{
  font-family: "Spectral";
  src: url("../fonts/spectral-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Spectral";
  src: url("../fonts/spectral-500-latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family: "Spectral";
  src: url("../fonts/spectral-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: "Spectral";
  src: url("../fonts/spectral-600-latin-ext.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------

/* --------------------------------------------------------------------------
   7 · PAUSA GLOBALE
   animation-play-state NON e ereditata: metterla su un contenitore non
   raggiunge mai i figli ne gli pseudo elementi. Questa e l'unica forma
   che non puo sbagliare. La classe la commuta core.js su visibilitychange.
   -------------------------------------------------------------------------- */
body.is-paused *,
body.is-paused *::before,
body.is-paused *::after{
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   8 · REDUCED MOTION
   Onorato completamente. Il ritorno indietro (motion riattivato a pagina
   aperta) e gestito da JS, che deve disfare il pinning: vedi MOTION.md §8.

   Attenzione: nessun "transform: none !important" a tappeto. Azzererebbe
   anche le trasformazioni di posizionamento e manderebbe fuori schermo
   elementi posizionati per breakpoint.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .ae-ambient{ animation: none; }

  /* Tutto cio che e coreografato si mostra nel suo stato finale. */
  [data-reveal]{ opacity: 1 !important; }
}