/* Stili globali del sito finale. Gli stili specifici di ogni sezione/animazione
   possono restare qui sotto sezioni dedicate, o essere spostati in file separati
   quando il file cresce troppo.

   Impostazione: nero pieno, tipografia Inter, molto respiro, nessun bordo o
   riempimento decorativo. Tutto ciò che comunica gerarchia lo fa con
   dimensione, peso e spaziatura del testo — non con colore o contenitori. */

/* Nero pieno (#000) e non --color-bg (#0b0b0f): i fotogrammi del logo hanno il
   fondo nero puro, e la sequenza chiude con una dissolvenza a nero. Qualunque
   altro colore di pagina lascerebbe una cucitura visibile fra la hero e la
   prima sezione di testo. È la stessa eccezione documentata in CLAUDE.md. */
body {
  background: #000;
  color: var(--color-text);
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Ritmo verticale ----------------------------------------------------- */

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(6rem, 16vh, 12rem) var(--space-4);
}

.section--center {
  max-width: 820px;
  text-align: center;
}

/* --- Tipografia ---------------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--space-4);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* La frase-manifesto: il testo più grande del sito dopo il logo. */
.statement {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  margin: var(--space-5) auto 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.lead--tight {
  margin-top: var(--space-3);
}

/* --- I tre pilastri ------------------------------------------------------ */

.pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 12vh, 9rem);
}

.pillar {
  max-width: 62ch;
}

.pillar__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.pillar__body {
  margin: var(--space-4) 0 0;
  max-width: 54ch;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text-muted);
}

/* --- Enquiries ----------------------------------------------------------- */

.enquiries__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Il solo elemento interattivo della pagina: si annuncia con la sottolineatura
   che si estende, non con un bottone pieno che romperebbe il registro. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-bottom: var(--space-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
}

.cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.cta:hover::after,
.cta:focus-visible::after {
  transform: scaleX(1);
}

.cta span {
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.cta:hover span {
  transform: translateX(4px);
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  padding: var(--space-5) var(--space-4) var(--space-4);
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5a5a63;
}

/* --- Comparsa al primo ingresso nel viewport -----------------------------
   Non è un'animazione da playground: è il comportamento di rivelazione di
   base del sito, deliberatamente ridotto a opacità più qualche pixel di
   traslazione. Lo stato iniziale lo applica il JS (classe `is-reveal-ready`
   sull'elemento <html>) e non il CSS, così senza JS il testo resta
   semplicemente visibile invece di sparire per sempre. */
.is-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

[data-reveal] {
  transition:
    opacity 900ms var(--ease-out-expo),
    transform 900ms var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-reveal] {
    transition: none;
  }
}

/* --- Sezione della sequenza di fotogrammi (hero) -------------------------
   Copiata da playground/05-scroll-frames/style.css. L'altezza è
   (corsa + 1) viewport: lo sticky ne occupa uno e resta fermo, i restanti
   --scroll-length viewport sono la corsa su cui si distribuiscono gli 85
   fotogrammi e poi lo zoom finale dentro la "I". */

.frame-seq {
  --scroll-length: 4;
  position: relative;
  height: calc((var(--scroll-length) + 1) * 100vh);
}

.frame-seq__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Il canvas copre tutto il viewport, non il solo riquadro del logo: nella fase
   di zoom il fotogramma ingrandito deve poter uscire dai bordi dello schermo,
   altrimenti verrebbe tagliato da un bordo netto a metà schermo. */
.frame-seq__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.frame-seq__hud {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 1;
  width: min(88vw, 420px);
  pointer-events: none;
}

.frame-seq__bar {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.frame-seq__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Cursore a goccia (globale) ------------------------------------------
   Copiato da playground/02-cursor-bubble/style.css. `position: fixed` lo
   ancora alla finestra e non alla pagina, così resta corretto scorrendo. */

.cursor-bubble {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
}

.cursor-bubble__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 55%,
    rgba(255, 255, 255, 0.55) 68%,
    transparent 80%
  );
  filter: blur(2px);
  animation: cursor-bubble-pulse 2.4s ease-in-out infinite alternate;
}

@keyframes cursor-bubble-pulse {
  from {
    opacity: 0.35;
    transform: scale(0.94);
  }
  to {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* `backdrop-filter: url(#cursor-bubble-lens)` è l'effetto lente: il filtro SVG
   con la mappa di spostamento (generata in JS) piega otticamente ciò che sta
   dietro alla goccia, come una vera lente convessa. Supportato in Chrome/Edge;
   su Safari il degrado non è garantito e resta il solo blur del fallback. */
.cursor-bubble__drop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(20, 20, 25, 0.35) 55%,
    rgba(0, 0, 0, 0.5) 100%
  );
  backdrop-filter: url(#cursor-bubble-lens) blur(0.5px) saturate(1.3) brightness(1.12);
  -webkit-backdrop-filter: blur(0.5px) saturate(1.3) brightness(1.12);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.2),
    inset 0 0 6px rgba(255, 255, 255, 0.05);
}

/* Riflesso: la posizione non è scelta a occhio ma calcolata dal JS con la
   riflessione speculare (Blinn-Phong) da una direzione di luce fissa. I valori
   qui sono solo il fallback se lo script non li imposta. */
.cursor-bubble__drop::after {
  content: "";
  position: absolute;
  top: var(--highlight-top, 19%);
  left: var(--highlight-left, 18%);
  width: 38%;
  height: 24%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  filter: blur(1px);
  transform: rotate(-25deg);
}

/* Il cursore a goccia esiste solo dove c'è un puntatore vero: su touch non
   verrebbe mai mosso e resterebbe una macchia ferma al centro dello schermo. */
@media (hover: none), (pointer: coarse) {
  .cursor-bubble {
    display: none;
  }
}