/* COMAROTO · effetti «Respiro» (scelta di Mike, 9/11/2026). Attivi solo con html.fx (vedi effetti.js). */
:root { --fx-ease: cubic-bezier(.2, .7, .2, 1); --fx-t: 1s; }

/* Le comparse del vecchio AOS lasciano il posto a queste */
.fx [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Dissolvenza tra pagine */
.fx body { transition: opacity .6s var(--fx-ease); }
.fx.fx-entering body { opacity: 0; }
.fx.fx-leaving body { opacity: 0; transition-duration: .35s; }

/* Hero: l'immagine si assesta */
.fx .hero-bg { animation: fx-hero 2.6s var(--fx-ease) both; }
.fx .frame-type-mask_imageparallax { overflow: hidden; }
@keyframes fx-hero { from { transform: scale(1.07); } to { transform: scale(1); } }

/* Lettera per lettera da sinistra (Gli Asolani) */
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx .fx-lp { display: inline-block; white-space: nowrap; }
.fx .fx-letters .fx-l { display: inline-block; opacity: 0; transform: translateX(-.3em); filter: blur(8px); }
.fx .fx-letters.fx-in .fx-l { animation: fx-lettera .95s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes fx-lettera { to { opacity: 1; transform: none; filter: blur(0); } }

/* Comparsa dei blocchi (il blocco con il titolo a lettere non sfuma: lavorano le lettere) */
.fx .fx-wait:not(.fx-letters) > * { opacity: 0; transform: translateY(22px); filter: blur(4px);
  transition: opacity var(--fx-t) var(--fx-ease), transform var(--fx-t) var(--fx-ease), filter var(--fx-t) var(--fx-ease); }
.fx .fx-wait:not(.fx-letters) > *:nth-child(2) { transition-delay: .12s; }
.fx .fx-wait:not(.fx-letters) > *:nth-child(3) { transition-delay: .24s; }
.fx .fx-in:not(.fx-letters) > * { opacity: 1; transform: none; filter: none; }
.fx .fx-wait > *:has(.fx-letters) { opacity: 1 !important; transform: none !important; filter: none !important; }

/* Foto di sfondo a tutta larghezza (data-bgset): fondo scuro finché la foto non c'è, poi la foto si scopre.
   L'ombra interna sta sopra lo sfondo ma sotto il testo, così il titolo bianco si legge subito. */
[data-bgset] { background-color: #373737; }  /* anche per chi chiede meno animazioni */
.fx [data-bgset] { transition: box-shadow 1.1s var(--fx-ease); }
.fx [data-bgset].lazyload, .fx [data-bgset].lazyloading { box-shadow: inset 0 0 0 200vmax #373737; }
.fx [data-bgset].lazyloaded { box-shadow: inset 0 0 0 200vmax rgb(55 55 55 / 0); }

/* Foto sfalsate (foto e testo affiancati, alternati a destra e sinistra): la foto entra leggermente dal basso,
   con un movimento lungo e fluido; il testo arriva subito dopo. Richiesta di Mike, 9/11/2026. */
.fx .frame-type-mask_imagetext.fx-wait > div { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.fx .frame-type-mask_imagetext.fx-wait > div > img {
  opacity: 0; translate: 0 48px;
  transition: opacity 1.1s cubic-bezier(.25,.46,.45,.94), translate 1.6s cubic-bezier(.25,.46,.45,.94); }
.fx .frame-type-mask_imagetext.fx-wait > div > div {
  opacity: 0; translate: 0 18px;
  transition: opacity 1s var(--fx-ease) .25s, translate 1.2s var(--fx-ease) .25s; }
.fx .frame-type-mask_imagetext.fx-in > div > img,
.fx .frame-type-mask_imagetext.fx-in > div > div { opacity: 1; translate: 0 0; }
@media (max-width: 767px) { .fx .frame-type-mask_imagetext.fx-wait > div > img { translate: 0 36px; } .fx .frame-type-mask_imagetext.fx-in > div > img { translate: 0 0; } }

/* Didascalia dei punteggi della critica sotto il grafico dei 4 voti (scelta A di Mike, 9/11/2026).
   Testo vero: lo leggono Google, le AI e i lettori di schermo. Non dipende dagli effetti. */
.punteggi { position: relative; z-index: 2; margin: 1.4em auto 0; max-width: 1100px; padding: 0 16px; text-align: center;
  color: #4b4544; font-family: "Alegreya Sans", sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: .02em; }
.punteggi b { font-weight: 500; color: #373737; }
.punteggi .voce { white-space: nowrap; }
.punteggi .sep { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #9f0f0b; vertical-align: middle; margin: 0 .7em 2px; }
.punteggi .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .punteggi .voce { display: block; } .punteggi .sep { display: none; } }