/* Stili aggiunti al CSS del sito originale (tnt.css, Tailwind già compilato):
   servono a sostituire le animazioni che prima faceva React/GSAP e ai pezzi
   nuovi (prezzi, anteprime che scorrono). Scritto a mano, si modifica qui. */

/* --- Comparsa allo scorrimento: oltre all'opacità (già in tnt.css), un piccolo
   movimento dal basso. --------------------------------------------------------- */
.js [data-reveal] {
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
}
.js [data-reveal].is-revealed { transform: none; }

/* --- Titolo della home: le righe salgono da sotto, il resto sfuma dopo --------- */
.eroe-riga > span { animation: eroe-su 1.15s var(--ease-out-expo) both; }
.eroe-riga:nth-child(2) > span { animation-delay: 0.12s; }
.eroe-riga:nth-child(3) > span { animation-delay: 0.24s; }
.eroe-sfuma { animation: eroe-sfuma 1s 0.55s var(--ease-out-expo) both; }
@keyframes eroe-su { from { transform: translateY(105%); } to { transform: none; } }
@keyframes eroe-sfuma { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes scroll-hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(220%); } }


/* --- Testata --------------------------------------------------------------------- */
[data-testata].nascosta { transform: translateY(-100%); }
html[data-scorso] [data-testata-fondo] {
  background: color-mix(in srgb, var(--color-ink) 84%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: rgb(255 255 255 / 0.06);
}

/* --- Menu mobile ----------------------------------------------------------------- */
.menu-mobile { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
html[data-menu-aperto] { overflow: hidden; }
/* la testata (logo e pulsante per chiudere) resta sopra il menu aperto */
html[data-menu-aperto] [data-testata] { z-index: 60; transform: none; }
html[data-menu-aperto] [data-testata-fondo] { background: transparent; backdrop-filter: none; border-color: transparent; }
html[data-menu-aperto] .menu-mobile { opacity: 1; pointer-events: auto; }
.menu-mobile a { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.5s ease, transform 0.5s var(--ease-out-expo); }
html[data-menu-aperto] .menu-mobile a { opacity: 1; transform: none; }
html[data-menu-aperto] .menu-mobile a:nth-child(2) { transition-delay: 0.04s; }
html[data-menu-aperto] .menu-mobile a:nth-child(3) { transition-delay: 0.08s; }
html[data-menu-aperto] .menu-mobile a:nth-child(4) { transition-delay: 0.12s; }
html[data-menu-aperto] .menu-mobile a:nth-child(5) { transition-delay: 0.16s; }
html[data-menu-aperto] .menu-mobile a:nth-child(6) { transition-delay: 0.2s; }
html[data-menu-aperto] .menu-mobile a:nth-child(7) { transition-delay: 0.24s; }
html[data-menu-aperto] [data-apri-menu] span:first-child { transform: translateY(3.5px) rotate(45deg); }
html[data-menu-aperto] [data-apri-menu] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* --- Domande frequenti: senza JavaScript restano tutte aperte --------------------- */
html:not(.js) .faq-item { grid-template-rows: min-content 1fr; }

/* --- Anteprima della demo che scorre dentro la finestra del browser ---------------- */
.scorre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-soot); }
.scorre img { display: block; width: 100%; height: auto; }
.scorre.pronto img { animation: scorri var(--durata, 20s) ease-in-out infinite alternate; will-change: transform; }
.scorre:hover img { animation-play-state: paused; }
@keyframes scorri { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(var(--corsa, 0)); } }

/* Righe ripetute nelle carte: classi non presenti nel Tailwind compilato. */
.text-xs { font-size: 0.75rem; line-height: 1.5; }
.prezzo-barrato { margin-left: 0.75rem; font-size: 1.5rem; font-weight: 700; opacity: 0.45; text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .eroe-riga > span, .eroe-sfuma, .scorre.pronto img { animation: none; }
  .js [data-reveal] { transform: none; transition: none; }
  .menu-mobile, .menu-mobile a { transition: none; }
}

/* --- Classi in stile Tailwind usate nelle pagine nuove ma assenti dal CSS compilato
   (Tailwind include solo le classi che il sito originale usava). Se ne serve
   un'altra, si aggiunge qui con la stessa scrittura. ------------------------------- */
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.border-ink\/10 { border-color: color-mix(in srgb, var(--color-ink) 10%, transparent); }
.divide-ink\/10 > :not(:last-child) { border-color: color-mix(in srgb, var(--color-ink) 10%, transparent); }
.gap-x-8 { column-gap: 2rem; }
.gap-x-10 { column-gap: 2.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-24 { row-gap: 6rem; }
.max-w-\[30ch\] { max-width: 30ch; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.pt-6 { padding-top: 1.5rem; }
.py-10 { padding-block: 2.5rem; }
.text-\[0\.98rem\] { font-size: 0.98rem; }
.text-ink\/80 { color: color-mix(in srgb, var(--color-ink) 80%, transparent); }

/* --- Animazioni GSAP (assets/js/animazioni.js): stati prima che partano ------------ */
.js:not(.anima-pronte) [data-split] { visibility: hidden; }
.js:not(.anima-avviate) [data-marchio] > *,
.js:not(.anima-avviate) [data-case-frame] { visibility: hidden; }

/* --- Classi delle pagine nuove di ottobre 2026 (home col marchio, richiesta demo).
   Controllo: node agenzia/classi-mancanti.mjs elenca quelle che mancano ancora. ----- */
.gap-12 { gap: 3rem; }
.gap-y-14 { row-gap: 3.5rem; }
.pb-20 { padding-bottom: 5rem; }
.py-8 { padding-block: 2rem; }
.pt-\[calc\(var\(--nav-h\)\+2\.5rem\)\] { padding-top: calc(var(--nav-h) + 2.5rem); }
.max-w-\[14ch\] { max-width: 14ch; }
.tracking-\[-0\.03em\] { letter-spacing: -0.03em; }
.text-\[clamp\(2\.6rem\,6\.4vw\,6\.6rem\)\] { font-size: clamp(2.6rem, 6.4vw, 6.6rem); }
.text-\[clamp\(2\.4rem\,5vw\,4\.6rem\)\] { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.titolo-bilanciato span { text-wrap: balance; }
.text-\[clamp\(2\.2rem\,5vw\,4\.4rem\)\] { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.text-\[clamp\(1\.4rem\,2\.6vw\,2\.2rem\)\] { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (min-width: 48rem) {
  .md\:py-32 { padding-block: 8rem; }
}
@media (min-width: 64rem) {
  .lg\:grid-cols-\[1\.1fr_1fr\] { grid-template-columns: 1.1fr 1fr; }
  .lg\:items-start { align-items: flex-start; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:pb-28 { padding-bottom: 7rem; }
}