/* Movimento: effetti comuni a tutti i siti. Si attivano con data-m="..." nelle pagine.
   Colori e tempi si adattano al sito con le variabili --m-*, sovrascritte in css/sito.css. */
:root {
  --m-accento: var(--k-accento, #E6C223);
  --m-entrata: 900ms;
  --m-curva: cubic-bezier(0.22, 1, 0.36, 1);
  --m-passo: 90ms;
}

/* passaggio morbido tra le pagine */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; }

/* apertura che respira: visibile dal primo istante, si muove piano */
[data-m~="respiro"] { overflow: hidden; }
[data-m~="respiro"] img { animation: m-respiro 24s ease-in-out infinite alternate; transform-origin: 55% 60%; }
@keyframes m-respiro { to { transform: scale(1.1) translate(-1%, -1%); } }

/* comparse allo scorrimento: nascoste solo se lo script è partito e solo sotto la prima schermata */
.m-js [data-m~="su"]:not(.m-in) { opacity: 0; transform: translateY(2.2rem); }
.m-js [data-m~="tenda"]:not(.m-in) { clip-path: inset(0 0 100% 0); }
[data-m~="su"] { transition: opacity var(--m-entrata) ease, transform var(--m-entrata) var(--m-curva); transition-delay: calc(var(--m-i, 0) * var(--m-passo)); }
[data-m~="tenda"] { transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--m-i, 0) * var(--m-passo)); }

/* profondità */
[data-m~="parallasse"] { overflow: hidden; }
[data-m~="parallasse"] > img { height: 120%; margin-top: -10%; will-change: transform; }

/* parola sottolineata con il colore del marchio quando arriva sullo schermo */
[data-m~="evidenzia"] { background: linear-gradient(var(--m-accento), var(--m-accento)) 0 90% / 0 0.32em no-repeat; padding-inline: 0.06em; transition: background-size 1.1s var(--m-curva) 200ms; }
[data-m~="evidenzia"].m-in, html:not(.m-js) [data-m~="evidenzia"] { background-size: 100% 0.32em; }

/* risposte al tocco */
[data-m~="tocco"] { transition: transform 220ms var(--m-curva), box-shadow 220ms ease; }
[data-m~="tocco"] img { transition: transform 900ms var(--m-curva); }
@media (hover: hover) and (pointer: fine) {
  [data-m~="tocco"]:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / 0.18); }
  [data-m~="tocco"]:hover img { transform: scale(1.05); }
}
[data-m~="tocco"]:active { transform: scale(0.98); }

/* chi ha chiesto meno movimento vede tutto fermo e al suo posto */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  [data-m] , [data-m] img { animation: none !important; transition: none !important; }
  .m-js [data-m]:not(.m-in) { opacity: 1; transform: none; clip-path: none; }
  [data-m~="evidenzia"] { background-size: 100% 0.32em; }
}