/* ============================================================
   WebProj — animations.css
   Motion system: apenas transform / opacity / filter (GPU).
   Reveals via IntersectionObserver (app.js adiciona .in).
   ============================================================ */

/* ---------- Reveal on scroll ---------- */

/* Sem filter: blur() aqui — além de custar composição em GPU (marcado como
   "animação não composta" pelo Lighthouse), um filtro ativo criaria
   containing block e achataria o transform-style: preserve-3d do flip do
   formulário. Distância do translateY reduzida (28px → 12px) para minimizar
   o impacto real de CLS quando o usuário rola até estes elementos — mudança
   de posição via transform ainda conta para Cumulative Layout Shift quando
   não está atrelada a um input direto do usuário (scroll/IntersectionObserver
   não contam como "recent input" para efeito da métrica). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .6s var(--ease-out),
    transform .6s var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ---------- Pulsos de status (dots) ---------- */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
.eyebrow i,
.dash-live i,
.dash-chip i {
  animation: pulse-dot 2.6s ease-in-out infinite;
}

/* ---------- Chips flutuantes do painel ---------- */

@keyframes float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
.chip-a { animation: float-a 7s ease-in-out infinite; }
.chip-b { animation: float-b 9s ease-in-out infinite; }

/* ---------- Gráfico do painel: desenho da linha ---------- */

.js .hero-visual .spark-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.js .hero-visual.in .spark-line {
  animation: spark-draw 2.2s var(--ease-out) .5s forwards;
}
@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

.js .hero-visual .spark-area,
.js .hero-visual .spark-dot { opacity: 0; }
.js .hero-visual.in .spark-area {
  animation: fade-in 1.4s ease 1.4s forwards;
}
.js .hero-visual.in .spark-dot {
  animation: fade-in .6s ease 2.4s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

/* ---------- Barras de canal: crescimento ---------- */

.js .hero-visual .channel-bar i { transform: scaleX(0); }
.js .hero-visual.in .channel-bar i {
  transform: scaleX(1);
  transition: transform 1.2s var(--ease-out);
}
.js .hero-visual.in .channel:nth-child(1) .channel-bar i { transition-delay: .55s; }
.js .hero-visual.in .channel:nth-child(2) .channel-bar i { transition-delay: .70s; }
.js .hero-visual.in .channel:nth-child(3) .channel-bar i { transition-delay: .85s; }

/* ---------- Glows respirando (transform/opacity apenas) ---------- */

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.hero-glow { animation: breathe 9s ease-in-out infinite; }
.cta-glow  { animation: breathe 8s ease-in-out infinite; transform-origin: 50% 100%; }

/* ---------- FAQ: entrada da resposta ---------- */

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq-item[open] .faq-answer { animation: faq-in .45s var(--ease-out); }

/* ---------- Acessibilidade: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .eyebrow i,
  .dash-live i,
  .dash-chip i,
  .chip-a,
  .chip-b,
  .hero-glow,
  .cta-glow,
  .success-icon,
  .btn.is-loading::before,
  .faq-item[open] .faq-answer { animation: none; }

  /* anel de energia fica estático, sem girar */
  .btn:hover::after,
  .btn:focus-visible::after,
  .energy-card:hover::after,
  .energy-card:focus-within::after { animation: none; }

  /* sem giro 3D: troca direta da frente pelo verso */
  .flip-inner { transition: none; }
  .flip.is-flipped .flip-inner { transform: none; }
  .flip.is-flipped .flip-front { display: none; }
  .flip-back { position: relative; transform: none; }
  .flip:not(.is-flipped) .flip-back { display: none; }

  .js .hero-visual .spark-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
  .js .hero-visual .spark-area,
  .js .hero-visual .spark-dot { opacity: 1; animation: none; }
  .js .hero-visual .channel-bar i { transform: scaleX(1); transition: none; }

  .btn, .card, .card-icon { transition: none; }
  .btn:hover { transform: none; }
  .card:hover { transform: none; }
}