/*
  motion.css — movimento del sito.
  Tutto è lento, morbido, con curva ease-in-out (tokens.css → --ease-in-out).
  Con "Riduci movimento" attivo nel sistema, ogni animazione viene spenta (in fondo al file).
  Gli stati nascosti valgono solo quando JavaScript è attivo (classe .js su <html>):
  senza JavaScript il sito resta completamente visibile.
*/

html { scroll-behavior: auto; } /* lo scorrimento morbido lo gestisce motion.js */

/* ---------- 1. Hover ----------
   Il colore passa al giallo in modo graduale. */
a { transition: color var(--dur-hover) var(--ease-in-out); }

/* ---------- 2. Transizioni tra pagine ----------
   View Transitions tra documenti (Chrome, Edge, Safari 18.2+).
   La pagina vecchia svanisce, la nuova appare; l'intestazione resta ferma.
   I browser che non le supportano cambiano pagina normalmente. */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

::view-transition-group(site-header) { animation: none; }

::view-transition-old(root) {
  animation: page-out var(--dur-page-out) var(--ease-in-out) both;
}
::view-transition-new(root) {
  animation: page-in var(--dur-page-in) var(--ease-in-out) both;
}

@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

/* ---------- 3. Comparsa durante lo scorrimento ----------
   Gli elementi con .reveal salgono di poco e si accendono quando entrano nello schermo.
   motion.js aggiunge .is-visible e un piccolo ritardo a cascata (--reveal-delay). */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-in-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-in-out-soft) var(--reveal-delay, 0ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Sicurezza: se motion.js non parte, tutto torna visibile (classe aggiunta dallo script in <head>). */
.js.no-motion .reveal,
.js.no-motion img { opacity: 1; transform: none; }

/* ---------- 4. Foto che si posano ----------
   Ogni foto appare sul suo colore dominante e si posa con un leggerissimo zoom all'indietro. */
.js .gallery__item img,
.js .info__portrait img,
.js .video__link img {
  opacity: 0;
  transform: scale(var(--image-zoom));
  transition:
    opacity var(--dur-image) var(--ease-in-out),
    transform calc(var(--dur-image) * 1.4) var(--ease-in-out-soft);
}
.js .is-loaded > picture img,
.js .is-loaded > img,
.js .is-loaded img {
  opacity: 1;
  transform: none;
}

/* ---------- 5. Video ----------
   Al passaggio del mouse l'anteprima si avvicina appena e il triangolo diventa giallo.
   Al clic il video sfuma al posto dell'anteprima. */
.video__icon { transition: color var(--dur-hover) var(--ease-in-out), transform var(--dur-hover) var(--ease-in-out); }
@media (hover: hover) {
  .video__link:hover { color: var(--color-accent); }
  .js .video__link.is-loaded:hover img { transform: scale(1.02); }
}
.video__link { transition: opacity var(--dur-page-in) var(--ease-in-out); }
.video__frame {
  opacity: 0;
  transition: opacity var(--dur-page-in) var(--ease-in-out);
}
.video.is-playing .video__frame { opacity: 1; }
.video.is-playing .video__link { opacity: 0; pointer-events: none; }

/* ---------- 6. Prima apertura della Home ----------
   Solo alla prima visita della sessione: il logo si disegna, poi compare la frase. */
.intro .site-header__logo path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: logo-draw var(--dur-logo) var(--ease-in-out) 200ms forwards;
}
.intro .site-header__name,
.intro .site-nav {
  opacity: 0;
  animation: fade-in var(--dur-reveal) var(--ease-in-out) 900ms forwards;
}
.intro .home__phrase {
  opacity: 0;
  animation: rise-in var(--dur-reveal) var(--ease-in-out) 1300ms forwards;
}

@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, calc(var(--reveal-distance) / 2), 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- 7. Riduci movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal,
  .js .gallery__item img,
  .js .info__portrait img,
  .js .video__link img { opacity: 1; transform: none; }
}