/* =========================================================
   MOTION
   .anim         → animazioni leggere (dissolvenze, piccoli spostamenti):
                   sempre attive quando c'è JavaScript.
   .motion-full  → movimenti ampi (parallax, nastro che scorre, tendina
                   sulle foto, timeline progressiva): solo se il dispositivo
                   non chiede di ridurre il movimento.
   ========================================================= */

/* ---------- Entrata hero al caricamento ---------- */
.anim .hero-in { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(80ms + var(--d, 0) * 80ms); }
.anim .hero__title .line > .hero-in { opacity: 0; transform: translateY(40%); transition-duration: 900ms; }
.anim .is-loaded .hero-in,
.anim .is-loaded .hero__title .line > .hero-in { opacity: 1; transform: none; }

.anim .hero-wipe { opacity: 0; transition: opacity 1000ms ease 200ms; }
.anim .hero-wipe img { transform: scale(1.05); transition: transform 1600ms var(--ease-out) 200ms; }
.anim .is-loaded .hero-wipe { opacity: 1; }
.anim .is-loaded .hero-wipe img { transform: none; }
.anim .hero__figure::before { opacity: 0; transform: translate(-12px, -12px); transition: transform 1000ms var(--ease-out) 600ms, opacity 800ms ease 600ms; }
.anim .is-loaded .hero__figure::before { opacity: 0.9; transform: none; }

/* ---------- Reveal allo scroll ---------- */
.anim [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), box-shadow 300ms var(--ease), border-color 300ms, translate 300ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.anim [data-reveal="left"] { transform: translateX(-12px); }
.anim [data-reveal="right"] { transform: translateX(12px); }
.anim [data-reveal="scale"] { transform: translateY(12px) scale(0.98); }
.anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Foto: dissolvenza con leggero zoom-out */
.anim [data-reveal="image"] { transform: none; transition: opacity 900ms ease, clip-path 1200ms var(--ease-out); }
.anim [data-reveal="image"] img { transform: scale(1.05); transition: transform 1400ms var(--ease-out); }
.anim [data-reveal="image"].is-in img { transform: none; }
.anim .framed:has([data-reveal="image"])::before { opacity: 0; transform: translate(-10px, -10px); transition: transform 900ms var(--ease-out) 300ms, opacity 700ms ease 300ms; }
.anim .framed:has([data-reveal="image"].is-in)::before { opacity: 0.9; transform: none; }

/* Movimento ampio: tendina dal basso sulle foto */
.motion-full [data-reveal="image"] { opacity: 1; clip-path: inset(100% 0 0 0); }
.motion-full [data-reveal="image"].is-in { clip-path: inset(0 0 0 0); }

/* ---------- Altri ingressi leggeri ---------- */
.anim .wa-float { animation: wa-in 600ms var(--ease-out) 1.2s both; }
@keyframes wa-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.anim .drawer.is-open .drawer__list li { animation: drawer-item 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); }
@keyframes drawer-item { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.motion-full [data-parallax] { will-change: transform; }