/* Família Reveno: movimento (opcional). Prefixo rvm-.
   Depende de tokens.css. Nenhum site muda sozinho: só vale para quem importa
   este arquivo e usa as classes. Não redefine nenhum token existente; usa
   --rv-motion-fast (hover e foco) e --rv-motion-reveal (entrada de bloco) de
   tokens.css e acrescenta os tokens da seção 2.3 de FRONTS_REFERENCIA.md.

   Contrato (TECH-050)
   - O padrão é sem movimento. Toda animation e transition daqui mora dentro
     de @media (prefers-reduced-motion: no-preference). O bloco reduce no fim
     zera os tokens mesmo assim, como rede de segurança.
   - Anima só opacidade e transform, deslocamento de no máximo 8 px, uma vez.
     Uma curva de saída para entrada (--rv-ease-out) e uma curva padrão para
     mudança de estado (--rv-ease-standard).
   - Movimento acompanha uma mudança de estado ou a chegada de um conteúdo e
     nunca carrega significado sozinho: sem ele, a página diz o mesmo.
   - Revelação ao rolar é CSS puro (animation-timeline: view()). Sem esse
     suporte o conteúdo aparece direto; motion.mjs é um reforço opcional. */

:root {
  --rv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --rv-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --rv-motion-distance: 8px;
  --rv-motion-stagger: 40ms;
  --rv-focus-width: 2px;
  --rv-focus-offset: 3px;
  --rv-focus-color: var(--rv-color-brand);
}
[data-rv-theme="light"], [data-theme="light"], .rv-theme-light, .rvf-section--paper, [data-rv-surface="light"] {
  --rv-focus-color: var(--rv-color-brand-dark);
}

/* Direção da entrada: data-rvm-from="up" (padrão), "down", "left", "right" ou "none". */
.rvm-enter, .rvm-stagger > *, .rvm-reveal { --rvm-x: 0px; --rvm-y: var(--rv-motion-distance); }
.rvm-enter[data-rvm-from="down"] { --rvm-y: calc(var(--rv-motion-distance) * -1); }
.rvm-enter[data-rvm-from="left"] { --rvm-x: calc(var(--rv-motion-distance) * -1); --rvm-y: 0px; }
.rvm-enter[data-rvm-from="right"] { --rvm-x: var(--rv-motion-distance); --rvm-y: 0px; }
.rvm-enter[data-rvm-from="none"], .rvm-fade { --rvm-x: 0px; --rvm-y: 0px; }

/* Sublinhado de link: só a cor muda, a posição não. */
.rvm-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.rvm-link:hover { text-decoration-color: currentColor; }

/* Anel de foco único: mesma espessura, distância e cor em qualquer superfície.
   Fica fora do bloco de movimento: foco nunca depende de preferência. */
.rvm-focus:focus-visible, .rvm-interactive:focus-visible {
  outline: var(--rv-focus-width) solid var(--rv-focus-color);
  outline-offset: var(--rv-focus-offset);
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Entrada ao carregar ---------- */
  .rvm-enter, .rvm-fade, .rvm-stagger > * { animation: rvm-enter var(--rv-motion-reveal) var(--rv-ease-out) both; }
  .rvm-delay-1 { animation-delay: calc(var(--rv-motion-stagger) * 1); }
  .rvm-delay-2 { animation-delay: calc(var(--rv-motion-stagger) * 2); }
  .rvm-delay-3 { animation-delay: calc(var(--rv-motion-stagger) * 3); }
  .rvm-delay-4 { animation-delay: calc(var(--rv-motion-stagger) * 4); }
  /* Escalonamento dos filhos diretos com teto de 6: do sexto em diante entram juntos. */
  .rvm-stagger > :nth-child(2) { animation-delay: calc(var(--rv-motion-stagger) * 1); }
  .rvm-stagger > :nth-child(3) { animation-delay: calc(var(--rv-motion-stagger) * 2); }
  .rvm-stagger > :nth-child(4) { animation-delay: calc(var(--rv-motion-stagger) * 3); }
  .rvm-stagger > :nth-child(5) { animation-delay: calc(var(--rv-motion-stagger) * 4); }
  .rvm-stagger > :nth-child(n + 6) { animation-delay: calc(var(--rv-motion-stagger) * 5); }

  /* ---------- Revelação ao rolar ----------
     Com linha do tempo de visão: CSS puro, ligado ao scroll. Sem ela, nada
     fica escondido; motion.mjs (opcional) acrescenta .rvm-in quando o
     elemento se aproxima da tela e a entrada roda uma vez. */
  @supports (animation-timeline: view()) {
    .rvm-reveal { animation: rvm-enter linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  .rvm-reveal.rvm-in { animation: rvm-enter var(--rv-motion-reveal) var(--rv-ease-out) both; }

  /* ---------- Hover e foco ---------- */
  .rvm-interactive {
    transition:
      color var(--rv-motion-fast) var(--rv-ease-standard),
      background-color var(--rv-motion-fast) var(--rv-ease-standard),
      border-color var(--rv-motion-fast) var(--rv-ease-standard),
      text-decoration-color var(--rv-motion-fast) var(--rv-ease-standard),
      box-shadow var(--rv-motion-fast) var(--rv-ease-standard),
      opacity var(--rv-motion-fast) var(--rv-ease-standard),
      transform var(--rv-motion-fast) var(--rv-ease-standard),
      outline-offset var(--rv-motion-fast) var(--rv-ease-standard);
  }
  .rvm-link { transition: text-decoration-color var(--rv-motion-fast) var(--rv-ease-standard); }
  @media (hover: hover) {
    .rvm-lift:hover { transform: translateY(-2px); }
  }
  .rvm-lift:active { transform: none; }
}

@keyframes rvm-enter {
  from { opacity: 0; transform: translate3d(var(--rvm-x), var(--rvm-y), 0); }
  to { opacity: 1; transform: none; }
}

/* Impressão e captura: tudo no estado final. */
@media print {
  .rvm-enter, .rvm-fade, .rvm-stagger > *, .rvm-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Movimento reduzido: rede de segurança, zera tudo ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rv-motion-distance: 0px;
    --rv-motion-stagger: 0ms;
  }
  .rvm-enter, .rvm-fade, .rvm-stagger > *, .rvm-reveal, .rvm-reveal.rvm-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .rvm-interactive, .rvm-link, .rvm-lift { transition: none !important; }
  .rvm-lift:hover { transform: none; }
}