/* Sequenza guidata dallo scroll, innestata nel sito. Niente contatori, etichette o barre: la
   sezione è la pagina stessa che si muove, sulla stessa carta, chiara o scura secondo il tema.
   Usa le variabili di style.css (--carta, --ink, --muted-2, --testata, --wrap, --su-giallo).
   La meccanica sta in js/scroll-sequenza.js. Bozze del 04/09/2026. */
section.sequenza {
  position: relative; max-width: none; padding: 0; margin: 0 0 48px;
  background: var(--carta);
}
.sequenza__fisso { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.sequenza canvas { display: block; width: 100%; height: 100%; background-size: cover; background-position: center top; }

/* Velo: la carta che sale dal basso, così il testo sta sulla carta e non sull'immagine. */
.sequenza__velo {
  position: absolute; inset: auto 0 0 0; height: 58%; pointer-events: none;
  background: linear-gradient(to top, var(--carta) 0%, color-mix(in srgb, var(--carta) 84%, transparent) 42%, transparent 100%);
}

.didascalia {
  position: absolute; bottom: clamp(3.5rem, 10vh, 7rem);
  left: max(20px, calc((100% - var(--wrap)) / 2 + 20px)); right: 20px;
  max-width: 36rem; pointer-events: none;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.didascalia.is-active { opacity: 1; transform: none; }
.didascalia.is-active .btn-row { pointer-events: auto; }
.didascalia .tag { margin-bottom: 0.7rem; }
.didascalia h1, .didascalia h2 {
  font-family: var(--testata); font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
/* Il sito numera i titoli delle sezioni (h2::before): nelle didascalie il numerino non ha senso. */
.didascalia h1::before, .didascalia h2::before { content: none !important; display: none !important; }
.didascalia .evid { color: var(--su-giallo); }
.didascalia p { margin: 0.9rem 0 0; font-size: 1.1rem; line-height: 1.5; color: var(--muted-2); max-width: 30rem; }
.didascalia .btn-row { margin: 1.3rem 0 0; }

/* Sul PC la didascalia sta a sinistra e la scena a destra: il velo copre solo la parte sinistra,
   con un bordo morbido, così il telefono a destra resta nitido fino in fondo. */
@media (min-width: 769px) {
  .sequenza__velo {
    right: 36%; height: 56%;
    background: linear-gradient(to top, var(--carta) 0%, var(--carta) 30%, color-mix(in srgb, var(--carta) 80%, transparent) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent);
  }
}

@media (max-width: 768px) {
  .didascalia { bottom: 6.5rem; right: 16px; }
  .didascalia h1, .didascalia h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .didascalia p { font-size: 1rem; }
  /* La bolla "Chiedi pure" del bot sta in basso a destra: il paragrafo le lascia lo spazio. */
  .didascalia > p:not(.tag):not(.btn-row) { padding-right: 118px; }
  .sequenza__velo { height: 50%; }
}
/* Telefoni bassi (iPhone SE e simili): la didascalia si fa compatta e il velo sale. */
@media (max-width: 768px) and (max-height: 720px) {
  .didascalia { bottom: 5.6rem; }
  .didascalia .tag { display: none; }
  .didascalia h1, .didascalia h2 { font-size: clamp(1.5rem, 6.8vw, 2rem); }
  .didascalia p { font-size: 0.95rem; margin-top: 0.5rem; }
  .didascalia .btn-row { margin-top: 0.8rem; }
  .sequenza__velo { height: 64%; background: linear-gradient(to top, var(--carta) 0%, color-mix(in srgb, var(--carta) 90%, transparent) 50%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .didascalia { transform: none; transition: opacity 0.3s ease; }
}