/* Solut Network: estados iniciais dos movimentos (Motion, ver js/site-motion.js).
   REGRA: nada aqui oculta conteudo se html.motion-on nao existir. A classe so e posta
   pelo JS depois de confirmar window.Motion e movimento permitido; reduced-motion nunca a recebe.
   Somente transform/opacity (unica excecao: height do FAQ, animada pelo JS). */

@media (prefers-reduced-motion: no-preference) {

  /* Reveal: o Motion assume; desliga a transicao CSS antiga para nao brigar com o inline style.
     Estado oculto so nos itens marcados pelo JS (abaixo da dobra). */
  html.motion-on .reveal { transition: none; transform: none; }
  html.motion-on .reveal.is-visible { opacity: 1; }
  html.motion-on .reveal[data-motion="pending"] { opacity: 0; }

  /* Titulos por palavra: a mascara corta a palavra subindo. O padding/margin negativo
     evita cortar descendentes (g, p, y) e a borda do tracking negativo, sem mexer no layout. */
  html.motion-on .m-word {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding: 0.08em 0.06em 0.16em; margin: -0.08em -0.06em -0.16em;
  }
  html.motion-on .m-word > span { display: inline-block; will-change: transform; }

  /* Dropdowns do header (desktop): a visibilidade segue o CSS com atraso na saida,
     para o Motion poder animar a saida; opacity/transform ficam por conta do JS. */
  html.motion-on .nav__menu { transform-origin: top left; }
  html.motion-on .nav__menu--end { transform-origin: top right; }
  @media (min-width: 1024px) {
    html.motion-on .nav__menu { transition: visibility 0s linear 160ms; }
    html.motion-on .nav__menu.is-open { transition-delay: 0s; }
    @media (hover: hover) {
      html.motion-on .nav__item--dropdown:hover > .nav__menu { transition-delay: 0s; }
    }
  }

  /* FAQ: troca a animacao CSS antiga pela do Motion; o icone volta ao estado fechado ao iniciar o fechamento. */
  html.motion-on .accordion__item[open] > .accordion__panel { animation: none; }
  html.motion-on .accordion__item[data-closing] > .accordion__summary::after {
    transform: none; background: var(--surface); color: var(--navy-700); border-color: var(--line);
  }
  html.motion-on .accordion__panel { overflow: hidden; }

  /* Parallax do hero: o JS aplica transform so em wrappers sem transform proprio. */
  html.motion-on [data-parallax] { will-change: transform; }

  /* Tilt 3D dos prints do NOC (so mouse). O brilho e um pseudo-elemento que se move por transform. */
  html.motion-on .noc-frame[data-tilt] { position: relative; will-change: transform; }
  html.motion-on .noc-frame[data-tilt]::after {
    content: ""; position: absolute; left: 0; top: 0; width: 70%; aspect-ratio: 1; pointer-events: none;
    background: radial-gradient(circle at center, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 65%);
    transform: translate(calc(var(--gx, 0px) - 50%), calc(var(--gy, 0px) - 50%));
    opacity: 0; transition: opacity 250ms ease-out;
  }
  html.motion-on .noc-frame[data-tilt][data-tilting]::after { opacity: 1; }
}