/* ==========================================================================
   ANIMATIONS CSS — SIVONALDO JÚNIOR ADVOGADOS
   Sistema de animações de entrada cinematográficas e reutilizáveis
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS DE ANIMAÇÃO & CURVAS DE TRANSIÇÃO
   -------------------------------------------------------------------------- */
:root {
    --anim-ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
    --anim-duration-default: 0.85s;
    --anim-distance-default: 32px;
}

@media (max-width: 768px) {
    :root {
        --anim-duration-default: 0.7s;
        --anim-distance-default: 20px;
    }
}

/* --------------------------------------------------------------------------
   2. ACESSIBILIDADE & FALLBACK
   -------------------------------------------------------------------------- */

/* Fallback: quando JS está desativado (sem classe .js), tudo fica 100% visível */
html:not(.js) [data-anim],
html:not(.js) .reveal-mask-inner,
html:not(.js) .anim-line-inner,
html:not(.js) .anim-hero-stagger {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    visibility: visible !important;
}

/* Usuários que preferem redução de movimento: exibe tudo imediatamente */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    [data-anim],
    .reveal-mask-inner,
    .anim-line-inner,
    .anim-hero-stagger {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        visibility: visible !important;
    }
}

/* --------------------------------------------------------------------------
   3. ESTRUTURA PARA REVELAÇÃO POR MÁSCARA EDITORIAL (REVEAL-MASK / REVEAL-LINE)
   -------------------------------------------------------------------------- */
.reveal-mask-wrap {
    overflow: hidden;
    display: block;
    position: relative;
}

.reveal-mask-inner {
    display: block;
    will-change: transform;
}

.anim-line-mask {
    overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
}

.anim-line-inner {
    display: inline-block;
    width: 100%;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   4. CORTINAS CLIP-PATH (CLIP-REVEAL)
   -------------------------------------------------------------------------- */
[data-anim="clip-reveal-left"],
[data-anim="clip-reveal-right"],
[data-anim="clip-reveal-up"],
.clip-reveal-left,
.clip-reveal-right,
.clip-reveal-up {
    position: relative;
    overflow: hidden;
    background-color: transparent;
}

[data-anim="clip-reveal-left"] img,
[data-anim="clip-reveal-right"] img,
[data-anim="clip-reveal-up"] img,
.clip-reveal-left img,
.clip-reveal-right img,
.clip-reveal-up img {
    will-change: transform;
}

/* --------------------------------------------------------------------------
   5. AJUSTES FINOS DE RENDERIZAÇÃO
   -------------------------------------------------------------------------- */
[data-anim] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Evitar que wrappers interfiram no fluxo de grid flexível */
.hero-cta-group.anim-stagger-group,
.pillars-grid.anim-stagger-group,
.team-grid.anim-stagger-group,
.stats-grid.anim-stagger-group,
.services-grid.anim-stagger-group,
.footer-grid.anim-stagger-group {
    perspective: 1000px;
}