/* ci pensa lui — sito GEO · base + utility editoriali
   Carica DOPO styles.css del design system. Calore + struttura editoriale. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--carta);
  color: var(--inchiostro);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--oliva-200); color: var(--inchiostro); }

a { color: inherit; }

/* contenitore */
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 720px) { .wrap { padding-left: 22px; padding-right: 22px; } }

/* etichetta istituzionale — maiuscoletta tracciata (mai un titolo) */
.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label .num {
  color: var(--oliva);
  font-variant-numeric: tabular-nums;
}
.label--accent .num { color: var(--terracotta); }

/* filetto editoriale */
.rule { height: 1px; background: var(--border-strong); border: 0; }
.rule--soft { background: var(--border-soft); }

/* titoli (sempre minuscoli) */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: none;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}
.h-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: balance;
}
.prose { line-height: var(--leading-relaxed); color: var(--text-body); }
.prose p { margin: 0 0 1em; text-wrap: pretty; }

/* iniziale maiuscola ovunque (titoli e testi) — scelta cliente.
   I wrapper di editing [data-om-text] ri-applicano la trasformazione alla
   prima lettera, vincendo su ::first-letter: li neutralizziamo così ogni
   blocco può maiuscolare la sola iniziale. */
#root h1 [data-om-text], #root h2 [data-om-text], #root h3 [data-om-text],
#root p [data-om-text], #root li [data-om-text],
.h-display [data-om-text], .h-title [data-om-text] { text-transform: none !important; }

#root h1::first-letter, #root h2::first-letter, #root h3::first-letter,
#root p::first-letter, #root li::first-letter,
.h-display::first-letter, .h-title::first-letter { text-transform: uppercase !important; }

/* i pulsanti del design system forzano lowercase inline: rispettiamo la
   nuova regola di casing mostrando il testo come scritto nel sorgente. */
#root a, #root button { text-transform: none !important; }

/* micro chip mono-ish per i blocchi "estratto AI" */
.mono {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

/* entrata gentile — stato base VISIBILE, si anima da nascosto.
   forwards (non both): se l'animazione non parte, resta visibile. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: cpl-rise .5s var(--ease-soft) forwards; }
  @keyframes cpl-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* nascondi scrollbar orizzontale demo */
.no-bar::-webkit-scrollbar { height: 0; }

/* caret di scrittura — "qualcuno racconta la tua azienda" */
.cpl-caret {
  display: inline-block;
  width: 2px;
  margin-left: 1px;
  transform: translateY(2px);
  background: var(--oliva);
  align-self: stretch;
}
@media (prefers-reduced-motion: no-preference) {
  .cpl-caret { animation: cpl-blink 1.05s steps(1) infinite; }
  @keyframes cpl-blink { 50% { opacity: 0; } }
}