/* ══════════════════════════════════════════════════════════════
   ANIMATIONS — Portfólio Guilherme Back
   Carregado após foundation.css e inline <style> do index.html
   para garantir override correto.
══════════════════════════════════════════════════════════════ */

/* ── Scroll-triggered entrance ──────────────────────────────── */
[data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 650ms var(--ease-standard),
    transform 650ms var(--ease-standard);
}
[data-anim][data-anim-type="fade"] {
  transform: none;
}
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

[data-anim-delay="1"] { transition-delay: 50ms; }
[data-anim-delay="2"] { transition-delay: 100ms; }
[data-anim-delay="3"] { transition-delay: 150ms; }
[data-anim-delay="4"] { transition-delay: 200ms; }
[data-anim-delay="5"] { transition-delay: 250ms; }

/* ── Hero: entrada no load (acima da dobra, sem Intersection Observer) ── */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero-fade-1,
.hero-fade-2,
.hero-fade-3,
.hero-fade-4 {
  animation: hero-in 650ms var(--ease-standard) both;
}
.hero-fade-1 { animation-delay: 0ms; }
.hero-fade-2 { animation-delay: 160ms; }
.hero-fade-3 { animation-delay: 320ms; }
.hero-fade-4 { animation-delay: 480ms; }

/* ── Seta de scroll: bounce contínuo ────────────────────────── */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}
.hero-scroll-arrow {
  display: inline-block;
  animation: arrow-bounce 1.8s ease-in-out infinite;
  animation-delay: 1.0s;
}

/* ── Hover: cards do Diagnóstico ────────────────────────────── */
.diag-card {
  transition:
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.diag-card:hover {
  border-color: var(--border-forte);
  transform: translateY(-3px);
}

/* ── Hover: cards do Método ─────────────────────────────────── */
.metodo-card {
  transition:
    background var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}
.metodo-card:hover {
  background: var(--surface-baixa);
  transform: translateY(-3px);
}

/* ── Hover: CTA do Case — seta desliza ──────────────────────── */
.case-cta {
  cursor: default;
}
.case-cta-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.case-cta:hover .case-cta-arrow {
  transform: translateX(5px);
}

/* ── Oferta: coluna esquerda sticky ─────────────────────────── */
.oferta-left {
  position: sticky;
  top: 38vh;
  align-self: start;
}
@media (max-width: 768px) {
  .oferta-left {
    position: static;
    top: auto;
    align-self: auto;
  }
}

/* ── FAQ: expand/collapse suave via grid trick ──────────────── */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
  overflow: hidden;
  /* Reset do <p> original — controle visual vai para o inner div */
  padding-bottom: 0;
  margin: 0;
}
.faq-answer > div {
  min-height: 0;
  overflow: hidden;
  color: var(--text-secundario);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 0;
}
.faq-answer.open {
  grid-template-rows: 1fr;
}
.faq-answer.open > div {
  padding-bottom: 32px;
}

/* ── Hover: botão do FAQ ─────────────────────────────────────── */
.faq-btn {
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.faq-btn:hover {
  border-color: var(--accent-link);
}
.faq-btn-arrow {
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.faq-btn:hover .faq-btn-arrow {
  transform: translateX(4px);
}

/* ── Hover: botão do Formulário ─────────────────────────────── */
.form-cta-btn {
  transition:
    background var(--duration-base) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}
.form-cta-btn:hover {
  background: var(--accent-hover);
}

/* ── Hover: links do footer ─────────────────────────────────── */
.footer-link {
  transition: color var(--duration-fast) var(--ease-standard);
}

/* ── Acessibilidade ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .hero-fade-1,
  .hero-fade-2,
  .hero-fade-3,
  .hero-fade-4 {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-scroll-arrow {
    animation: none !important;
  }
  .faq-answer {
    transition: none !important;
  }
  .diag-card,
  .metodo-card,
  .case-cta-arrow,
  .faq-btn,
  .faq-btn-arrow,
  .form-cta-btn {
    transition: none !important;
  }
}