/* ==================================================================
   Animações (usadas por js/animacoes.js e js/main.js)
   Quem pede "reduzir movimento" no sistema vê só trocas suaves.
   ================================================================== */

/* abertura: a fotografia nova revela-se da direita para a esquerda e assenta com um pequeno zoom */
.revela { animation: revela 1.25s cubic-bezier(0.77, 0, 0.18, 1) both; }
@keyframes revela { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.assenta { animation: assenta 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes assenta { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.aparece { animation: aparece .5s ease both; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* faixa de razões: dois grupos iguais, desloca metade (a duração é calculada pelo JS) */
.faixa__pista { animation: faixa 50s linear infinite; }
.faixa:hover .faixa__pista { animation-play-state: paused; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* pista "arraste": seta que oscila */
.oscila { animation: oscila 2.4s ease-in-out infinite; }
@keyframes oscila { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* menu do telemóvel */
.menu-movel__painel { animation: desce .28s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes desce { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
.menu-movel__fundo { animation: aparece .28s ease both; }

/* marcações: passo concluído e mensagem a atualizar */
.salta { animation: salta .35s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes salta { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { animation: aparece .5s ease both; }
  .assenta, .oscila, .salta { animation: none; }
  .cartao, .cartao__foto, .cartao__camada, .cartao__revela { transition: none !important; }
  .cartao:hover { transform: none; }
}