/* =========================================
   Animations — Mapzer
   Arquivo separado, opcional e discreto.
   Basta incluir este .css e o animations.js
   para ativar. Remover os dois arquivos
   desfaz tudo, sem tocar no restante do site.

   NOTA IMPORTANTE SOBRE `transition`:
   Quando um elemento tem duas classes que
   declaram `transition` (ex.: .anim-reveal e
   .card), o navegador NÃO soma as duas listas —
   ele usa só uma por completo (a de maior
   especificidade; empatando, a que vier depois
   no arquivo). Por isso, sempre que um elemento
   pode ter reveal-ao-rolar E hover ao mesmo
   tempo, existe uma regra combinada abaixo
   (ex.: .card.anim-reveal) juntando as duas
   listas manualmente. Se adicionar um novo hover
   em algum elemento que também leva .anim-reveal,
   repita esse padrão.
========================================= */

/* -----------------------------------------
   Reveal ao rolar a página
   (aplicado via JS com IntersectionObserver)
----------------------------------------- */
.anim-reveal {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.6s ease, translate 0.6s ease;
    will-change: opacity, translate;
}

.anim-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* Variação mais rápida, usada em títulos (h2) e badges —
   veja setupScrollReveal() no animations.js */
.anim-reveal-fast {
    transition-duration: 0.3s;
}

/* Atraso escalonado para grupos de cards/colunas.
   Os dois primeiros valores (opacity, translate) recebem
   o atraso; o restante (transições de hover) fica com 0s
   para não atrasar o hover depois da entrada. O número de
   valores aqui é o maior usado nas regras combinadas abaixo
   (.card-services.anim-reveal tem 5) — valores extras além
   do necessário são simplesmente ignorados pelo CSS. */
.anim-reveal-stagger.is-visible {
    transition-delay: var(--anim-delay, 0s), var(--anim-delay, 0s), 0s, 0s, 0s;
}

/* -----------------------------------------
   Cards: leve elevação no hover
----------------------------------------- */
.card {
    transition: transform 1s ease, box-shadow 1s ease;
}

/* Hovers com transform só em dispositivos com ponteiro de verdade:
   no touch o :hover "gruda" após o toque e o card fica elevado */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }
}

/* Combinação reveal + hover para quando o card também
   está sendo observado pelo scroll-reveal. */
.card.anim-reveal {
    transition: opacity 0.6s ease, translate 0.6s ease, transform 1s ease, box-shadow 1s ease;
}

/* -----------------------------------------
   Botões: micro-interação no hover
----------------------------------------- */
.btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .btn:hover {
        transform: translateY(-2px);
    }
}

.btn:active {
    transform: translateY(0);
}

/* Seletor de idioma: sem animação de hover/active */
.dropdown-toggle.btn-link {
    transition: none;
}

.dropdown-toggle.btn-link:hover,
.dropdown-toggle.btn-link:active {
    transform: none;
}

/* -----------------------------------------
   Navbar: sombra sutil ao rolar
----------------------------------------- */
#mainNav {
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

#mainNav.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------
   Ícones de card: leve "pulso" no hover do card
----------------------------------------- */
.card-icon {
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
    .content .card:hover .card-body .card-icon,
    .card:hover .card-icon {
        transform: scale(1.08);
        color: #36A9E1;
    }
}

/* -----------------------------------------
   Card-features: mesma elevação do .card.
   (não tinha transition própria no custom.css,
   então declaramos aqui sem risco de conflito)
----------------------------------------- */
.card-features {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .card-features:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .card-features:hover .card-icon {
        transform: scale(1.08);
        /* já nasce #36A9E1 — não precisa mudar de cor */
    }
}

.card-features.anim-reveal {
    transition: opacity 0.6s ease, translate 0.6s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* -----------------------------------------
   Card-services: já tem "transition: 0.2s ease"
   (todas as propriedades) no custom.css. Fora do
   reveal isso já é suficiente pra animar o hover;
   quando o elemento também tem .anim-reveal,
   precisamos de uma versão combinada explícita
   (por isso o background-color entra na lista).
----------------------------------------- */
@media (hover: hover) {
    .card-services:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    .card-services:hover .card-header .card-icon {
        transform: scale(1.08);
        color: #36A9E1;
        opacity: 1;
    }
}

.card-services.anim-reveal {
    transition: opacity 0.6s ease, translate 0.6s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.card-services.anim-reveal:hover {
    transition: opacity 0.6s ease, translate 0.6s ease, transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* -----------------------------------------
   Botão "voltar ao topo": entrada suave
----------------------------------------- */
#backToTop {
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 0;
    transform: translateY(8px);
}

#backToTop.anim-show {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------
   Respeita quem prefere menos movimento
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .anim-reveal,
    .card,
    .card-features,
    .card-services,
    .btn,
    #mainNav,
    .card-icon,
    #backToTop {
        transition: none !important;
        transform: none !important;
        translate: 0 !important;
        opacity: 1 !important;
    }
}