/*
  motion.css: todo o movimento da página (M1 a M12, ver PLANO.md seção 4.4).

  Regras:
  - Só transform e opacity. Nada que mude o tamanho ou a posição no layout.
  - Tudo dentro de prefers-reduced-motion: no-preference. Com "reduzir movimento" o arquivo inteiro
    deixa de valer e o conteúdo aparece na hora.
  - Elementos só ficam escondidos se o <html> tem a classe .js (posta no <head> só quando o navegador
    tem IntersectionObserver, e tirada se o motion.js não rodar). Sem JS, tudo visível.
  - Os "guiados pela rolagem" usam animation-timeline (CSS). Sem suporte, caem no gatilho .is-in do motion.js
    ou ficam parados. Em animation-timeline, o atalho "animation" vem antes (ele zera o timeline).
  - Valores (tempos, distâncias, curvas) vêm do tokens.css.
  - Se um efeito pesar no celular, é só apagar o bloco dele aqui.
*/

@media (prefers-reduced-motion: no-preference) {

  html {
    scroll-behavior: smooth;
  }

  /* M1: entrada do topo (CSS puro, não depende do JS) */
  .display .line {
    animation: line-in var(--motion-duration-line) var(--motion-ease-out-strong) both;
  }

  .display .line:nth-child(2) {
    animation-delay: calc(var(--motion-stagger) * 1.5);
  }

  .opening__copy > .eyebrow,
  .opening__copy > .lead,
  .opening__copy > .opening__actions,
  .opening__copy > .trust-line,
  .opening__copy > .placeholder {
    animation: fade-up var(--motion-duration-reveal) var(--motion-ease-out) both;
  }

  .opening__copy > .lead {
    animation-delay: calc(var(--motion-stagger) * 3);
  }

  .opening__copy > .opening__actions {
    animation-delay: calc(var(--motion-stagger) * 4);
  }

  .opening__copy > .trust-line {
    animation-delay: calc(var(--motion-stagger) * 5);
  }

  .opening__copy > .placeholder {
    animation-delay: calc(var(--motion-stagger) * 6);
  }

  @keyframes line-in {
    from {
      opacity: 0;
      transform: translateY(var(--motion-distance-line));
    }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(var(--motion-distance-reveal));
    }
  }

  /* M2: entrada de blocos ao rolar */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
    transition:
      opacity var(--motion-duration-reveal) var(--motion-ease-block),
      transform var(--motion-duration-reveal) var(--motion-ease-block);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* M3: itens e cartões em sequência. O motion.js observa cada filho e dá o índice --i (0 a 7)
     o atraso (transition-delay, em linha) aos que entram na tela juntos, então numa lista alta cada item
     anima quando chega à vista. O atraso vai direto no elemento, e não numa variável herdada, para o
     navegador não recalcular o estilo dos filhos de cada item. */
  .js [data-stagger] > * {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
    transition:
      opacity var(--motion-duration-reveal) var(--motion-ease-out),
      transform var(--motion-duration-reveal) var(--motion-ease-out);
  }

  .js [data-stagger] > .is-in {
    opacity: 1;
    transform: none;
  }

  /* M4: linhas finas que se desenham */
  .js [data-draw] {
    transform: scaleX(0);
    transition: transform var(--motion-duration-draw) var(--motion-ease-out-strong);
  }

  .js [data-draw].is-in {
    transform: none;
  }

  /* M5: trilho dos passos que se preenche com a rolagem */
  @supports (animation-timeline: view()) {
    .steps::after {
      animation: rail-fill linear both;
      animation-timeline: view();
      animation-range: cover 10% cover 55%;
    }
  }

  @supports not (animation-timeline: view()) {
    .js .steps::after {
      transform: scaleY(0);
      transition: transform calc(var(--motion-duration-draw) * 1.6) var(--motion-ease-out-strong) var(--motion-stagger);
    }

    .js .steps.is-in::after {
      transform: none;
    }
  }

  @keyframes rail-fill {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  /* M6: faixa escura que sobe e cresce ao entrar */
  @supports (animation-timeline: view()) {
    .panel[data-takeover] {
      animation: takeover linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }

  @supports not (animation-timeline: view()) {
    .js .panel[data-takeover] {
      opacity: var(--motion-takeover-opacity-from);
      transform: scale(var(--motion-takeover-scale-from));
      transition:
        opacity calc(var(--motion-duration-draw) * 0.8) var(--motion-ease-out),
        transform calc(var(--motion-duration-draw) * 0.8) var(--motion-ease-out);
    }

    .js .panel[data-takeover].is-in {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes takeover {
    from {
      opacity: var(--motion-takeover-opacity-from);
      transform: scale(var(--motion-takeover-scale-from));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* M7: deslocamento leve do quadro do topo com a rolagem (quando entrarem as fotos, a mesma regra serve para elas) */
  @supports (animation-timeline: view()) {
    .board {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }

  @keyframes drift {
    from {
      transform: translateY(var(--motion-drift-distance));
    }

    to {
      transform: translateY(calc(var(--motion-drift-distance) * -1));
    }
  }

  /* M8: barra fina de leitura no topo */
  @supports (animation-timeline: scroll()) {
    .progress {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 40;
      display: block;
      height: var(--size-progress-height);
      background: var(--color-progress);
      transform: scaleX(0);
      transform-origin: left center;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }

  @keyframes progress {
    to {
      transform: scaleX(1);
    }
  }

  /* M9: quadro "tudo num lugar só" (começa quando entra na tela) */
  [data-board] .board__row:nth-child(1) { --i: 0; }
  [data-board] .board__row:nth-child(2) { --i: 1; }
  [data-board] .board__row:nth-child(3) { --i: 2; }
  [data-board] .board__row:nth-child(4) { --i: 3; }
  [data-board] .board__row:nth-child(5) { --i: 4; }
  [data-board] .board__row:nth-child(6) { --i: 5; }

  .js [data-board] .board__title,
  .js [data-board] .board__row,
  .js [data-board] .board__footer {
    opacity: 0;
  }

  .js [data-board] .board__dot::after {
    opacity: 0;
  }

  .js [data-board].is-in .board__title {
    animation: board-fade var(--motion-duration-reveal) var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-stagger) * 3);
  }

  .js [data-board].is-in .board__row {
    animation: board-row var(--motion-duration-line) var(--motion-ease-out-strong) both;
    animation-delay: calc(var(--motion-board-rows-start) + var(--i) * var(--motion-board-row-step));
  }

  .js [data-board] .board__row:nth-child(odd) {
    --board-from: calc(var(--motion-board-offset) * -1);
  }

  .js [data-board] .board__row:nth-child(even) {
    --board-from: var(--motion-board-offset);
  }

  .js [data-board].is-in .board__dot::after {
    animation: dot-on var(--motion-duration-medium) var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-board-dots-start) + var(--i) * var(--motion-board-dot-step));
  }

  .js [data-board].is-in .board__footer {
    animation: board-fade var(--motion-duration-reveal) var(--motion-ease-out) both;
    animation-delay: calc(var(--motion-board-footer-at));
  }

  /* O "to" é explícito de propósito: o estado escondido acima tem opacity 0 e o "to" implícito o herdaria */
  @keyframes board-fade {
    from {
      opacity: 0;
      transform: translateY(var(--motion-distance-reveal));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes board-row {
    from {
      opacity: 0;
      transform: translateX(var(--board-from));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes dot-on {
    from {
      opacity: 0;
      transform: scale(var(--motion-dot-scale-from));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  /* M10: barra fixa do celular sobe e some */
  .sticky-cta {
    transition:
      transform var(--motion-duration-medium) var(--motion-ease-out),
      visibility 0s linear var(--motion-duration-medium);
  }

  .sticky-cta[data-visible="true"] {
    transition:
      transform var(--motion-duration-medium) var(--motion-ease-out),
      visibility 0s;
  }

  /* M11: botão (a seta anda no hover; afunda um pouco ao tocar) */
  .btn,
  .btn__icon {
    transition: transform var(--motion-duration-fast) var(--motion-ease-out);
  }

  .btn:active {
    transform: scale(var(--motion-press-scale));
  }

  @media (hover: hover) {
    .btn:hover .btn__icon {
      transform: translateX(var(--motion-icon-shift));
    }
  }

  /* M12: perguntas (a seta gira; a resposta aparece com fade) */
  .faq summary::after {
    transition: transform var(--motion-duration-medium) var(--motion-ease-out);
  }

  .faq details[open] > .faq__answer {
    animation: faq-in var(--motion-duration-medium) var(--motion-ease-out) both;
  }

  @keyframes faq-in {
    from {
      opacity: 0;
      transform: translateY(calc(var(--motion-distance-reveal) * -0.5));
    }
  }
}