/* PAGINA: todas */
/* ============================================================
   SCROLL ANIMATION / ON-SCROLL REVEAL EFFECT
   Fade-in on Scroll · Fade-up · Fade-left · Fade-right
   ------------------------------------------------------------
   Como usar:
   1) Adicione um destes atributos no elemento HTML que você
      quer animar:
        data-reveal="fade-up"
        data-reveal="fade-down"
        data-reveal="fade-left"
        data-reveal="fade-right"
        data-reveal="fade-in"     (só opacidade, sem deslocar)

   2) (Opcional, mas recomendado) Adicione um atraso escalonado
      entre elementos de um mesmo grupo (ex: cards) com:
        data-reveal-delay="1"   -> 0.1s
        data-reveal-delay="2"   -> 0.2s
        data-reveal-delay="3"   -> 0.3s
        ... até "6"

   3) Este CSS sozinho já anima em navegadores modernos que
      suportam "animation-timeline: view()" (Chrome/Edge 115+).
      Para funcionar em TODOS os navegadores (Firefox, Safari
      inclusos), adicione este pequeno JS antes do </body>:

      <script>
      document.addEventListener('DOMContentLoaded', function () {
        var els = document.querySelectorAll('[data-reveal]');
        var io = new IntersectionObserver(function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              entry.target.classList.add('is-visible');
              io.unobserve(entry.target);
            }
          });
        }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
        els.forEach(function (el) { io.observe(el); });
      });
      </script>
   ============================================================ */

:root {
  --reveal-duration: 0.9s;
  --reveal-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --reveal-distance: 48px;
  --reveal-distance-sm: 24px;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Estado inicial (oculto) ---------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
}

[data-reveal="fade-up"] {
  transform: translate3d(0, var(--reveal-distance), 0);
}

[data-reveal="fade-down"] {
  transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
}

[data-reveal="fade-left"] {
  transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

[data-reveal="fade-right"] {
  transform: translate3d(var(--reveal-distance), 0, 0);
}

[data-reveal="fade-in"] {
  transform: none;
}

/* ---------- Estado final (visível) ----------
   Ativado via JS quando o elemento entra na viewport
   (classe adicionada pelo IntersectionObserver do snippet acima) */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- Atrasos escalonados (efeito cascata) ---------- */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }

/* ============================================================
   FALLBACK 100% CSS (sem necessidade de JS)
   Usa "Scroll-driven Animations" nativas do CSS.
   Suporte atual: Chrome/Edge 115+. Em navegadores sem suporte,
   o bloco acima (com data-reveal + is-visible via JS) assume.
   ============================================================ */
@supports (animation-timeline: view()) {
  [data-reveal] {
    opacity: 0;
    animation-duration: 1ms; /* controlado pela timeline, não pelo tempo real */
    animation-timing-function: var(--reveal-easing);
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    transition: none;
  }

  [data-reveal="fade-up"] {
    animation-name: reveal-fade-up;
  }
  [data-reveal="fade-down"] {
    animation-name: reveal-fade-down;
  }
  [data-reveal="fade-left"] {
    animation-name: reveal-fade-left;
  }
  [data-reveal="fade-right"] {
    animation-name: reveal-fade-right;
  }
  [data-reveal="fade-in"] {
    animation-name: reveal-fade-in;
  }

  /* Nesses navegadores o "is-visible" do JS não é necessário,
     mas não atrapalha caso o script também esteja presente */
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes reveal-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--reveal-distance) * -1), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes reveal-fade-left {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes reveal-fade-right {
  from {
    opacity: 0;
    transform: translate3d(var(--reveal-distance), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes reveal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Ajuste fino para telas pequenas (menos deslocamento) ---------- */
@media (max-width: 600px) {
  :root {
    --reveal-distance: var(--reveal-distance-sm);
  }
}

/* ============================================================
   VERSÃO EM CLASSES CSS (para usar no editor do WordPress/WooCommerce)
   ------------------------------------------------------------
   No editor de blocos (Gutenberg), selecione o bloco desejado
   (parágrafo, imagem, colunas, produto, etc.), abra o painel
   lateral direito > "Avançado" > "Classe(s) CSS adicional(is)"
   e digite uma das classes abaixo:

       fade-up        fade-down
       fade-left      fade-right
       fade-in

   Para atraso em cascata (ex: cards de produto lado a lado),
   combine com: delay-1, delay-2, delay-3, delay-4, delay-5, delay-6
   Exemplo no campo "Classe(s) CSS adicional(is)": fade-up delay-2
   ============================================================ */

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-in {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
}

.fade-up    { transform: translate3d(0, var(--reveal-distance), 0); }
.fade-down  { transform: translate3d(0, calc(var(--reveal-distance) * -1), 0); }
.fade-left  { transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0); }
.fade-right { transform: translate3d(var(--reveal-distance), 0, 0); }
.fade-in    { transform: none; }

.fade-up.is-visible,
.fade-down.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

@supports (animation-timeline: view()) {
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .fade-in {
    opacity: 0;
    animation-duration: 1ms;
    animation-timing-function: var(--reveal-easing);
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    transition: none;
  }
  .fade-up    { animation-name: reveal-fade-up; }
  .fade-down  { animation-name: reveal-fade-down; }
  .fade-left  { animation-name: reveal-fade-left; }
  .fade-right { animation-name: reveal-fade-right; }
  .fade-in    { animation-name: reveal-fade-in; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}