/* ==========================================================================
   ANIMATIONS.CSS
   Reveal on scroll, transições e microinterações.
   ========================================================================== */

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   ELEMENTO DE DESTAQUE (escolhido): motion design elaborado no HERO.

   Por quê: o hero é a primeira dobra e concentra o CTA mais importante da
   página ("Pedir no WhatsApp"). Ele já está visível no carregamento (não
   depende de scroll), então usar um cursor customizado ou uma navegação
   experimental não agregaria no mobile (a prioridade do projeto) — e
   scroll storytelling exigiria uma seção de conteúdo (linha do tempo,
   processo) que não existe no briefing. Um motion design mais elaborado
   só aqui dá um "momento de entrada" premium sem repetir esse tratamento
   em nenhuma outra seção, evitando excesso.

   Implementação 100% CSS (@keyframes + animation-fill-mode), sem
   depender de JavaScript: funciona mesmo se o JS falhar ou for
   bloqueado, e é automaticamente neutralizada pelo bloco de
   prefers-reduced-motion no fim deste arquivo.
   ========================================================================== */

/* Painel de vidro (.hero-content) aparece primeiro, rápido e sem delay,
   para o título/subtítulo/botões já entrarem "dentro" dele em seguida,
   em vez de o cartão surgir depois do texto. */
.hero-content {
  animation: hero-panel-in 0.5s ease both;
}

@keyframes hero-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-line {
  display: block;
  overflow: hidden;
}

.hero-line > span {
  display: block;
  animation: hero-line-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-line:nth-child(1) > span { animation-delay: 0.05s; }
.hero-line:nth-child(2) > span { animation-delay: 0.18s; }

@keyframes hero-line-in {
  from { transform: translateY(112%); }
  to { transform: translateY(0); }
}

.hero-subtitle {
  animation: hero-fade-up 0.6s ease both;
  animation-delay: 0.32s;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botões: só o wrapper .hero-cta anima (ver nota em style.css) */
.hero-cta {
  animation: hero-cta-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-cta:nth-child(1) { animation-delay: 0.42s; }
.hero-cta:nth-child(2) { animation-delay: 0.5s; }

@keyframes hero-cta-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Foto do hero: entrada com leve overshoot + var(--parallax-y), atualizada
   via JS (animations.js) somente depois que esta animação termina. */
.hero-media {
  --parallax-y: 0px;
  animation: hero-media-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.22s;
}

@keyframes hero-media-in {
  from { opacity: 0; transform: scale(0.94) translateY(calc(18px + var(--parallax-y, 0px))); }
  to { opacity: 1; transform: scale(1) translateY(var(--parallax-y, 0px)); }
}

/* Stagger leve para cards de combo */
.combo-card.reveal:nth-child(1) { transition-delay: 0.04s; }
.combo-card.reveal:nth-child(2) { transition-delay: 0.14s; }
.combo-card.reveal:nth-child(3) { transition-delay: 0.24s; }

/* Stagger leve para itens de lista (hambúrgueres / bebidas) */
.menu-item.reveal:nth-child(1) { transition-delay: 0.02s; }
.menu-item.reveal:nth-child(2) { transition-delay: 0.06s; }
.menu-item.reveal:nth-child(3) { transition-delay: 0.1s; }
.menu-item.reveal:nth-child(4) { transition-delay: 0.14s; }
.menu-item.reveal:nth-child(5) { transition-delay: 0.18s; }
.menu-item.reveal:nth-child(6) { transition-delay: 0.22s; }
.menu-item.reveal:nth-child(7) { transition-delay: 0.26s; }
.menu-item.reveal:nth-child(8) { transition-delay: 0.3s; }
.menu-item.reveal:nth-child(9) { transition-delay: 0.34s; }

/* Stagger leve para batatas: foto entra primeiro, depois os itens da
   lista um a um. */
.batatas-image-wrap.reveal { transition-delay: 0.02s; }
.batatas-list li.reveal:nth-child(1) { transition-delay: 0.1s; }
.batatas-list li.reveal:nth-child(2) { transition-delay: 0.16s; }
.batatas-list li.reveal:nth-child(3) { transition-delay: 0.22s; }
.batatas-list li.reveal:nth-child(4) { transition-delay: 0.28s; }

/* ---------- Hover / Microinterações ---------- */
.btn {
  transform-origin: center;
}

/* ==========================================================================
   WHATSAPP — pulso "batida de coração" (tum-tum... pausa... tum-tum...).
   Duas velocidades: a versão cheia no botão flutuante (maior destaque da
   hierarquia) e uma versão mais discreta no botão do header. Ambas ficam
   quase todo o ciclo em repouso (scale 1) — o "batimento" acontece só nos
   primeiros ~15-18% da duração.
   ========================================================================== */
@keyframes whatsapp-heartbeat {
  0%, 100% { transform: scale(1); }
  4%  { transform: scale(1.08); }
  8%  { transform: scale(1); }
  12% { transform: scale(1.04); }
  17% { transform: scale(1); }
}

@keyframes whatsapp-heartbeat-subtle {
  0%, 100% { transform: scale(1); }
  4%  { transform: scale(1.035); }
  8%  { transform: scale(1); }
  12% { transform: scale(1.018); }
  17% { transform: scale(1); }
}

/* Onda/pulse-ring do botão flutuante: um círculo que nasce colado no
   botão, cresce e desaparece — só ativo enquanto o wrapper está visível
   (ver ".whatsapp-float-wrap.is-visible" em main.js/style.css). */
@keyframes whatsapp-ring {
  0%   { transform: scale(1); opacity: 0.32; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.whatsapp-float-pulse,
.whatsapp-float-ring {
  animation-play-state: paused;
}

.whatsapp-float-wrap.is-visible .whatsapp-float-pulse,
.whatsapp-float-wrap.is-visible .whatsapp-float-ring {
  animation-play-state: running;
}

/* ---------- Loading state (utilitário para ações assíncronas) ----------
   Esta página é estática — não há formulário nem chamada assíncrona real
   hoje, então nenhum botão usa isto ainda. Fica pronto para quando houver
   uma ação que espera resposta (ex.: formulário de pedido, newsletter):
   basta alternar a classe ".is-loading" via JS no elemento .btn. */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.btn-outline.is-loading::after {
  border-color: rgba(0, 0, 0, 0.2);
  border-top-color: var(--color-black);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Preferência de movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Exceção: o spinner de loading é informativo (indica processamento em
     andamento), não decorativo — mantê-lo girando não viola a preferência
     por movimento reduzido, e removê-lo tiraria uma informação de estado. */
  .btn.is-loading::after {
    animation-duration: 0.7s !important;
    animation-iteration-count: infinite !important;
  }
}