/* SynERE — sistema di movimento (prototipo 3/9/2026)
   Tre gesti, usati in pochi punti scelti: (1) entrata sfasata dei blocchi,
   (2) le foto si scoprono con una maschera e un lieve zoom, (3) parallasse
   lieve sulle foto grandi. Tutto disattivato con prefers-reduced-motion. */

/* Stato di riposo: tutto visibile. Lo stato "nascosto" esiste solo se il JS
   è attivo (html.js) e solo finché l'elemento non entra nello schermo. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* La foto si scopre dal basso; dentro, l'immagine rientra da 1.08 a 1. */
.wipe { position: relative; overflow: hidden; }
.wipe > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.js .wipe[data-reveal] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
html.js .wipe[data-reveal] > img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 110ms); }
html.js .wipe[data-reveal].is-in { clip-path: inset(0 0 0 0); }
html.js .wipe[data-reveal].is-in > img { transform: scale(1); }

/* Parallasse lieve: il JS scrive --py in px sulle foto marcate data-parallax. */
[data-parallax] > img { will-change: transform; transform: translateY(var(--py, 0)) scale(1.12); }

/* Zoom al passaggio del mouse sulle foto degli articoli. */
.hover-zoom > img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hover-zoom:hover > img, a:focus-visible .hover-zoom > img { transform: scale(1.04); }

/* Viratura blu per le foto (versione 3, 3/9: "troppo grigie" -> blu più chiaro).
   Foto desaturata ma non spenta, Blu SynERE al 60% in modalità colore, un velo navy leggero. */
.blu { position: relative; background: #15213F; }
.blu > img { filter: grayscale(.9) contrast(1.05) brightness(.9); }
.blu::before { content: ""; position: absolute; inset: 0; background: #1266BA; mix-blend-mode: color; opacity: .6; pointer-events: none; }
.blu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,33,63,.3) 0%, rgba(21,33,63,.15) 50%, rgba(21,33,63,.4) 100%); mix-blend-mode: multiply; pointer-events: none; }
.blu.scuro::after { background: linear-gradient(180deg, rgba(21,33,63,.25) 0%, rgba(21,33,63,.3) 45%, rgba(21,33,63,.95) 100%); mix-blend-mode: normal; }
/* Hero: la ricetta del mockup (colore pieno, gradiente verticale), come chiesto da Adri. */
.blu.hero-v1 > img { filter: grayscale(1) contrast(1.05) brightness(.8); }
.blu.hero-v1::before { opacity: 1; }
.blu.hero-v1::after { background: linear-gradient(180deg, rgba(21,33,63,.92) 0%, rgba(21,33,63,.5) 40%, rgba(21,33,63,.5) 65%, #15213F 100%); mix-blend-mode: normal; }
/* Le immagini di rete sono già blu: nessuna viratura. */
.blu.nat > img { filter: none; }
.blu.nat::before, .blu.nat::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .wipe[data-reveal], html.js .wipe[data-reveal] > img { opacity: 1; transform: none; clip-path: none; transition: none; }
  [data-parallax] > img { transform: none; }
  .hover-zoom > img { transition: none; }
}