/*
 * Movimento do site: entrada suave das seções e pequenos gestos que deixam a página viva.
 * A classe .mov só existe com JavaScript e sem "reduzir movimento" (assets/js/movimento.js),
 * então sem um dos dois a página aparece inteira, parada.
 */
.mov .revela {
  opacity: 0; translate: 0 var(--e-5);
  transition: opacity 700ms var(--curva) var(--atraso, 0ms), translate 700ms var(--curva) var(--atraso, 0ms);
}
.mov .revela.visivel { opacity: 1; translate: 0 0; }

/* O traço amarelo cresce junto com o título */
.mov .revela.secao-titulo::after, .mov .porta h2.revela::after, .mov .final h2.revela::after {
  scale: 0 1; transition: scale 700ms var(--curva) 250ms;
}
.mov .revela.visivel.secao-titulo::after, .mov .porta h2.revela.visivel::after, .mov .final h2.revela.visivel::after { scale: 1 1; }
.porta h2::after { transform-origin: 0 50%; }

/* As telas chegam de lado */
.mov .revela.tempo-tela, .mov .revela.porta-tela { translate: var(--e-7) 0; }
.mov .revela.visivel.tempo-tela, .mov .revela.visivel.porta-tela { translate: 0 0; }

/* A estrela do Vin cintila */
.mov .vin .selo--grande svg path { transform-box: fill-box; transform-origin: center; animation: mov-cintila 2400ms ease-in-out infinite alternate; }
.mov .vin .selo--grande svg path:nth-child(2) { animation-delay: -800ms; }
.mov .vin .selo--grande svg path:nth-child(3) { animation-delay: -1600ms; }
@keyframes mov-cintila { from { scale: 0.78; opacity: 0.7; } to { scale: 1.06; opacity: 1; } }

/* As formas de fundo flutuam devagar */
.mov .forma--anel { animation: mov-flutua 9s ease-in-out infinite alternate; }
.mov .forma--ponto { animation: mov-flutua 7s ease-in-out -3s infinite alternate; }
@keyframes mov-flutua { from { translate: 0 0; } to { translate: var(--e-4) calc(-1 * var(--e-5)); } }

/* O selo da chamada final respira */
.mov .final .selo { animation: mov-respira 2600ms ease-in-out infinite alternate; }
@keyframes mov-respira { from { translate: 0 0; } to { translate: 0 calc(-1 * var(--e-2)); } }

/* Os selos das seções dão um pequeno salto ao entrar */
.mov .revela .selo, .mov .revela.selo { scale: 0.6; transition: scale 600ms var(--curva) calc(var(--atraso, 0ms) + 200ms); }
.mov .revela.visivel .selo, .mov .revela.visivel.selo { scale: 1; }