/*
 * Animação de entrada (etapa D6) -- o `animation_wrapper_app` no site 2.
 *
 * O contrato são os atributos `data-aos*` que o plugin já escreve, os mesmos que o AOS do
 * site 1 lê. Quem os anima aqui é `theme_education/js/animacao.js`, sem AOS e sem `unpkg`.
 *
 * **O estado inicial depende da classe que o JS põe**, e não do atributo sozinho. É a regra
 * que separa este arquivo do CSS do AOS (`[data-aos] { opacity: 0 }`): sem JavaScript, nada
 * some. Ver o comentário do `animacao.js`.
 *
 * O deslocamento é 60px, que é o do estático (`translateX(±60px)`, `translateY(60px)`) -- e
 * não os 48px que o template do site 1 injeta, que são dele.
 */

/*
 * Os fallbacks do `var()` não são o default do model escrito de novo: o JavaScript sempre
 * escreve as duas propriedades, e quando ele não roda nada é escondido -- então este ramo é
 * inerte, e existe para a declaração continuar válida.
 */
[data-aos] {
  transition:
    opacity var(--aos-duracao, 800ms) var(--aos-easing, ease-in-out) var(--aos-atraso, 0ms),
    transform var(--aos-duracao, 800ms) var(--aos-easing, ease-in-out) var(--aos-atraso, 0ms);
}

/*
 * `transition: none` **aqui dentro** é o que faz esconder ser instantâneo e revelar ser
 * animado: a transição que vale numa mudança é a do estado de chegada. Sem isto, um
 * elemento que o JavaScript esconde depois do primeiro quadro -- documento longo, `defer`
 * demorando -- sumiria fadeando na frente de quem está lendo.
 */
.aos-escondido {
  opacity: 0;
  transition: none;
}

/*
 * O vocabulário é o do AOS, porque o atributo é dele: `fade-left` **entra pela direita** e
 * caminha para a esquerda. É o inverso do nome das classes do estático -- lá, `animate-left`
 * parte da esquerda. A tabela de equivalência está na D6; o rótulo de cada opção no admin
 * também a traz, para o editor não precisar dela.
 */
[data-aos="fade-up"].aos-escondido {
  transform: translate3d(0, 60px, 0);
}

[data-aos="fade-down"].aos-escondido {
  transform: translate3d(0, -60px, 0);
}

[data-aos="fade-left"].aos-escondido {
  transform: translate3d(60px, 0, 0);
}

[data-aos="fade-right"].aos-escondido {
  transform: translate3d(-60px, 0, 0);
}

/*
 * `easing` é `choices` -- conjunto fechado --, então cabe em seletor de atributo e não
 * precisa passar pelo JavaScript. Duração e atraso são inteiros livres e vêm de lá, em
 * custom property.
 *
 * `ease-out-cubic` não é palavra-chave de CSS; a curva é a que o AOS usa com esse nome, para
 * o site 2 não animar diferente do site 1 com a mesma opção escolhida.
 */
[data-aos-easing="ease"] {
  --aos-easing: ease;
}

[data-aos-easing="ease-in"] {
  --aos-easing: ease-in;
}

[data-aos-easing="ease-out"] {
  --aos-easing: ease-out;
}

[data-aos-easing="ease-in-out"] {
  --aos-easing: ease-in-out;
}

[data-aos-easing="ease-out-cubic"] {
  --aos-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
 * Guarda dupla com a do `animacao.js`, e não redundante: o JS decide uma vez, na carga, e
 * quem liga "reduzir movimento" depois disso teria ficado com o que já estava escondido.
 */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transition: none;
  }

  .aos-escondido {
    opacity: 1;
    transform: none;
  }
}