/* SISTEMA DE MOVIMENTO: fonte única de animação do site.
   Tokens e os cinco padrões vivem aqui. Nada de keyframe ou duração em página
   (regra em CLAUDE.md). Sem JS ou com movimento reduzido, tudo fica visível no
   estado final: os estados ocultos só existem sob .js e no-preference. */
:root {
  --dur-fast: 150ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --stagger: 100ms;
  --reveal-distance: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  /* a) Reveal: [data-reveal] e filhos de [data-reveal-group], uma vez.
     --i: posição na sequência, em múltiplos de --stagger.
     --reveal-from e --reveal-opacity: estado inicial, se não for subir e surgir.
     --reveal-dur: duração, sempre um token.
     [data-reveal-group="scene"]: sequência de um desenho. Só os [data-reveal]
     de dentro entram, com o seu próprio --i. */
  .js [data-reveal]:not(.is-in),
  .js [data-reveal-group]:not([data-reveal-group="scene"]):not(.is-in) > * {
    opacity: var(--reveal-opacity, 0);
    transform: var(--reveal-from, translateY(var(--reveal-distance)));
  }
  .js .m-run {
    transition:
      opacity var(--reveal-dur, var(--dur-base)) var(--ease-out),
      transform var(--reveal-dur, var(--dur-base)) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }

  /* b) Entrada do hero: data-hero="1|2|3", no carregamento. */
  .js [data-hero] { animation: m-rise var(--dur-base) var(--ease-out) both; }
  .js [data-hero="2"] { animation-delay: var(--stagger); }
  .js [data-hero="3"] { animation-delay: calc(var(--stagger) * 2); }

  /* Elemento que sai de [hidden] depois de uma ação da pessoa. */
  .js [data-enter]:not([hidden]) { animation: m-rise var(--dur-base) var(--ease-out) both; }

  /* d) Desenho de diagrama: o traço entra pelo motion.js, uma vez. */
  .js [data-draw]:not(.is-in) { opacity: 0; }

  /* c) Hover: um conjunto de regras para o site inteiro. */
  a { transition: color var(--dur-fast) var(--ease-out); }
  :is(.btn, .btn-p, .btn-s, .btn-send, .btn-nl, .btn-nav, .btn-exit-main, .btn-exit-secondary, .sb-btn, .srv-cta, .link-arrow,
      .offer, .ia-card, .srv-card, .gap-card, .tool-card, .entreg-card, .check-item, .mock-front, .faq-item, a.more) {
    transition:
      transform var(--dur-fast) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) {
    :is(.btn, .btn-p, .btn-s, .btn-send, .btn-nl, .btn-nav, .btn-exit-main, .btn-exit-secondary, .sb-btn, .srv-cta):hover {
      transform: translateY(-1px);
    }
    :is(.offer, .ia-card, .srv-card, .gap-card, .tool-card, .entreg-card, .mock-front, a.more):hover {
      transform: translateY(-2px);
    }
  }
}

@keyframes m-rise {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}

/* Movimento reduzido: nada se mexe, conteúdo no estado final na hora. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  [data-reveal], [data-reveal-group] > *, [data-hero], [data-draw] { opacity: 1 !important; transform: none !important; animation: none !important; }
}