/* Movimento da Autoescola Direção (parâmetros da seção 6 do briefing).
   Os estados finais são os estilos normais da página: sem animação, tudo já aparece no lugar.
   Só transform e opacity são animados. */

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(var(--subida, 18px));
  }
}

@keyframes foto-entrar {
  from {
    opacity: 0;
    transform: translate3d(var(--foto-x, 0), var(--foto-y, 16px), 0);
  }
}

@keyframes tracar {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ponto-entrar {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes ponto-pulso {
  from {
    opacity: 0.95;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Rolagem suave só nos cliques dentro da página. Ao chegar de outra página com #secao,
     o salto é imediato (scripts/site.js liga a classe depois do carregamento). */
  html.rolagem-suave {
    scroll-behavior: smooth;
  }

  /* Aberturas (página inicial e páginas de categoria): blocos e palavras do título em sequência
     (650 a 700 ms, intervalos de 70 a 80 ms). */
  [data-enter] {
    animation: subir 650ms var(--ease-saida) both;
    animation-delay: calc(var(--d, 0) * 1ms);
  }

  .hero__title .w {
    animation: subir 700ms var(--ease-saida) both;
    animation-delay: calc(70ms + var(--w, 0) * 75ms);
  }

  /* Fotografia: deslocamento curto, uma vez (850 ms). */
  .hero__media,
  .cat-top__media {
    animation: foto-entrar 850ms var(--ease-saida) 160ms both;
  }

  /* WhatsApp fixo: entra uma vez ao abrir a página (escala e opacidade, 360 ms); com mouse, sobe
     2 px; ao pressionar, afunda 1 px. Entre páginas ele fica parado no lugar. */
  @keyframes fab-entrar {
    from {
      opacity: 0;
      transform: scale(0.6);
    }
  }

  .whats-fab {
    animation: fab-entrar 360ms cubic-bezier(0.16, 1, 0.3, 1) 500ms backwards;
    view-transition-name: whats-fab;
  }

  .chegada-transicao .whats-fab {
    animation: none;
  }

  @media (hover: hover) {
    .whats-fab:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px -10px rgb(8 6 30 / 0.5), 0 2px 6px rgb(8 6 30 / 0.18);
    }
  }

  .whats-fab:active {
    transform: translateY(1px);
    transition-duration: 90ms;
  }

  /* Vindo do card de serviço, a foto do veículo já chega pela transição entre páginas. */
  .chegada-transicao .cat-top__media {
    animation: none;
  }

  /* Percurso: traçado desenhado uma vez (1.100 ms), trecho amarelo no fim. */
  .route__base,
  .route__accent {
    stroke-dasharray: 1;
  }

  .route__dot {
    transform-box: fill-box;
    transform-origin: center;
  }

  .hero .route__base {
    animation: tracar 1100ms var(--ease-suave) 600ms both;
  }

  .hero .route__accent {
    animation: tracar 420ms var(--ease-saida) 1300ms both;
  }

  .hero .route__dot {
    animation: ponto-entrar 320ms var(--ease-saida) 1650ms both;
  }

  @media (min-width: 60em) {
    .hero__media {
      --foto-x: 26px;
      --foto-y: 0;
    }
  }

  @media (max-width: 59.99em) {
    :root {
      --subida: 12px;
    }
  }

  /* Menu do celular: depois que o painel entra, os itens chegam da direita em sequência
     (480 ms, 45 ms entre eles). Ao fechar, saem junto com o painel. */
  @media (max-width: 74.99em) {
    .js .site-nav__list > li,
    .js .site-nav__cta {
      opacity: 0;
      transform: translate3d(1.25rem, 0, 0);
    }

    .js .site-nav__list > li {
      transition: opacity 360ms var(--ease-saida), transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .js .site-nav__cta {
      transition:
        opacity 360ms var(--ease-saida),
        transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color var(--dur-botao) var(--ease-saida),
        border-color var(--dur-botao) var(--ease-saida),
        color var(--dur-botao) var(--ease-saida);
    }

    .js .site-header.is-open .site-nav__list > li,
    .js .site-header.is-open .site-nav__cta {
      opacity: 1;
      transform: none;
    }

    .js .site-header.is-open .site-nav__list > li {
      transition-delay: calc(140ms + var(--i, 0) * 45ms);
    }

    .js .site-header.is-open .site-nav__cta {
      transition-delay: calc(140ms + var(--i, 0) * 45ms), calc(140ms + var(--i, 0) * 45ms), 0s, 0s, 0s;
    }
  }

  /* "Voltar para serviços": a seta anda 4 px para a esquerda. */
  .link-voltar:hover .icon,
  .link-voltar:focus-visible .icon {
    transform: translateX(-4px);
  }

  /* Revelação na rolagem: títulos de seção (520 ms) e cartões em sequência (500 ms, 70 ms). */
  .reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(var(--revelar-y, 24px));
    transition:
      opacity var(--revelar-dur, 520ms) var(--ease-saida),
      transform var(--revelar-dur, 520ms) var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .reveal-on .service-grid__item[data-reveal] {
    --revelar-dur: 500ms;
  }

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

  @media (max-width: 47.99em) {
    .reveal-on [data-reveal] {
      --revelar-y: 16px;
    }
  }

  /* Sobre: a foto assenta (escala 1,05 para 1) e o detalhe amarelo desliza para o lugar. */
  .reveal-on .about__visual[data-reveal] .about__frame img {
    transform: scale(1.05);
    transition: transform 900ms var(--ease-saida) 80ms;
  }

  .reveal-on .about__visual[data-reveal].in .about__frame img {
    transform: none;
  }

  .reveal-on .about__visual[data-reveal]::before {
    opacity: 0;
    transform: translate(-12px, 12px);
    transition: opacity 600ms var(--ease-saida) 200ms, transform 700ms var(--ease-saida) 200ms;
  }

  .reveal-on .about__visual[data-reveal].in::before {
    opacity: 1;
    transform: none;
  }

  /* Primeira habilitação: cards das etapas chegam do lado da estrada; no celular, de baixo. */
  .reveal-on .journey__step[data-reveal] {
    transform: translate3d(var(--revelar-x, 0), 18px, 0);
    transition: opacity 560ms var(--ease-saida), transform 560ms var(--ease-saida);
  }

  .reveal-on .journey__step[data-reveal].in {
    transform: none;
  }

  @media (min-width: 60em) {
    .reveal-on .journey__step:nth-child(odd)[data-reveal] {
      --revelar-x: -28px;
    }

    .reveal-on .journey__step:nth-child(even)[data-reveal] {
      --revelar-x: 28px;
    }
  }

  /* Ponto alcançado: anel amarelo que se expande uma vez. */
  .journey__cp.is-pulse .journey__cp-dot::after {
    animation: ponto-pulso 700ms var(--ease-saida);
  }

  /* Botão final: sobe 2 px ao passar o mouse ou receber foco; a seta anda 4 px. */
  .journey__end-btn:hover,
  .journey__end-btn:focus-visible {
    transform: translateY(-2px);
  }

  /* Etapas: a lista não some; as etapas surgem em sequência e as ligações se desenham (500 a 700 ms). */
  .reveal-on .steps[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .reveal-on .steps[data-reveal] .step {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms var(--ease-saida), transform 560ms var(--ease-saida);
    transition-delay: calc(var(--i, 0) * 90ms + 120ms);
  }

  .reveal-on .steps[data-reveal] .step:not(:last-child)::after {
    transform: scaleY(0);
    transition: transform 700ms var(--ease-suave);
    transition-delay: calc(var(--i, 0) * 90ms + 320ms);
  }

  .reveal-on .steps[data-reveal].in .step {
    opacity: 1;
    transform: none;
  }

  .reveal-on .steps[data-reveal].in .step:not(:last-child)::after {
    transform: none;
  }

  @media (min-width: 56em) {
    .reveal-on .steps[data-reveal] .step:not(:last-child)::after {
      transform: scaleX(0);
    }
  }

  /* Respostas a ponteiro e teclado: setas andam 4 px, cartão sobe 4 px, foto amplia até 1,03. */
  .link-seta:hover .icon--seta,
  .link-seta:focus-visible .icon--seta,
  .service-card__cta:focus-visible .icon--seta,
  .btn:hover .icon--seta,
  .btn:focus-visible .icon--seta {
    transform: translateX(4px);
  }

  .service-card:has(.service-card__cta:focus-visible) {
    transform: translateY(-4px);
  }

  .service-card:has(.service-card__cta:focus-visible) .service-card__media img {
    transform: scale(1.03);
  }

  /* Botões: com mouse, sobem 1 px; o verde aprofunda a sombra. A especificidade baixa deixa
     valer os botões que já têm um hover próprio. */
  @media (hover: hover) {
    :where(.btn):hover {
      transform: translateY(-1px);
    }

    :where(.btn--whats):hover {
      box-shadow: 0 14px 26px -14px rgb(10 47 28 / 0.65);
    }
  }

  /* Ao pressionar (toque, mouse ou teclado), o controle afunda 1 px em 90 ms e volta em 180 ms;
     o verde aperta a sombra. Sem encolher: assim nenhum clique perto da borda escapa. */
  .btn:active,
  .link-seta:active .icon--seta,
  .js .menu-toggle:active,
  .site-nav__fechar:active {
    transform: translateY(1px);
    transition-duration: 90ms;
  }

  :where(.btn--whats):active {
    box-shadow: 0 6px 12px -10px rgb(10 47 28 / 0.6);
  }

  /* Cartão de serviço: o link cobre o cartão inteiro, então quem reage ao toque é o cartão
     (assenta 1 px; com mouse, desce de 4 para 2 px). O próprio link não se move, para o clique
     não escapar. */
  .service-card:has(.service-card__cta:active) {
    transform: translateY(1px);
    transition-duration: 90ms;
  }

  @media (hover: hover) {
    .service-card:hover:has(.service-card__cta:active) {
      transform: translateY(-2px);
    }
  }

  /* Cartão de serviço: a sombra acompanha a subida (mais distância, sombra mais larga). */
  .service-card:has(.service-card__cta:focus-visible) {
    box-shadow: 0 2px 4px rgb(var(--azul-900-rgb) / 0.06), 0 22px 40px -24px rgb(var(--azul-900-rgb) / 0.42);
  }

  /* Faixa final: o texto chega primeiro e o botão logo depois, uma vez. */
  .reveal-on .final-cta [data-reveal] .final-cta__btn {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 420ms var(--ease-saida) 160ms,
      transform 420ms var(--ease-saida) 160ms,
      background-color var(--dur-botao) var(--ease-saida),
      box-shadow var(--dur-botao) var(--ease-saida);
  }

  .reveal-on .final-cta [data-reveal].in .final-cta__btn {
    opacity: 1;
    transform: none;
  }

  /* Da página inicial para a de categoria (e de volta), a página troca com um esmaecer curto, e
     a foto do veículo no card se transforma na foto do topo da página. Recurso do navegador: onde
     não houver suporte, a navegação continua normal. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 260ms;
  }

  .cat-top__media {
    view-transition-name: veiculo;
  }

  ::view-transition-group(veiculo) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  ::view-transition-old(veiculo),
  ::view-transition-new(veiculo) {
    height: 100%;
    object-fit: contain;
  }

  @media (hover: hover) {
    .service-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(var(--azul-900-rgb) / 0.06), 0 22px 40px -24px rgb(var(--azul-900-rgb) / 0.42);
    }

    .service-card:hover .service-card__media img {
      transform: scale(1.03);
    }

    .service-card:hover .icon--seta {
      transform: translateX(4px);
    }
  }
}

/* Movimento reduzido: nenhuma animação nem deslocamento. Ficam só mudanças curtas de cor,
   opacidade e sombra (120 ms), que confirmam a ação sem mover nada. A seção Primeira
   habilitação mantém o comportamento estático que já tinha. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity, box-shadow, text-decoration-color, outline-color !important;
    transition-duration: 120ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .journey,
  .journey *,
  .journey *::before,
  .journey *::after {
    transition-duration: 0.01ms !important;
  }
}