/* =========================================================================
   Movimento: parallax allo scorrimento e transizioni tra le pagine.
   Caricato dopo ana.css. Tutto e' un'aggiunta: togliendo questo file e
   motion.js il prototipo torna identico a prima.
   Chi ha chiesto al sistema di ridurre le animazioni non vede nulla di tutto
   questo: il parallax si attiva solo con la classe .has-motion (la mette
   motion.js) e le transizioni stanno dentro prefers-reduced-motion.
   ========================================================================= */

/* ------------------------------------------------------------ 1. PARALLAX
   Si muovono solo `translate` e `scale`, che il browser compone senza
   ridisegnare la pagina. I valori --s e --p li aggiorna motion.js. */

/* Hero: la foto scende piu' lenta della pagina, il testo si allontana e sfuma */
.has-motion .hero-slides,
.has-motion .project-hero-media > img {
  translate: 0 calc(var(--s, 0) * .34px);
  will-change: translate;
}
.has-motion .hero-content {
  translate: 0 calc(var(--s, 0) * .16px);
  opacity: var(--o, 1);
}
.has-motion .project-hero-inner { translate: 0 calc(var(--s, 0) * .1px); }

/* Immagini nel corpo della pagina: la foto e' un po' piu' grande della sua
   cornice e ci scorre dentro di qualche punto percentuale. */
.px-frame { display: block; overflow: hidden; }
.has-motion .px img,
.has-motion .px:hover img {
  transform: none;
  scale: 1.2;
  translate: 0 calc(var(--p, 0) * -9%);
  transition: scale 1.8s var(--ease);
  will-change: translate;
}
/* lo zoom al passaggio del mouse resta, sommato al parallax */
.has-motion .work-cover.px:hover img,
.has-motion .gallery-item.px:hover img { scale: 1.23; }

/* ------------------------------------------------------------ 2. CAMBIO PAGINA
   View Transitions tra documenti. I nomi agli elementi li da' transitions.js
   (06/10/2026), solo quando servono:
   - normale: la pagina che esce sfuma, quella che entra sale al suo posto;
   - dalla card al progetto: la foto (la stessa nelle due pagine) si allarga
     fino all'hero, poi entrano titolo e dati del progetto;
   - indietro/avanti del browser (.vt-back): solo una dissolvenza breve.
   Il menu resta fermo. Dove il browser non le supporta, la navigazione e'
   quella normale con una semplice dissolvenza del contenuto. */
/* L'attivazione (@view-transition) sta in linea nell'head di ogni pagina:
   in un foglio esterno il browser puo' non averla ancora letta quando decide. */
@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }

  ::view-transition-old(root) {
    animation: page-out .35s cubic-bezier(.4, 0, .6, 1) both;
  }
  ::view-transition-new(root) {
    animation: page-in .7s cubic-bezier(.22, .61, .36, 1) .1s both;
  }

  /* Indietro: niente movimento, le due pagine si scambiano in dissolvenza */
  html.vt-back::view-transition-old(root) { animation: page-fade-out .28s ease both; }
  html.vt-back::view-transition-new(root) { animation: page-fade .38s ease .06s both; }

  /* La foto: si muove un unico riquadro, ritagliato come un'immagine con
     object-fit: cover, cosi' passando da quadrata a panoramica non si deforma.
     Sotto c'e' sempre la foto della card (gia' caricata); quella dell'hero,
     con la sua sfumatura scura, la copre appena il riquadro parte, quando
     e' ancora piccolo: il cambio d'inquadratura non si nota. Se l'hero non
     fosse ancora pronto, resta comunque una foto vera. */
  ::view-transition-group(work-media) {
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.7, 0, .2, 1);
    overflow: clip;
  }
  ::view-transition-image-pair(work-media) { isolation: auto; }
  ::view-transition-old(work-media),
  ::view-transition-new(work-media) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
  }
  ::view-transition-old(work-media) { animation: none; opacity: 1; }
  ::view-transition-new(work-media) { animation: page-fade .3s ease .08s both; }

  /* Titolo e dati entrano quando la foto e' quasi ferma */
  ::view-transition-group(work-text) { animation: none; }
  ::view-transition-new(work-text) { animation: hero-text-in .6s cubic-bezier(.22, .61, .36, 1) .5s both; }
  ::view-transition-old(work-text) { display: none; }

  @supports not (view-transition-name: none) {
    main { animation: page-fade .8s cubic-bezier(.22, .61, .36, 1) both; }
  }
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-14px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(20px); }
}
@keyframes page-fade {
  from { opacity: 0; }
}
@keyframes page-fade-out {
  to { opacity: 0; }
}
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(18px); }
}