/* cenário vivo: .tp é a reação de um elemento do fundo ao toque (ver sceneTap). O !important vence a duração e o atraso que vêm no style de cada um */
@media (prefers-reduced-motion: no-preference) {
  .sun.tp {
    animation: vtp 0.5s ease-out 0s 1 !important;
  }
  .hl .imp.tp svg {
    animation: spn 0.5s linear 0s 2 !important;
  }
  .hl .hang.tp {
    animation: htp 1.6s ease-out 0s 1 !important;
  }
  .hl .crr.tp {
    animation: ctp 0.8s ease-out 0s 1 !important;
  }
  .hl .crr.tp .axe {
    animation: caxe 0.8s ease-in 0s 1 !important;
  }
  .hl .ghl.tp {
    animation: ghh 1.6s ease-in 0s 1 !important;
  }
  .hl .fig.tp,
  .hl .ey.tp {
    animation: figv 0.4s ease-out 0s 1 forwards !important;
  }
}
@keyframes vtp {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.28) rotate(-6deg);
  }
  70% {
    transform: scale(0.94) rotate(4deg);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes htp {
  0% {
    transform: rotate(-1.6deg);
  }
  15% {
    transform: rotate(11deg);
  }
  35% {
    transform: rotate(-8deg);
  }
  55% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(-1.6deg);
  }
}
@keyframes ctp {
  0% {
    transform: none;
  }
  25% {
    transform: translateX(-22px) rotate(-5deg) scale(1.1);
  }
  55% {
    transform: translateX(-26px) rotate(3deg) scale(1.1);
  }
  100% {
    transform: none;
  }
}
@keyframes caxe {
  0% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(28deg);
  }
  50%,
  70% {
    transform: rotate(-62deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes ghh {
  0% {
    transform: translateX(0);
  }
  12% {
    transform: translateX(8px) rotate(6deg);
  }
  100% {
    transform: translateX(-62px);
  }
}
@keyframes figv {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}
.a-fear {
  animation: shiver 0.11s linear infinite;
}