/* Stati per le animazioni leggere. Attivo solo con html[data-anim="on"]. */

/* Hero: clip per far salire i caratteri (animati da GSAP) */
html[data-anim="on"] .hero-title .line { overflow: hidden; }

/* About quote: parole spente finché lo scroll non le "legge" */
html[data-anim="on"] .about-quote .word { color: #cfc9bd; transition: color 0.3s ease; }
html[data-anim="on"] .about-quote .word.lit { color: var(--gray-dark); }
html[data-anim="on"] .about-quote em .word.lit { color: var(--blue-mid); }

/* How-we-work: le animazioni a fasi partono solo quando la sezione è in vista,
   così l'utente vede il build-up dalla fase 1 */
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph1,
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph2,
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph3,
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph4,
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph5,
html[data-anim="on"] .how-we-work:not(.in) .anim-stage .ph6 { animation-play-state: paused; }

/* Floating preview tavola — un solo nodo riusato da servizi e portfolio */
.float-preview {
  position: fixed; top: 0; left: 0; z-index: 95;
  width: 250px; padding: 8px 8px 0;
  background: var(--white); border-radius: 6px;
  border: 1px solid var(--gray-line);
  box-shadow: 0 26px 55px -18px rgba(2,76,120,0.4);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.float-preview.on { opacity: 1; visibility: visible; }
.float-preview img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.float-preview .fp-tag {
  display: block; padding: 7px 4px;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 10px; color: var(--gray-mid); letter-spacing: 0.5px;
}
.float-preview .fp-tag:empty { display: none; }

/* Page-hero: linea di quota che si disegna sotto il titolo */
html[data-anim="on"] .page-hero-title::after {
  content: ''; display: block; width: 120px; height: 2px;
  background: var(--blue-mid); margin-top: 28px;
  transform-origin: left;
  animation: rule-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  html[data-anim="on"] .page-hero-title::after { animation: none; }
}

/* Silhouettes parco mezzi / chi-siamo: wipe reveal via transizione CSS.
   La classe .sil-reveal è aggiunta da anim.js SOLO se gira (no reduced-motion,
   GSAP presente) → senza JS le immagini restano piene e visibili.
   clip-path animato da GSAP non interpola in modo affidabile l'inset(): si usa
   la transizione CSS, che i browser interpolano correttamente. */
html[data-anim="on"] .sil-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
html[data-anim="on"] .sil-reveal.sil-in { clip-path: inset(0 0 0 0); }