/* ===========================================================================
   ANIMAÇÕES — Papaléguas Fogões
   ---------------------------------------------------------------------------
   REGRA DE OURO DESTE ARQUIVO, aprendida a duras penas na caça ao piscar:

   1. Só mexer em `opacity` e `transform`. Nada de `filter`, `backdrop-filter`,
      sombra animada, largura, altura ou posição.
   2. NENHUMA animação infinita no celular. Animação que nunca acaba mantém o
      processador gráfico acordado para sempre — foi exatamente isso que fazia
      a tela piscar. Tudo aqui roda UMA vez e para.
   3. Nada de `will-change`. São 137 produtos na tela; marcar todos criaria 137
      camadas de GPU de uma vez, que é o mesmo problema com outro nome. O
      navegador promove sozinho só o que está animando naquele instante.
   4. O estado escondido está escrito com `:not(.anim-feito)`. Quando a entrada
      termina, o JS põe `anim-feito` e as regras deixam de valer: o elemento
      volta ao estado natural, sem transição declarada e sem camada sobrando.
   5. O estado escondido é aplicado por SELETOR, não por classe posta pelo JS.
      Assim ele já vale na primeira pintura e o conteúdo não chega a aparecer
      antes de esconder (que seria um piscar novo, criado por mim).

   Para desligar tudo de uma vez: remova o <link> deste arquivo no base.html.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Quem pediu menos movimento no sistema não vê nada disso.
   Acessibilidade — e escape para quem tem enjoo de movimento.
   (A raiz `anim-ligado` também nem é posta nesse caso; isto aqui é o cinto
   de segurança para as animações que já existiam no site.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   1. ENTRADA POR ROLAGEM — estado escondido
   `anim-ligado` só existe se o JS confirmou que consegue revelar. Sem JS, ou
   com o observador indisponível, nada aqui vale e o site aparece normal.
   --------------------------------------------------------------------------- */
html.anim-ligado .prod-card:not(.anim-feito),
html.anim-ligado .video-card:not(.anim-feito),
html.anim-ligado .catalog-videos-section > h3:not(.anim-feito),
html.anim-ligado .filter-bar:not(.anim-feito),
html.anim-ligado .cat-chips:not(.anim-feito),
html.anim-ligado .mascot-sidebar-card:not(.anim-feito),
html.anim-ligado .section-title:not(.reveal):not(.anim-feito),
html.anim-ligado .section-sub:not(.reveal):not(.anim-feito),
html.anim-ligado .glass-card:not(.reveal):not(.anim-feito),
html.anim-ligado .timeline-card:not(.reveal):not(.anim-feito),
html.anim-ligado .stat-item:not(.reveal):not(.anim-feito),
html.anim-ligado .footer .row > div:not(.anim-feito) {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   2. ENTRADA POR ROLAGEM — estado revelado
   --------------------------------------------------------------------------- */
html.anim-ligado .prod-card.anim-visivel:not(.anim-feito),
html.anim-ligado .video-card.anim-visivel:not(.anim-feito),
html.anim-ligado .catalog-videos-section > h3.anim-visivel:not(.anim-feito),
html.anim-ligado .filter-bar.anim-visivel:not(.anim-feito),
html.anim-ligado .cat-chips.anim-visivel:not(.anim-feito),
html.anim-ligado .mascot-sidebar-card.anim-visivel:not(.anim-feito),
html.anim-ligado .section-title.anim-visivel:not(.anim-feito),
html.anim-ligado .section-sub.anim-visivel:not(.anim-feito),
html.anim-ligado .glass-card.anim-visivel:not(.anim-feito),
html.anim-ligado .timeline-card.anim-visivel:not(.anim-feito),
html.anim-ligado .stat-item.anim-visivel:not(.anim-feito),
html.anim-ligado .footer .row > div.anim-visivel:not(.anim-feito) {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------------------
   3. HERO NO CELULAR
   As entradas do hero estavam desligadas em bloco no celular (style.css:918).
   Aquilo matava `animation`, e com razão: `fadeInUp ... both` fica congelada no
   fim, segurando a camada para sempre. Aqui a entrada é por `transition`, que
   o JS limpa quando acaba — mesmo efeito, sem o resíduo.

   No computador o hero já anima sozinho pelo style.css; por isso estas regras
   valem SÓ quando a raiz está marcada como celular.
   --------------------------------------------------------------------------- */
html.anim-ligado.mobile-device .hero-badge-wrap:not(.anim-feito),
html.anim-ligado.mobile-device .hero-title:not(.anim-feito),
html.anim-ligado.mobile-device .hero-sub:not(.anim-feito),
html.anim-ligado.mobile-device .hero-actions:not(.anim-feito),
html.anim-ligado.mobile-device .mascot-hero-wrap:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-badge-wrap:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-title:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-sub:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-actions:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .mascot-hero-wrap:not(.anim-feito) {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.anim-ligado.mobile-device .hero-badge-wrap.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-device .hero-title.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-device .hero-sub.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-device .hero-actions.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-device .mascot-hero-wrap.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-badge-wrap.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-title.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-sub.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .hero-actions.anim-visivel:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .mascot-hero-wrap.anim-visivel:not(.anim-feito) {
    opacity: 1;
    transform: none;
}

/* No celular, o deslocamento da entrada geral também fica menor: tela pequena,
   movimento menor, senão vira sacudida. */
html.anim-ligado.mobile-device .prod-card:not(.anim-feito),
html.anim-ligado.mobile-device .video-card:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .prod-card:not(.anim-feito),
html.anim-ligado.mobile-iframe-view .video-card:not(.anim-feito) {
    transform: translateY(16px);
}

/* O tapinha no mascote continua valendo no celular: é resposta ao toque, dura
   0,6 s e termina. O que segue proibido no celular é a respiração infinita. */
html.mobile-device .mascot-hero.mascot-clicked,
html.mobile-iframe-view .mascot-hero.mascot-clicked {
    animation: mascot-wiggle 0.6s ease-in-out !important;
}

/* ---------------------------------------------------------------------------
   4. BARRA DO TOPO — encolhe ao rolar
   Só muda no instante em que cruza o limite, não a cada quadro.
   --------------------------------------------------------------------------- */
.navbar {
    transition: padding 0.28s ease, box-shadow 0.28s ease;
}

.navbar .navbar-brand img {
    transition: transform 0.28s ease;
    transform-origin: left center;
}

.navbar.navbar-rolada {
    padding: 3px 0;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

.navbar.navbar-rolada .navbar-brand img {
    transform: scale(0.86);
}

/* ---------------------------------------------------------------------------
   5. RESPOSTA AO TOQUE
   No celular não existe "passar o mouse por cima". Sem isto, tocar num produto
   não devolve nada e a página parece travada. Só em aparelhos sem mouse, para
   não atrapalhar o efeito de levantar do computador.
   --------------------------------------------------------------------------- */
@media (hover: none) {

    .prod-card,
    .video-card,
    .chip,
    .sub-chip,
    .btn-glow,
    .btn-glass,
    .btn-cta,
    .glass-card,
    .modal-thumb,
    .navbar .btn-primary {
        transition: transform 0.12s ease-out;
    }

    .prod-card:active,
    .video-card:active,
    .glass-card:active {
        transform: scale(0.975);
    }

    .chip:active,
    .sub-chip:active,
    .btn-glow:active,
    .btn-glass:active,
    .btn-cta:active,
    .modal-thumb:active,
    .navbar .btn-primary:active {
        transform: scale(0.94);
    }
}

/* ---------------------------------------------------------------------------
   6. CATÁLOGO — filtros e contagem
   --------------------------------------------------------------------------- */
.chip,
.sub-chip {
    transition: background-color 0.2s ease, color 0.2s ease,
        border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ao escolher uma categoria, o botão dá um pulinho de confirmação. */
@keyframes anim-chip-confirma {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.09);
    }

    100% {
        transform: scale(1);
    }
}

.chip.anim-confirma,
.sub-chip.anim-confirma {
    animation: anim-chip-confirma 0.32s ease-out;
}

/* O número de produtos trocando: some e volta, para o olho perceber que mudou. */
.filter-count {
    transition: opacity 0.18s ease;
}

.filter-count.anim-trocando {
    opacity: 0;
}

/* Cartão de produto no computador: o levantar já existia, aqui só o tempo fica
   mais natural (a curva antiga era linear demais no fim). */
@media (hover: hover) {
    .prod-card {
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.35s ease, border-color 0.35s ease;
    }
}

/* ---------------------------------------------------------------------------
   7. RODAPÉ — links e ícones
   --------------------------------------------------------------------------- */
.social-links a {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.25s ease, color 0.25s ease;
}

.contact-list .contato-link {
    display: inline-block;
    transition: color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .social-links a:hover {
        transform: translateY(-3px) scale(1.08);
    }

    .contact-list .contato-link:hover {
        transform: translateX(3px);
    }
}

/* ---------------------------------------------------------------------------
   8. MINIATURAS DA JANELA DE PRODUTO
   --------------------------------------------------------------------------- */
.modal-thumb {
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

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