/*
 * Vatse Motion 2: estilos de apoio do motor (public/builder/js/motion.js).
 * Seletores dentro de :where() (especificidade zero): o CSS do tema sempre vence.
 * Vocabulário e regras: docs/construtor/motor-gsap.md.
 */

/* Lenis (data-gsap-smooth) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* horizontal: sem JS, no celular ou com reduced-motion o trilho rola com o dedo,
   dentro da própria seção (a página nunca ganha rolagem horizontal). */
/* Quem rola é o TRILHO, não a seção: rolar a seção arrastava o título junto. */
:where([data-gsap~="horizontal"]) { overflow-x: clip; }
:where([data-gsap~="horizontal"] [data-gsap-trilho]) { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
:where(.gsap-horizontal-ativo [data-gsap-trilho]) { overflow: visible; scroll-snap-type: none; }
:where([data-gsap~="horizontal"] [data-gsap-panel]) { flex: 0 0 auto; scroll-snap-align: start; }
:where(.gsap-horizontal-ativo) { overflow: hidden; scroll-snap-type: none; }

/* pin-steps: com o motor ativo (768 px ou mais) os passos ocupam a mesma célula. */
:where(.gsap-passos-pilha) { display: grid; }
:where(.gsap-passos-pilha) > :where([data-gsap-step], [data-gsap-step-media]) { grid-area: 1 / 1; }

/* sticky-stack: cartões grudam no topo, cada um um pouco abaixo do anterior. */
:where(.gsap-pilha-ativa .gsap-cartao) {
    position: sticky;
    top: calc(var(--gsap-pilha-topo, 12vh) + var(--gsap-i, 0) * var(--gsap-pilha-passo, 14px));
    transform-origin: 50% 0;
}

/* progress: sem JS a barra fica vazia (escala zero), nunca cheia e parada. */
:where([data-gsap~="progress"]) { transform: scaleX(0); transform-origin: 0 50%; }

/* marquee: com o motor, trilho e cópias em linha. */
:where(.gsap-faixa-ativa) { display: flex; flex-wrap: nowrap; overflow: hidden; }
:where(.gsap-faixa-ativa) > * { flex: 0 0 auto; }

/* split-*: as máscaras do SplitText não podem cortar acentos e descendentes. */
:where(.gsap-linha-mask, .gsap-palavra-mask) { padding-top: 0.18em; margin-top: -0.18em; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* cursor (data-gsap="cursor" na casca; só premium e imersivo, ponteiro fino). */
.gsap-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; mix-blend-mode: difference; transition: opacity .25s ease; }
.gsap-cursor.is-fora { opacity: 0; }
.gsap-cursor-ponto { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gsap-cursor-cor, #fff); }
.gsap-cursor-anel {
    position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--gsap-cursor-cor, #fff); border-radius: 50%;
    transition: width .3s ease, height .3s ease, margin .3s ease, background-color .3s ease;
}
.gsap-cursor.is-link .gsap-cursor-anel { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.gsap-cursor.is-midia .gsap-cursor-anel { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gsap-cursor-cor, #fff); }
.gsap-cursor-texto { font: 700 12px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #000; opacity: 0; }
.gsap-cursor.is-midia .gsap-cursor-texto { opacity: 1; }
html.gsap-cursor-ativo, html.gsap-cursor-ativo * { cursor: none !important; }
html.gsap-cursor-ativo :is(input, textarea, select, [contenteditable="true"]) { cursor: auto !important; }

@media (prefers-reduced-motion: reduce) {
    .gsap-cursor { display: none; }
}