/* motion.css — estilos de suporte do motion.js.
   Carregar no <head> depois do style.css do site. */

/* ------------------------------------------------ estado inicial das entradas
   Só esconde com html.motion (JS ativo e sem reduced motion). Sem isso, tudo
   aparece normalmente — o Google e quem desativou animação leem o conteúdo. */
.motion [data-anim],
.motion [data-split],
.motion [data-words-scroll] { opacity: 0; }
.motion [data-desenhar] { visibility: hidden; } /* o JS esconde o traço e libera o SVG */

/* ------------------------------------------------ Lenis (scroll suave) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; } /* só durante a rolagem */
html.lenis { scroll-behavior: auto !important; }     /* o scroll-behavior: smooth do site briga com o Lenis */

/* ------------------------------------------------ marquee */
[data-marquee] {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
[data-marquee] > * {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, 3rem);
  padding-right: var(--marquee-gap, 3rem); /* emenda sem "pulo" entre as cópias */
  min-width: 100%;
}

/* ------------------------------------------------ scroll horizontal */
[data-horizontal] { overflow: hidden; }
[data-horizontal-trilho] {
  display: flex;
  gap: 2rem;
  width: max-content;
}
@media (max-width: 899px) {
  /* celular: carrossel nativo com snap, sem pin */
  [data-horizontal-trilho] {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--horizontal-respiro, 16px);
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  [data-horizontal-trilho] > * { scroll-snap-align: start; flex: 0 0 85%; }
}

/* ------------------------------------------------ magnético / tilt */
[data-magnetic], [data-tilt] { will-change: transform; }
[data-tilt] { transform-style: preserve-3d; }

/* ------------------------------------------------ cursor customizado
   O cursor do sistema continua visível (acessibilidade); este é um "seguidor". */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cursor-cor, #fff);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  display: grid;
  place-items: center;
  transition: width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.cursor.ativo { opacity: 1; }
.cursor.sobre-link { width: 48px; height: 48px; }
.cursor.com-texto { width: 88px; height: 88px; mix-blend-mode: normal; background: var(--cursor-cor-texto, var(--acento, #111)); }
.cursor span {
  font: 700 11px/1 var(--font, sans-serif);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
}

/* ------------------------------------------------ ícone Lottie */
[data-lottie] { display: inline-block; width: var(--lottie-tamanho, 64px); aspect-ratio: 1; }
[data-lottie] > img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------ transição entre páginas (sem JS)
   Navegação entre páginas do mesmo site com fade cruzado. Chrome/Edge/Safari recentes;
   nos outros navegadores a troca é normal. */
@view-transition { navigation: auto; }

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .cursor { display: none; }
}