/* Movimento do Vinci: mãos entram girando, anjo entra ao rolar, seta do botão empurra, blocos sobem ao aparecer. */
@keyframes maoEntra1 {
  0% { transform: translate(-5.36vw, 7.74vw) rotate(15deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes maoEntra2 {
  0% { transform: translate(5.95vw, 2.38vw) rotate(-15deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes maoEntra1Mobile {
  0% { transform: translate(-4.17vw, 6.25vw) rotate(12deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes maoEntra2Mobile {
  0% { transform: translate(8.33vw, -4.17vw); }
  100% { transform: translate(0, 0); }
}
@keyframes anjoEntra {
  0% { transform: translate(5.36vw, -1.96vw) rotate(12deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes setaVai {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0.36vw, 0); }
  100% { transform: translate(0, 0); }
}

.js .fade-up-in { opacity: 0; transform: translateY(30px); transition: opacity 1000ms ease-in, transform 1000ms ease-out; }
.js .fade-up-in.appear { opacity: 1; transform: translateY(0); }

/* demonstrações da galeria de movimento */
.ds-demo-mao { animation: maoEntra1 4.2s forwards; }
.ds-demo-mao-2 { animation: maoEntra2 2.2s forwards; }
.ds-demo-anjo { transform: translate(5.36vw, -1.96vw) rotate(12deg); }
.ds-demo-anjo.active { animation: anjoEntra 4.2s forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up-in, .js .fade-up-in { opacity: 1; transform: none; }
  .comparativo-anjo, .ds-demo-anjo { transform: none; }
}