/* ==========================================================================
   NEXT Engenharia — movimento
   Regra da casa: o estado VISÍVEL é o padrão. As classes abaixo só entram em
   cena quando o JS confirma que está rodando (<html class="js">), então sem
   JavaScript o conteúdo aparece inteiro.
   ========================================================================== */

/* ------------------------------------------------ 1. entradas por scroll */

.js [data-anim] { will-change: transform, opacity; }

/* fade simples */
.js [data-anim="fade"] { opacity: .001; }
.js [data-anim="fade"].is-in {
  opacity: 1;
  transition: opacity var(--t-in) var(--e-soft);
}

/* palavra a palavra: fade + desfoque, escalonado pelo JS via --i */
.js [data-anim="words"] .word {
  display: inline-block;
  opacity: .001;
  filter: blur(2px);
}
.js [data-anim="words"].is-in .word {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--t-in) var(--e-soft) calc(var(--i, 0) * 100ms),
    filter  var(--t-in) var(--e-soft) calc(var(--i, 0) * 100ms);
}

/* botão: entra na diagonal */
.js [data-anim="rise"] { opacity: 0; transform: translate(20px, 20px); }
.js [data-anim="rise"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-in) var(--e-soft), transform var(--t-in) var(--e-soft);
}

/* cards: fade escalonado */
.js [data-anim="card"] { opacity: 0; }
.js [data-anim="card"].is-in {
  opacity: 1;
  transition: opacity var(--t-in) var(--e-soft) calc(var(--i, 0) * 80ms);
}

/* linha divisória: entra deslizando da esquerda */
.js [data-anim="line"] { transform: translateX(-1200px); }
.js [data-anim="line"].is-in {
  transform: none;
  transition: transform var(--t-line) var(--e-line);
}

/* -------------------------------------------------------- 2. preloader */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--c-ink);
  transition: opacity 600ms var(--e-ui), visibility 600ms;
}
.preloader img { width: 180px; height: auto; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .preloader { display: none; }

/* hero: zoom-out de abertura (scale 1.04 -> 1, spring do original) */
.js .hero__media img { transform: scale(1.04); }
.js.is-loaded .hero__media img {
  transform: scale(1);
  transition: transform 1800ms var(--e-line) 400ms;
}

/* header entra depois do preloader */
.js .site-header { opacity: 0; }
.js.is-loaded .site-header {
  opacity: 1;
  transition: opacity 600ms var(--e-ui) 300ms, transform 400ms var(--e-ui);
}
.js.is-loaded .site-header.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 250ms var(--e-ui), transform 250ms var(--e-ui);
}

/* ---------------------------------------------------------- 3. marquees */

.marquee { overflow: clip; width: 100%; }
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.js .marquee__track { animation: marquee var(--marquee-duration, 60s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

/* ------------------------------------------- 4. vitrine horizontal (JS) */

.showcase__track { will-change: transform; }

/* ------------------------------------------------- 5. escala da seção */

.scale-in { transform-origin: 50% 0; will-change: transform; }

/* --------------------------------------------------------- 6. accordion */

.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--e-ui);
}
.faq-item__body > div { overflow: hidden; }
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }

.faq-item__icon { transition: transform 420ms var(--e-ui); }
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

/* ------------------------------------------------- 7. zoom em imagens */

.zoom { overflow: hidden; }
.zoom img { transition: transform 600ms var(--e-ui); }
.zoom:hover img, a:hover .zoom img { transform: scale(1.04); }

/* --------------------------------------------- 8. quem pediu menos movimento */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-anim],
  .js [data-anim="words"] .word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .preloader { display: none !important; }
  .js .hero__media img { transform: none !important; transition: none !important; }
  .js .site-header { opacity: 1 !important; transform: none !important; }
  .js .site-header.is-hidden { opacity: 1 !important; transform: none !important; }
  .js .marquee__track { animation: none !important; }
  .marquee { overflow-x: auto; }
  .scale-in { transform: none !important; }
  .zoom img { transition: none !important; }
  .faq-item__body { transition: none; }
}