/* ============================================================
   RACHELEITE — Base
   Reset leggero, tipografia di base, utility trasversali.
   ============================================================ */

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

* { margin: 0; }

html {
  /* Lo smooth della home è gestito da Lenis. Evita due sistemi di
     interpolazione sovrapposti durante ancore e navigazione interna. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-avorio);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ---- Loader a comparsa ritardata ----
   Attivo su OGNI caricamento, ma diventa visibile solo se dopo
   ~350ms la pagina non è ancora pronta (html.loader-visible,
   aggiunta dallo script inline). Caricamento veloce = nessun
   flash, caricamento lento = loader finché non è tutto pronto. */
.site-loader { display: none; }

html.has-loader body { overflow: hidden; }

html.has-loader .site-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: var(--c-avorio);
  opacity: 0;
  visibility: visible;
  transition: opacity 450ms var(--ease-out);
}

html.loader-visible .site-loader { opacity: 1; }

html.has-loader .site-loader.is-leaving,
html.loader-visible .site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out), visibility 500ms;
}

.site-loader__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
}

.site-loader__logo {
  width: min(17.5rem, 72vw);
  height: auto;
}

/* Le animazioni interne partono solo quando il loader è visibile,
   così il logo non "entra" a metà corsa */
html.loader-visible .site-loader__logo {
  animation: loader-logo-in 800ms var(--ease-out) both;
}

.site-loader__track {
  width: min(9rem, 42vw);
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-petrolio) 16%, transparent);
}

.site-loader__track span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-terracotta);
  transform-origin: left center;
  transform: scaleX(0);
}

html.loader-visible .site-loader__track span {
  animation: loader-progress 1350ms var(--ease-out) both;
}

@keyframes loader-logo-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loader-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Materia: grana sottile su tutta la pagina (Inchiostro e Luce,
   superfici che raccontano processo, non perfezione).
   Niente mix-blend-mode: costringeva il browser a ricomporre l'intera
   pagina a ogni frame di scroll ed era una delle cause degli scatti. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400; /* DM Serif Display ha un solo peso: niente bold finto */
  line-height: var(--lh-tight);
  color: var(--c-petrolio);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--c-bordeaux); }

::selection { background: var(--c-cipria); color: var(--c-bordeaux); }

:focus-visible {
  outline: 3px solid var(--c-terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Skip link (WCAG, richiesto dal DevBrief Cap. 08) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--c-petrolio);
  color: var(--c-avorio);
  text-decoration: none;
  border-radius: 0 0 .5rem .5rem;
}
.skip-link:focus { top: 0; }

/* ---- Layout ---- */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.container--narrow { width: min(var(--container-narrow), 100% - var(--gutter) * 2); }

.section { padding-block: var(--space-7); }

/* ---- Tipografia editoriale ---- */
.overline {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-bordeaux);
}
.overline::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-ink-soft);
}

.text-soft { color: var(--c-ink-soft); }

/* Punto terracotta: eco del cerchio del logo.
   REGOLA BRAND: un solo accento terracotta per composizione. */
.dot-accent { color: var(--c-terracotta); }

/* ---- Bottoni ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: 100vmax;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-petrolio);
  color: var(--c-avorio);
}
.btn--primary:hover { background: var(--c-bordeaux); }

.btn--ghost {
  background: transparent;
  color: var(--c-petrolio);
  border-color: var(--c-petrolio);
}
.btn--ghost:hover { background: var(--c-petrolio); color: var(--c-avorio); }

/* Variante per bande scure */
.btn--inverse {
  background: var(--c-terracotta);
  color: var(--c-avorio)!important;
}
.btn--inverse:hover { background: var(--c-cipria); color: var(--c-bordeaux); }

/* ---- Reveal: gestiti da GSAP via [data-reveal] e [data-lines] ----
   Robustezza: lo stato CSS di default è VISIBILE. Gli stati iniziali
   nascosti vengono impostati da main.js SOLO quando il motore di
   animazione è attivo (html.js-motion) — senza JS o con
   prefers-reduced-motion il contenuto c'è sempre, completo. ---- */

/* ---- Solo screen reader ---- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Reduced motion: NON negoziabile (DevBrief Cap. 08) ----
   Tutto visibile, nessuna animazione, scroll nativo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-loader { display: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}