/* ============================================================
   site.css — animações e interações (substitui o Webflow IX2)
   style.css = layout/visual original. Este arquivo = comportamento.
   ============================================================ */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-heading: cubic-bezier(0.12, 0.05, 0.205, 0.995);
}

/* ---------- Preloader (cobre o hero até a página carregar) ---------- */
.hero { position: relative; }
.js-preloader { display: block; opacity: 1; transition: opacity .6s ease; }
.js-preloader.is-done { opacity: 0; pointer-events: none; }

/* ---------- Cursor customizado ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .cursor-wrap { display: flex; }
  .cursor { position: absolute; top: 0; left: 0; will-change: transform; transform: translate(-100px, -100px); }
  body:not(.has-cursor) .cursor { opacity: 0; }
}

/* ---------- Reveal ao entrar na viewport ---------- */
.js-reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.js-reveal.is-visible { opacity: 1; transform: none; }

/* Títulos: sobem de dentro de uma máscara */
.text-wrap:has(> [data-heading-reveal]),
._70-ch-max:has(> [data-heading-reveal]) { overflow: hidden; }
[data-heading-reveal] {
  transform: translate3d(0, 105%, 0);
  transition: transform .8s var(--ease-heading);
}
[data-heading-reveal].is-visible { transform: none; }

/* Linha divisória cresce */
.js-divider { width: 0; transition: width 2s var(--ease-in-out-quart); }
.js-divider.is-visible { width: 100%; }

/* Cortina sobre imagens (contato / insights) */
.js-revealer { display: block; transform: translate3d(0, 0, 0); transition: transform 1.2s var(--ease-in-out-quart); }
.js-revealer.is-visible { transform: translate3d(110%, 0, 0); }

/* Parallax leve nas imagens de fundo (JS aplica --p de 0 a 1) */
.background-image-wrapper > .background-image,
.background-image-wrapper > .parallax-image,
.left-block > .background-image,
.pre-footer-wrapper > div > .background-image {
  will-change: transform;
  transform: translate3d(0, calc(var(--p, 0) * 22%), 0) scale(calc(1.2 + var(--p, 0) * 0.1));
}

/* ---------- Carrossel de logos (marquee infinito) ---------- */
.logos-wrapper { width: max-content; animation: logos-marquee var(--marquee-dur, 60s) linear infinite; will-change: transform; }
.logos-overflow-hidden:hover .logos-wrapper { animation-play-state: paused; }
@keyframes logos-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Botões ---------- */
.button .button-arrow-wrap { transition: transform .9s var(--ease-out-back); }
.button:hover .button-arrow-wrap { transform: translate3d(2.5em, 0, 0) scale(1.25) rotate(45deg); }

.footer-button { position: relative; overflow: hidden; }
.footer-button .button-hover-line { transform: translate3d(-101%, 0, 0); transition: transform .3s cubic-bezier(0.5, 1, 0.89, 1); }
.footer-button:hover .button-hover-line { transform: translate3d(0, 0, 0); transition: transform .6s var(--ease-in-out-quart); }

/* ---------- Menu ---------- */
.nav-content {
  transform: translate3d(100%, 0, 0);
  transition: transform 1s var(--ease-out-quart);
}
.nav-content.is-open { display: flex !important; transform: translate3d(0, 0, 0); transition: transform 1s var(--ease-in-out-quart); }
.menu-overlay { transition: opacity .3s ease; }
.menu-overlay.is-open { opacity: 1; pointer-events: auto; }
.button-menu { cursor: pointer; position: relative; z-index: 889; }
.menu-icon .top-line, .menu-icon .bottom-line { transition: transform .4s var(--ease-out-quart); }
.button-menu.is-open .top-line { transform: translate3d(0, 0.5em, 0) rotate(45deg); }
.button-menu.is-open .bottom-line { transform: translate3d(0, -0.5em, 0) rotate(-45deg); }
.nav-link-item { overflow: hidden; }
.nav-link-wrapper { transform: translate3d(0, 100%, 0); transition: transform .8s var(--ease-out-quart); }
.nav-content.is-open .nav-link-wrapper { transform: translate3d(0, 0, 0); transition: transform 1s var(--ease-in-out-quart) calc(.1s + var(--i, 0) * .1s); }
.nav-link-item:hover .nav-link-wrapper { transform: translate3d(.4em, 0, 0); transition: transform .4s var(--ease-out-quart); }
.nav-content .nav-block, .nav-content .nav-social-icons { opacity: 0; transition: opacity .5s ease; }
.nav-content.is-open .nav-block, .nav-content.is-open .nav-social-icons { opacity: 1; transition-delay: .3s; }
body.menu-open { overflow: hidden; }

/* ---------- Tabs (Nossas Soluções) ---------- */
.w-tab-link { cursor: pointer; }
.tabs-body { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .8s var(--ease-out-quint), opacity .8s var(--ease-out-quint); }
.tabs-body > * { min-height: 0; overflow: hidden; }
.w-tab-link:not(.w--current) .tabs-body { grid-template-rows: 0fr; opacity: 0; }
.w-tab-pane.w--tab-active { animation: tab-fade .3s ease; }
@keyframes tab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Slider de depoimentos ---------- */
.w-slider { position: relative; }
.w-slider-mask { display: flex; align-items: flex-start; height: var(--slide-h, auto) !important; transition: height .6s var(--ease-in-out-quart); }
.w-slide { flex: 0 0 100%; margin: 0; height: auto; transition: transform .7s var(--ease-in-out-quart); }
/* depoimento muito longo: limita a altura e rola dentro do texto */
.testimonial-text-wrapper .display-large { max-height: min(50vh, 26em); overflow-y: auto; padding-right: .5em; scrollbar-width: thin; }
.w-slider-arrow-left, .w-slider-arrow-right { cursor: pointer; user-select: none; }
.w-slider-nav { display: flex; justify-content: center; gap: .4rem; }
.w-slider-dot { width: .6em; height: .6em; margin: 0; border-radius: 100%; background: #fff6; transition: background-color .3s; }
.w-slider-dot.w-active { background: #fff; }
.w-slider-dot:focus { outline: none; }
/* setas: ícone desliza ao passar o mouse */
.slider-arrow-left .clip > div, .slider-arrow-right .clip > div { transition: transform .5s var(--ease-out-quart); }
.slider-arrow-left:hover .clip > div { transform: translate3d(-100%, 0, 0); }
.slider-arrow-right:hover .clip > div { transform: translate3d(100%, 0, 0); }
.testimonial-icon-wrapper._2 { transform: translate3d(0, 0, 0); }
.slider-arrow-left .testimonial-icon-wrapper._2 { left: auto; right: -1rem; }
.slider-arrow-left .clip .testimonial-icon-wrapper._2 { transform: translate3d(-100%, 0, 0); transition: transform .5s var(--ease-out-quart); }
.slider-arrow-left:hover .clip .testimonial-icon-wrapper._2 { transform: translate3d(-200%, 0, 0); }

/* ---------- Cards de insights (hover) ---------- */
.insights-link-block .insights-image-wrap img { transition: transform .8s var(--ease-out-quart); }
.insights-link-block:hover .insights-image-wrap img { transform: scale(1.05); }
.insights-link-block .blog-details > div:nth-child(3) { opacity: 0; transform: translate3d(0, 1.5em, 0); transition: opacity .5s ease, transform .5s var(--ease-out-quart); }
.insights-link-block:hover .blog-details > div:nth-child(3) { opacity: 1; transform: none; }

/* ---------- Marquee de texto (contato) ---------- */
.marquee-text-wrapper > div { will-change: transform; transform: translate3d(calc(var(--p, 0) * -60vw), 0, 0); }

/* ---------- Formulário ---------- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.w-form-done, .w-form-fail { display: none; }
.form-block.is-success form { display: none; }
.form-block.is-success .w-form-done { display: block; }
.form-block.is-error .w-form-fail { display: block; }
.form-submit-button[disabled] { opacity: .6; cursor: wait; }

/* ---------- Acessibilidade: sem animações ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal, [data-heading-reveal], .js-divider, .js-revealer { transition: none !important; opacity: 1 !important; transform: none !important; width: 100% !important; }
  .js-revealer { transform: translate3d(110%, 0, 0) !important; }
  .logos-wrapper { animation: none; }
  .background-image-wrapper > .background-image, .background-image-wrapper > .parallax-image, .left-block > .background-image, .pre-footer-wrapper > div > .background-image { transform: none; }
}