/* Sistema de animacao da pagina: entrada ao rolar, hover, abertura do topo e barra de progresso.
   O conteudo so fica escondido enquanto o JS estiver rodando (classe js-reveal); sem JS tudo aparece normal. */

/* ---------- barra de progresso da rolagem ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 50;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--fb-gold-deep), var(--fb-gold), var(--fb-gold-hi));
  pointer-events: none;
}

/* ---------- abertura do topo ---------- */

@keyframes enter-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-pop {
  from { opacity: 0; transform: translateY(-14px) scale(0.8); }
  to { opacity: 1; transform: none; }
}

.hero__logo { animation: enter-pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero h1 { animation: enter-up 0.8s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero__lead { animation: enter-up 0.8s 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero .marquee { animation: enter-up 1s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- entrada ao rolar ---------- */

.js-reveal [data-reveal] {
  transition: opacity 0.7s ease var(--d, 0s), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
}

.js-reveal [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(34px);
}

.js-reveal [data-reveal="left"]:not(.is-in) { transform: translateX(-40px); }
.js-reveal [data-reveal="zoom"]:not(.is-in) { transform: scale(0.92); }

/* ---------- titulos: marca-texto amarelo "varre" quando o titulo aparece ---------- */

.js-reveal .section--light .section__title .gold {
  background: linear-gradient(var(--fb-gold), var(--fb-gold)) no-repeat left center / 0% 100%;
  transition: background-size 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.35s;
}

.js-reveal .section--light .section__title.is-in .gold { background-size: 100% 100%; }

/* ---------- linha do tempo: numero aparece "estourando" e a linha desce ---------- */

.js-reveal .tl-step__num {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s, opacity 0.4s ease 0.15s;
}

.js-reveal .tl-step.is-in .tl-step__num { transform: none; opacity: 1; }

.js-reveal .tl-step:not(:last-child)::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s;
}

.js-reveal .tl-step.is-in:not(:last-child)::before { transform: scaleY(1); }

/* ---------- hover: cards sobem, imagens ganham vida ---------- */

.feature,
.pt-card,
.faq details,
.tl-step__media {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
}

.js-reveal .feature.is-in:hover,
.js-reveal .pt-card:hover {
  transition-delay: 0s;
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(6, 6, 7, 0.22);
}

.js-reveal .tl-step.is-in .tl-step__media:hover { transform: translateY(-4px) scale(1.015); }

.feature img,
.pt-card__cover { transition: transform 0.5s ease; }
.feature:hover img,
.pt-card:hover .pt-card__cover { transform: scale(1.04); }
.feature,
.pt-card { overflow: hidden; }

.pt-tab { transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.pt-tab:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(6, 6, 7, 0.14); }

/* ---------- perguntas: resposta desliza ao abrir ---------- */

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.faq details[open] > p { animation: faq-open 0.3s ease; }

/* ---------- oferta: o card flutua de leve ---------- */

@keyframes float-soft {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.offer-card.is-in { animation: float-soft 5s ease-in-out 1s infinite; }

/* ---------- rodape: icones ---------- */

.footer__icon svg { transition: transform 0.25s ease; }
.footer__icon:hover svg { transform: rotate(-8deg) scale(1.12); }