/* ============================================================
   IMC — Transições contextuais
   Camada final: reveals direcionais, FAQ suave, stagger de chips,
   micro-interações que reforçam o tema editorial + inclusão.
   ============================================================ */

/* ---------- Variantes direcionais de reveal (ritmo editorial) ---------- */
.reveal.from-left  { transform: translateX(-34px); }
.reveal.from-right { transform: translateX(34px); }
.reveal.zoom       { transform: scale(.94); }
.reveal.from-left.in,
.reveal.from-right.in,
.reveal.zoom.in    { transform: none; }

/* ---------- Stagger genérico via --i (índice setado no JS) ---------- */
.stagger > * {
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.stagger.in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* chips de público: pequeno "pop" ao entrar + hover já existente */
.audience.stagger > .aud-chip { transform: translateY(14px) scale(.9); }

/* ---------- FAQ: acordeão com altura animada (JS controla height) ---------- */
.faq-a { overflow: hidden; }
.faq-q { transition: background .25s ease, color .2s ease; }
.faq-item:hover .faq-q { background: rgba(22,32,43,.025); }
.faq-item[open] .faq-q { color: var(--ink); }
/* realce sutil da barra lateral colorida ao abrir (tema puzzle) */
.faq-item { position: relative; }
.faq-item::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 3px; background: var(--teal);
  transform: scaleY(0); transform-origin: center; transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.faq-item:nth-child(5n+1)::before { background: var(--lg-green, #34C77B); }
.faq-item:nth-child(5n+2)::before { background: var(--lg-blue, #2FA9EE); }
.faq-item:nth-child(5n+3)::before { background: var(--lg-amber, #F4B22A); }
.faq-item:nth-child(5n+4)::before { background: var(--lg-orange, #F4801F); }
.faq-item:nth-child(5n+5)::before { background: var(--lg-purple, #7D6BE0); }
.faq-item[open]::before { transform: scaleY(1); }

/* ---------- Botões: feedback de toque ---------- */
.btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, filter .18s ease; }
.btn:active { transform: translateY(0) scale(.97); }
.card-link:active { transform: translateX(1px); }

/* ---------- WhatsApp flutuante: pulso de atenção sutil, 1x ao surgir ---------- */
@keyframes waPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.wa-float { animation: waPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(31,176,137,.45); animation: waRing 2.8s ease-out infinite; animation-delay: 1.2s;
}
@keyframes waRing {
  0% { box-shadow: 0 0 0 0 rgba(31,176,137,.4); }
  70%,100% { box-shadow: 0 0 0 16px rgba(31,176,137,0); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .wa-float::after { animation: none; }
}

/* ---------- Doc chips do Decreto: "encaixe" ao revelar ---------- */
.decreto-list.stagger > li { transform: translateX(20px) scale(.97); opacity: 0; }
.decreto-list.stagger.in > li { transform: none; opacity: 1; }

/* ---------- Hero: sequência de entrada no load (não depende de scroll) ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-coin { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) .15s both; }
  .puzzle-svg .pp { animation-delay: var(--d, 0s); }
}

/* ---------- Links de nav: cor suave + sublinhado já animado ---------- */
.nav-links a { transition: color .22s ease; }

/* ---------- Imagem do Ilan: revelar com leve clip ---------- */
.inst-photo-wrap.reveal.from-left { transition-duration: .8s; }

/* ---------- Cards de curso: elevação + brilho na borda ao hover ---------- */
.card { transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; }

/* ---------- Métricas: leve subida escalonada ---------- */
.metrics.stagger > .metric { transform: translateY(20px) scale(.95); }

/* ---------- Smooth scroll já ativo; ancoragem com offset p/ nav fixa ---------- */
:target { scroll-margin-top: 90px; }
section[id] { scroll-margin-top: 84px; }