/* ===================================================================
   BASE — le fondamenta
   ===================================================================
   Reset, le variabili di :root (colori, font, ombre, curve di easing),
   le utility condivise e i bottoni. Non disegna nessuna sezione: qui
   c'e' solo cio' che tutto il resto da' per scontato.

   ATTENZIONE ALL'ORDINE
   Questi quattro file erano un solo css/style.css da 1615 righe, tagliato
   in sequenza il 04/09/2026: nessuna riga e' stata spostata rispetto alle
   altre, ne' riscritta. Nel CSS, a parita' di specificita', vince chi
   arriva dopo — quindi in index.html vanno collegati in QUEST'ORDINE e in
   nessun altro:

       base.css  ->  layout.css  ->  scene.css  ->  responsive.css

   Invertirne due cambia quale regola vince, e rompe la pagina in punti
   difficili da ricollegare alla causa.
   =================================================================== */

/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #050505;
  --text: #EBEBEB;
  --text-50: rgba(235, 235, 235, 0.5);
  --text-40: rgba(235, 235, 235, 0.4);
  --text-30: rgba(235, 235, 235, 0.3);
  /* Accent: the warm amber the whole page is tuned to — the highlights, the
     hero lightning and the footer laser all read as one family. */
  --accent: #db6b2b;
  --accent-soft: rgba(219, 107, 43, 0.15);
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.1);
  --hairline: rgba(255, 255, 255, 0.05);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Scene switches use a pair: the arriving section decelerates into place,
     the departing one accelerates away. Splitting them is what makes the swap
     read as a camera move rather than two halves of one cross-fade. */
  --ease-scene-in: cubic-bezier(0.19, 0.86, 0.26, 1);
  --ease-scene-out: cubic-bezier(0.6, 0.02, 0.86, 0.34);

  --font-serif: 'Newsreader', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space Grotesk', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

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

a { color: inherit; text-decoration: none; }

.container, section {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ===== Utilities ===== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* Uses the independent `translate` property, not `transform`, so the nav-wheel
   dodge effect can own `transform` on these same elements without the two
   fighting over one property (or inheriting this 0.8s transition). */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease);
}
.reveal.in-view { opacity: 1; translate: 0 0; }

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  box-shadow: 0 0 0 0 rgba(219, 107, 43, 0.6);
  animation: pulse-dot 2s var(--ease) infinite;
  position: relative;
  top: -1px;
}
.pulse-dot.small { width: 5px; height: 5px; margin: 0; }

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(219, 107, 43, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(219, 107, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(219, 107, 43, 0); }
}

/* The old .glass utility lived here. It was never used in the markup and has
   been superseded by css/liquid-glass.css, which is the page's one glass
   system now — two of them is how a page ends up with two different edges. */

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

.btn-solid {
  background: #fff;
  color: #050505;
  box-shadow: 0 0 0 0 rgba(219, 107, 43, 0.5);
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(219, 107, 43, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.pulse-shadow { animation: pulse-shadow 2.4s var(--ease) infinite; }
@keyframes pulse-shadow {
  0%   { box-shadow: 0 0 0 0 rgba(219, 107, 43, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(219, 107, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(219, 107, 43, 0); }
}