/* ============================================================
   Ajustes finos que o Tailwind (via CDN) não cobre.
   Mantenha esse arquivo enxuto — a maior parte do estilo deve
   vir de classes utilitárias direto no HTML/PHP.
============================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #0A1F14;
}

/* esconde a scrollbar da faixa de features no mobile (overflow-x-auto)
   sem depender de plugin do Tailwind */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* foco visível acessível, sobrepondo o outline padrão do navegador */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #4ADE80;
  outline-offset: 3px;
  border-radius: 4px;
}

/* respeita usuários que preferem menos animação (GSAP também checa isso em main.js) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   HERO — círculos de fundo atrás do celular.
   4 no total: os 2 internos (c1, c2) ficam fixos; os 2 externos
   (c3, c4) pulsam — crescem e vão sumindo até desaparecer, daí
   o ciclo reinicia (defasados entre si pra parecer contínuo).
============================================================= */
.vd-hero-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 0;
}

.vd-c1 {
  width: 260px; height: 260px;
  background: rgba(74, 222, 128, 0.30);   /* brand-light — fixo */
}
.vd-c2 {
  width: 380px; height: 380px;
  background: rgba(34, 197, 94, 0.20);    /* brand — fixo */
}
.vd-c3 { width: 520px; height: 520px; background: rgba(34, 197, 94, 0.18); }   /* pulsa */
.vd-c4 { width: 680px; height: 680px; background: rgba(22, 163, 74, 0.12); }   /* pulsa, defasado */

/* a imagem do celular ocupa 88% do container (w-[240px] no mobile, 340/440/500
   em sm/md/lg) — os círculos abaixo são sempre maiores que ela em cada breakpoint,
   pra sobrar uma borda visível ao redor em vez de ficarem escondidos atrás */
@media (min-width: 640px) {
  .vd-c1 { width: 380px; height: 380px; }
  .vd-c2 { width: 520px; height: 520px; }
  .vd-c3 { width: 680px; height: 680px; }
  .vd-c4 { width: 860px; height: 860px; }
}

@media (min-width: 768px) {
  .vd-c1 { width: 480px; height: 480px; }
  .vd-c2 { width: 640px; height: 640px; }
  .vd-c3 { width: 800px; height: 800px; }
  .vd-c4 { width: 980px; height: 980px; }
}

@media (min-width: 1024px) {
  .vd-c1 { width: 540px; height: 540px; }
  .vd-c2 { width: 700px; height: 700px; }
  .vd-c3 { width: 880px; height: 880px; }
  .vd-c4 { width: 1080px; height: 1080px; }
}

/* c1 e c2 não recebem animation — permanecem sempre no mesmo
   lugar/tamanho/opacidade. Só c3 e c4 pulsam. */
.vd-c3,
.vd-c4 {
  animation: vdCirclePulse 3s ease-out infinite;
}

.vd-c4 {
  animation-delay: 1.5s; /* defasagem = efeito contínuo, um pulso "assumindo" quando o outro some */
}

@keyframes vdCirclePulse {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
  20%  { opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

/* ============================================================
   SECTION 3 — anéis pulsantes atrás das bolinhas verdes dos passos.
   O anel claro fixo já vem no HTML (border-2 border-brand-light/60);
   aqui só os anéis que crescem e somem, em loop, defasados entre si.
============================================================= */
.vd-step-icon {
  position: relative;
}

.vd-step-icon::before,
.vd-step-icon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(74, 222, 128, 0.55);
  animation: vdStepPulse 2.6s ease-out infinite;
  pointer-events: none;
}

.vd-step-icon::after {
  animation-delay: 1.3s;
}

@keyframes vdStepPulse {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================
   FAIXA DE FEATURES — carrossel infinito (marquee) em CSS puro.
   A lista é renderizada 2x seguidas no PHP; a animação desloca
   exatamente 50% (a largura de UMA lista), então quando ela
   "reinicia" o olho não percebe o corte — parece um loop contínuo.
============================================================= */
.vd-marquee {
  display: flex;
  width: max-content;
  animation: vdMarqueeScroll 28s linear infinite;
}

.vd-marquee-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 2rem;
  list-style: none;
  flex-shrink: 0;
}

@keyframes vdMarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pausa em hover — dá pra ler parado se quiser */
.vd-marquee:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .vd-marquee {
    animation: none;
  }
}

/* ============================================================
   BOTÃO DO MENU MOBILE — 3 barras que se transformam em X
   quando o botão fica com aria-expanded="true" (controlado no
   main.js). Barras são <span> simples, animadas via transform
   pra rodar suave em qualquer navegador (sem trocar de ícone/SVG).
============================================================= */
.vd-burger {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.vd-burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.vd-burger-bar-1 { top: 0; }
.vd-burger-bar-2 { top: 7px; }
.vd-burger-bar-3 { top: 14px; }

[data-mobile-menu-toggle][aria-expanded="true"] .vd-burger-bar-1 {
  top: 7px;
  transform: rotate(45deg);
}

[data-mobile-menu-toggle][aria-expanded="true"] .vd-burger-bar-2 {
  opacity: 0;
}

[data-mobile-menu-toggle][aria-expanded="true"] .vd-burger-bar-3 {
  top: 7px;
  transform: rotate(-45deg);
}