/* =====================================================================
   ANIMAÇÕES — Clínica da Dor Salus Doloris
   Keyframes + classes utilitárias de Scroll Reveal (ativadas via main.js
   com IntersectionObserver, adicionando a classe .visivel)
   ===================================================================== */

/* ---------------------------------------------------------------------
   SCROLL REVEAL — Fade Up
--------------------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.visivel{ opacity: 1; transform: translateY(0); }

/* Fade Left */
.reveal-esq{
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal-esq.visivel{ opacity: 1; transform: translateX(0); }

/* Fade Right */
.reveal-dir{
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal-dir.visivel{ opacity: 1; transform: translateX(0); }

/* Zoom In */
.reveal-zoom{
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal-zoom.visivel{ opacity: 1; transform: scale(1); }

/* Atraso escalonado para grades de cards (stagger) */
.reveal[data-atraso="1"], .reveal-zoom[data-atraso="1"]{ transition-delay: 0.08s; }
.reveal[data-atraso="2"], .reveal-zoom[data-atraso="2"]{ transition-delay: 0.16s; }
.reveal[data-atraso="3"], .reveal-zoom[data-atraso="3"]{ transition-delay: 0.24s; }
.reveal[data-atraso="4"], .reveal-zoom[data-atraso="4"]{ transition-delay: 0.32s; }
.reveal[data-atraso="5"], .reveal-zoom[data-atraso="5"]{ transition-delay: 0.4s; }

/* ---------------------------------------------------------------------
   HERO — entrada orquestrada no carregamento da página
--------------------------------------------------------------------- */
@keyframes surge-cima{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero__marca{ animation: surge-cima 0.9s var(--ease) 0.2s both; }
.hero h1{ animation: surge-cima 1s var(--ease) 0.38s both; }
.hero__subtitulo{ animation: surge-cima 1s var(--ease) 0.55s both; }
.hero__texto{ animation: surge-cima 1s var(--ease) 0.7s both; }
.hero__botoes{ animation: surge-cima 1s var(--ease) 0.85s both; }
.hero__scroll{ animation: surge-cima 1s var(--ease) 1.1s both; }

/* ---------------------------------------------------------------------
   ÍCONE DE SCROLL — pulso do indicador
--------------------------------------------------------------------- */
@keyframes scroll-pulsa{
  0%{ opacity: 0; top: 8px; }
  30%{ opacity: 1; }
  70%{ opacity: 1; }
  100%{ opacity: 0; top: 24px; }
}

/* ---------------------------------------------------------------------
   SUNBURST — rotação lenta e discreta (elemento de assinatura da marca)
--------------------------------------------------------------------- */
@keyframes girar-lento{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.hero__sunburst{ animation: girar-lento 140s linear infinite; }

/* ---------------------------------------------------------------------
   BOTÃO WHATSAPP FLUTUANTE — pulse
--------------------------------------------------------------------- */
@keyframes pulse-whatsapp{
  0%{ transform: scale(1); opacity: 0.55; }
  100%{ transform: scale(1.9); opacity: 0; }
}

/* ---------------------------------------------------------------------
   PARALLAX DISCRETO — usado no fundo do Hero (via JS, transform translateY)
--------------------------------------------------------------------- */
.hero__fundo{ will-change: transform; }

/* ---------------------------------------------------------------------
   CONTADORES — leve zoom ao entrar em viewport (acompanha .reveal-zoom)
--------------------------------------------------------------------- */
.contador{ transition: color 0.4s var(--ease); }

/* ---------------------------------------------------------------------
   ACCORDION FAQ — abertura/fechamento suave (max-height controlado via JS)
--------------------------------------------------------------------- */
.faq-resposta{ transition: max-height 0.5s var(--ease); }

/* ---------------------------------------------------------------------
   MENU MOBILE — transição de abertura
--------------------------------------------------------------------- */
.menu-mobile{
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.menu-mobile__painel{
  transition: transform 0.55s var(--ease);
}