/* text-states.css — v2 (rebuild "film editoriale interattivo")
 * Palette e font presi dal sito reale crashverse.it (non inventati):
 * nero #030407, accento ciano #29C7F6, Archivo 900 per i titoli, Inter
 * per il corpo. Il testo resta HTML reale (accessibile, indicizzabile);
 * qui solo il suo trattamento tipografico — lo spazio 3D vero vive nel
 * canvas WebGL dietro (vedi scene3d.js), non e' simulato con CSS.
 */

:root {
  --cv-bg: #030407;
  --cv-ink: #F4F6FB;
  --cv-ink-dim: #AEB5C2;
  --cv-cyan: #29C7F6;
  --cv-cyan-deep: #0B4A6F;
  --cv-amber: #FF9142;
  --cv-amber-deep: #6B3410;
}

.exp-chapter {
  position: relative;
  min-height: 92vh;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--cv-ink);
}

/* Stesso pattern "pin and reveal" della v1: il blocco resta agganciato in
 * cima allo schermo mentre il capitolo (piu' alto, per il ritmo di
 * lettura) scorre sotto di lui. */
.exp-chapter__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9vh 0 11vh;
}

.exp-chapter__title {
  position: relative;
  width: 100%;
  max-width: clamp(480px, 46vw, 820px);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15em;
  will-change: transform, opacity, filter;
}

/* Riga "kicker": leggera, neutra — come "MAGARI È" sull'home reale. */
.exp-chapter__kicker {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 0.4vw + 15px, 22px);
  letter-spacing: 0.01em;
  color: var(--cv-ink-dim);
  line-height: 1.3;
}

/* Riga principale: pesante, Archivo 900 — come "CURIOSITÀ." sull'home
 * reale, colorata con l'accento della mood corrente invece che bianca. */
.exp-chapter__headline {
  font-family: 'Archivo', 'Inter', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(30px, 1.6vw + 26px, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cv-cyan);
}

.exp-chapter__body {
  position: relative;
  width: 100%;
  max-width: clamp(440px, 36vw, 680px);
  margin: 0 auto;
  padding: 28px 24px 0;
  font-size: clamp(17px, 0.65vw + 14px, 22px);
  line-height: 1.7;
  color: var(--cv-ink-dim);
}

.exp-chapter__body p { margin: 0 0 1.1em; }
.exp-chapter__body p.emphasis {
  font-family: 'Archivo', 'Inter', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--cv-ink);
  font-size: 1.25em;
  letter-spacing: 0.005em;
}

/* Cover reale dell'articolo, mostrata solo nel capitolo di apertura —
 * sostituisce la vecchia card "APERTURA" muta con l'immagine vera del
 * pezzo, trattata come una copertina editoriale (bordo netto, ombra
 * profonda), non un hero da landing page. */
.exp-chapter__cover {
  display: block;
  width: min(56vw, 280px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
  margin: 0 0 30px;
  box-shadow: 0 40px 90px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(244,246,251,0.07);
  will-change: transform, opacity, filter;
}
@media (max-width: 560px) {
  .exp-chapter__cover { width: min(64vw, 220px); margin-bottom: 22px; }
}
.reduced-motion .exp-chapter__cover,
.no-webgl .exp-chapter__cover {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.exp-char { transition: none; }

.exp-cursor {
  display: inline-block;
  color: var(--cv-cyan);
  animation: exp-blink 1s steps(1) infinite;
}
@keyframes exp-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .exp-cursor { display: none !important; }
}

/* Reduced motion / niente WebGL: nessun blur, nessuna trasformazione,
 * il testo appare gia' composto e leggibile su un fondo statico. */
.reduced-motion .exp-chapter__title,
.no-webgl .exp-chapter__title {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Coda dell'esperienza: prima era buio vuoto dopo il verdetto finale.
 * Ora ospita, in silenzio, la firma editoriale e il rimando all'articolo
 * — appare solo alla fine dello scroll, non un footer da sito qualsiasi. */
#exp-tail-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
}
#exp-outro {
  width: 100%;
  max-width: 620px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  pointer-events: none;
}
#exp-outro.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.exp-outro__rule {
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cv-cyan), transparent);
  opacity: 0.6;
}
.exp-outro__kicker {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cv-ink-dim);
  margin: 0;
}
.exp-outro__article-link {
  font-family: 'Archivo', 'Inter', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(19px, 1vw + 15px, 26px);
  letter-spacing: -0.005em;
  color: var(--cv-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(41,199,246,0.35);
  padding-bottom: 6px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.exp-outro__article-link:hover,
.exp-outro__article-link:focus-visible {
  color: var(--cv-cyan);
  border-color: var(--cv-cyan);
}
.exp-outro__article-link span { display: inline-block; margin-left: 6px; }
.exp-outro__signature {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--cv-ink-dim);
  margin: 0;
}
.exp-outro__signature a {
  color: var(--cv-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,246,251,0.3);
}
.exp-outro__signature a:hover,
.exp-outro__signature a:focus-visible { color: var(--cv-cyan); border-color: var(--cv-cyan); }

@media (prefers-reduced-motion: reduce) {
  #exp-outro { transition: opacity 0.4s ease; }
}