/* ============================================================
   LENIS SMOOTH SCROLL — integração obrigatória com GSAP ticker
   ============================================================ */
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;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* ============================================================
   GPU LAYER — base comum a todos os elementos animáveis
   Garante compositing layer separada → 60 fps sem jank
   ============================================================ */
[data-scroll-reveal],
[data-scroll-reveal-left],
[data-scroll-reveal-right],
[data-scroll-reveal-scale],
[data-scroll-reveal-flip],
[data-scroll-reveal-blur],
[data-scroll-reveal-rotate],
[data-scroll-stagger] > *,
[data-parallax],
[data-scroll-clip] > .scroll-clip-inner,
[data-scroll-counter] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================================
   ESTADOS INICIAIS — visibilidade 0 antes de animar
   GSAP toma conta dos estados finais via JS
   ============================================================ */

/* Fade + sobe */
[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(52px) translateZ(0);
}

/* Fade + entra da esquerda */
[data-scroll-reveal-left] {
    opacity: 0;
    transform: translateX(-72px) translateZ(0);
}

/* Fade + entra da direita */
[data-scroll-reveal-right] {
    opacity: 0;
    transform: translateX(72px) translateZ(0);
}

/* Fade + escala a partir de baixo */
[data-scroll-reveal-scale] {
    opacity: 0;
    transform: scale(0.82) translateZ(0);
}

/* Flip 3D no eixo X */
[data-scroll-reveal-flip] {
    opacity: 0;
    transform: perspective(800px) rotateX(30deg) translateZ(0);
    transform-origin: top center;
}

/* Blur + fade */
[data-scroll-reveal-blur] {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px) translateZ(0);
}

/* Rotação + fade */
[data-scroll-reveal-rotate] {
    opacity: 0;
    transform: rotate(-8deg) translateY(40px) translateZ(0);
    transform-origin: left center;
}

/* Filhos de stagger */
[data-scroll-stagger] > * {
    opacity: 0;
    transform: translateY(40px) translateZ(0);
}

/* ============================================================
   CLIP REVEAL — texto/imagem revelado por máscara deslizante
   O wrapper tem overflow:hidden; o inner desloca-se para cima
   ============================================================ */
[data-scroll-clip] {
    overflow: hidden;
}

[data-scroll-clip] > .scroll-clip-inner {
    transform: translateY(100%) translateZ(0);
}

/* ============================================================
   LINHA DE PROGRESSO DE SCROLL — decoração global opcional
   Activa-se com data-scroll-progress no elemento
   ============================================================ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: currentColor;
    transform-origin: left;
    z-index: 9999;
    will-change: width;
    pointer-events: none;
}

/* ============================================================
   PARALLAX
   ============================================================ */
[data-parallax] {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    overflow: hidden;
}

/* ============================================================
   LIMPEZA PÓS-ANIMAÇÃO — GSAP faz clearProps após completar
   ============================================================ */
[data-scroll-reveal].sa-done,
[data-scroll-reveal-left].sa-done,
[data-scroll-reveal-right].sa-done,
[data-scroll-reveal-scale].sa-done,
[data-scroll-reveal-flip].sa-done,
[data-scroll-reveal-blur].sa-done,
[data-scroll-reveal-rotate].sa-done,
[data-scroll-stagger] > *.sa-done {
    will-change: auto;
    filter: none;
}

/* ============================================================
   REDUCED MOTION — respeita preferências de acessibilidade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal],
    [data-scroll-reveal-left],
    [data-scroll-reveal-right],
    [data-scroll-reveal-scale],
    [data-scroll-reveal-flip],
    [data-scroll-reveal-blur],
    [data-scroll-reveal-rotate],
    [data-scroll-stagger] > *,
    [data-scroll-clip] > .scroll-clip-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}