/* Animações a partir de 1024px. Regras e códigos (B1…V5): CLAUDE.md, "Animação".
   Estados escondidos só com html.anima (posto por assets/js/animacoes.js). */

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

  /* Busca · B3 (hover sobe 4px, funciona sem JS) */
  .busca-passo {
    transition: translate var(--dur-rapida) var(--ease-saida);
  }

  /* B1 · Destaque no hover: camada clara (::before da lista) que desliza
     com transform até o card sob o cursor. Pintura na lista: vidro
     (::before dos cards) → camada → texto. O card ativo não mostra o vidro. */
  .anima .busca-passos {
    isolation: isolate;
  }

  .anima .busca-passo {
    position: relative;
    background-color: transparent;
    box-shadow: none;
    transition:
      transform var(--dur-entrada) var(--ease-mola) var(--atraso, 0s),
      opacity var(--dur-entrada) var(--ease-saida) var(--atraso, 0s),
      translate var(--dur-rapida) var(--ease-saida);
  }

  .anima .busca-passo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--superficie-vidro);
    box-shadow: inset 0 0 0 1px var(--linha);
    transition: opacity var(--dur-media) var(--ease-saida);
  }

  .anima .busca-passo-ativo::before {
    opacity: 0;
  }

  /* Cor do card que ganha e do que perde o destaque: mesma duração e curva
     do deslize da camada, começando juntos. Só no hover (nunca na rolagem):
     cor animada repinta a cada quadro. Ao aparecer e sumir (destaque-fade),
     acompanha o fade da camada. */
  .anima .busca-passo-numero {
    transition:
      color var(--dur-media) var(--ease-saida),
      background-color var(--dur-media) var(--ease-saida),
      translate var(--dur-rapida) var(--ease-saida);
  }

  .anima .busca-passo-texto {
    transition: translate var(--dur-rapida) var(--ease-saida);
  }

  .anima .busca-passo-titulo,
  .anima .busca-passo-descricao {
    transition: color var(--dur-media) var(--ease-saida);
  }

  .anima .busca-passos.destaque-fade .busca-passo-numero {
    transition:
      color var(--dur-rapida) ease,
      background-color var(--dur-rapida) ease,
      translate var(--dur-rapida) var(--ease-saida);
  }

  .anima .busca-passos.destaque-fade .busca-passo-titulo,
  .anima .busca-passos.destaque-fade .busca-passo-descricao {
    transition: color var(--dur-rapida) ease;
  }

  .anima .busca-passos.destaque-fade .busca-passo::before {
    transition: opacity var(--dur-rapida) ease;
  }

  .anima .busca-passo.busca-passo-ativo .busca-passo-numero {
    background-color: var(--cta-tinta);
    color: var(--cta-texto);
  }

  .anima .busca-passo.busca-passo-ativo .busca-passo-titulo {
    color: var(--cta-texto);
  }

  .anima .busca-passo.busca-passo-ativo .busca-passo-descricao {
    color: color-mix(in srgb, var(--cta-texto) 72%, transparent);
  }

  /* Camada: tamanho do card 03; deslocamento e escala pelo JS. Escondida
     até o hover (com-destaque); destaque-parado: aparece já no card, sem
     deslizar de onde estava */
  .anima .busca-passos::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--destaque-a, 0px);
    border-radius: var(--raio-32);
    background-color: var(--cta-fundo);
    opacity: 0;
    transform: translateY(var(--destaque-y, 0px)) scaleY(var(--destaque-s, 1));
    transform-origin: 50% 0;
    transition:
      transform var(--dur-media) var(--ease-saida),
      opacity var(--dur-rapida) ease,
      translate var(--dur-rapida) var(--ease-saida);
  }

  .anima .busca-passos.com-destaque::before {
    opacity: 1;
  }

  .anima .busca-passos.destaque-parado::before {
    transition: none;
  }

  /* Pulo de dois cards: camada e cores trocam no mesmo quadro */
  .anima .busca-passos.destaque-direto::before,
  .anima .busca-passos.destaque-direto .busca-passo::before,
  .anima .busca-passos.destaque-direto .busca-passo-numero,
  .anima .busca-passos.destaque-direto .busca-passo-titulo,
  .anima .busca-passos.destaque-direto .busca-passo-descricao {
    transition: none;
  }

  /* B2 */
  .anima .busca-passo:nth-child(2) { --atraso: var(--atraso-sequencia); }
  .anima .busca-passo:nth-child(3) { --atraso: calc(var(--atraso-sequencia) * 2); }

  .anima .busca-passos:not(.entrou) .busca-passo {
    opacity: 0;
    transform: translateX(48px);
  }

  /* Com a mola, os passos passam da borda direita da tela ao ir para o estado
     escondido; clip recorta sem criar contêiner de rolagem (mesmo padrão dos projetos) */
  .anima .secao-busca {
    overflow-x: clip;
  }

  @media (hover: hover) and (pointer: fine) {
    .busca-passo:hover {
      translate: 0 -4px;
    }

    /* Com a camada, o hover é o card ativo (posto pelo JS só com movimento
       real do mouse, nunca pela rolagem). O card não sobe inteiro: com
       translate ele ganharia contexto de empilhamento e o vidro dele
       pintaria por cima da camada. Sobem o conteúdo e a camada. */
    .anima .busca-passo:hover {
      translate: none;
    }

    .anima .busca-passo-ativo > * {
      translate: 0 -4px;
    }

    .anima .busca-passos.com-destaque::before {
      translate: 0 -4px;
    }
  }

  /* O que vem em todo site: hover sobe 4px, como o B3 (funciona sem JS) */
  .incluso-item {
    transition: translate var(--dur-rapida) var(--ease-saida);
  }

  @media (hover: hover) and (pointer: fine) {
    .incluso-item:hover {
      translate: 0 -4px;
    }
  }

  /* Virada: pronta desde o início; V3 roda enquanto a seção está na tela */
  .anima .virada-card {
    animation: virada-flutua 5s infinite;
    transition: transform var(--dur-rapida) var(--ease-saida);
  }

  .anima .virada-card-confiavel { animation-duration: 6s; }
  .anima .virada-card-seu { animation-duration: 7s; }

  @keyframes virada-flutua {
    0% { translate: 0 0; animation-timing-function: ease-out; }
    25% { translate: 0 -6px; animation-timing-function: ease-in-out; }
    75% { translate: 0 6px; animation-timing-function: ease-in; }
    100% { translate: 0 0; }
  }

  /* V4 · 3D só durante o hover */
  @media (hover: hover) and (pointer: fine) {
    .anima .virada-card:hover {
      transform: perspective(900px) translate(0, -4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.85);
    }
  }

  /* V5 · Deslocamento sempre dentro da sobra da escala */
  .anima .virada-marmore {
    animation: virada-deriva 20s ease-in-out infinite;
  }

  @keyframes virada-deriva {
    0%, 100% { transform: none; }
    25% { transform: translate(-1.5%, 1%) scale(1.06); }
    50% { transform: translate(1.5%, -1%) scale(1.08); }
    75% { transform: translate(-1%, -1.5%) scale(1.05); }
  }

  /* Loops parados fora da tela */
  .anima [data-anima-loop]:not(.em-tela) .virada-marmore,
  .anima [data-anima-loop]:not(.em-tela) .virada-card {
    animation-play-state: paused;
  }
}