/* Efeitos de movimento "de ponta" — arquivo separado de propósito.
   Estas regras usam recursos CSS novos (animações guiadas pela rolagem e transição entre páginas) que o validador oficial do W3C
   ainda não conhece e reprovaria como erro, embora Chrome, Edge e Safari recentes rodem normalmente. Fora do HTML, o validador
   não as lê; navegadores sem suporte simplesmente ignoram e o site fica sem o efeito, sem quebrar nada.
   Ao mudar este arquivo, versionar o nome (motion-v2.css) e atualizar o <link> em index.html. */

/* Profundidade com a rolagem (animações guiadas pelo scroll, sem JavaScript): só onde o navegador suporta */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about-photo-frame img,
    .where-photo-frame img {
      animation: photoDrift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    .animate-in .about-photo-frame img,
    .animate-in .where-photo-frame img { scale: 1.08; } /* folga para o deslocamento nunca mostrar a borda */
    .hero-photo-depth {
      animation: heroDepth linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes photoDrift {
  from { translate: 0 -3.5%; }
  to { translate: 0 3.5%; }
}
@keyframes heroDepth {
  to { translate: 0 52px; scale: 0.98; }
}

/* Troca de página (Início ⇄ Trabalhos) em fade suave, com o menu parado no lugar — navegadores sem suporte seguem como antes */
@view-transition { navigation: auto; }
.navbar { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}