/* MOTION — animações de entrada, scroll e microinterações.
   Usa as propriedades individuais `translate`/`scale` para não conflitar
   com os `transform` já usados nos hovers do style.css. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --reveal-dur: .9s;
}

/* Barra de progresso de leitura */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 100;
  background: var(--green);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
  box-shadow: 0 0 10px rgba(20, 240, 0, .6);
}

/* ---------- Entrada do hero (ao carregar) ---------- */
@keyframes fade-down {
  from { opacity: 0; translate: 0 -24px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fade-up {
  from { opacity: 0; translate: 0 32px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes line-grow {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

.hero { overflow: hidden; }

.nav { animation: fade-down .9s var(--ease-out) both; }
.hero__content > * { animation: fade-up 1s var(--ease-out) both; }
.hero__content > :nth-child(1) { animation-delay: .25s; }
.hero__content > :nth-child(2) { animation-delay: .4s; }
.hero__content > :nth-child(3) { animation-delay: .55s; }
.hero__content > :nth-child(4) { animation-delay: .7s; }
.hero__content > :nth-child(5) { animation-delay: .85s; }
.hero__divider { transform-origin: left center; animation-name: line-grow; }

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    translate var(--reveal-dur) var(--ease-out),
    scale var(--reveal-dur) var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, translate;
}
.js [data-reveal="left"]  { translate: -56px 0; }
.js [data-reveal="right"] { translate: 56px 0; }
.js [data-reveal="scale"] { translate: 0 24px; scale: .92; }
.js [data-reveal="fade"]  { translate: 0 0; }

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  will-change: auto;
}

/* Divisor da missão cresce ao aparecer */
.js .missao__divider[data-reveal] { translate: 0 0; scale: 0 1; transform-origin: center; }
.js .missao__divider[data-reveal].is-visible { scale: 1 1; }

/* ---------- Microinterações ---------- */
.btn:active, .btn-solid:active, .btn-outline:active { transform: translateY(0) scale(.97); }

.btn-outline img, .btn-solid img { transition: filter .25s, translate .3s var(--ease-out); }
.btn-outline:hover img, .btn-solid:hover img { translate: 5px 0; }

.oportunidade__arrow { animation: bob 2s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 6px; }
}

.card__media, .credito__media { overflow: hidden; }
.card__media video, .credito__media img { transition: scale .8s var(--ease-out); }
.card:hover .card__media video, .credito__media:hover img { scale: 1.04; }

.credito__list li img { transition: scale .3s var(--ease-out); }
.credito__list li:hover img { scale: 1.2; }

.valor { transition: translate .35s var(--ease-out), background .25s, transform .25s; }
.valor:hover { translate: 0 -6px; }

.footer__col a { transition: color .2s, translate .25s var(--ease-out); }
.footer__col a:hover { translate: 4px 0; }
.footer__social a img { transition: scale .25s var(--ease-out); }
.footer__social a:hover img { scale: 1.2; }

/* FAQ: painel aparece ao trocar de aba */
@keyframes panel-in {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
.faq__panel:not([hidden]) { animation: panel-in .45s var(--ease-out); }
.faq__a { transition: grid-template-rows .4s var(--ease-out); }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav, .hero__content > *, .oportunidade__arrow, .faq__panel { animation: none !important; }
  .js [data-reveal] { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  .scroll-progress { display: none; }
}

/* Parallax do conteúdo do hero ao rolar */
.hero__content {
  transform: translateY(var(--hero-shift, 0px));
  opacity: var(--hero-fade, 1);
}

/* Nav fixa: acompanha a rolagem e ganha fundo escuro para manter a leitura sobre seções claras */
.nav {
  position: fixed;
  transition: top .35s var(--ease-out), background .35s, border-color .35s, box-shadow .35s;
}
.nav.is-scrolled {
  top: 16px;
  background: rgba(14, 16, 15, .78);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

/* Botão voltar ao topo */
.to-top {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 50;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #0a0a0a;
  background: var(--green);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  transition: opacity .3s, translate .35s var(--ease-out), visibility .3s, scale .25s var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { scale: 1.1; }
.to-top:active { scale: .94; }
.to-top:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }