/* =========================
   ANIMAÇÕES MODERNAS
========================= */

/* Variáveis para facilitar manutenção */
:root {
  --anime-duration: 0.8s;
  --anime-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easing mais moderno */
  --anime-distance: 60px;
}

/* Estado inicial */
[data-anime] {
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.98);
  transition:
    opacity var(--anime-duration) var(--anime-ease),
    transform var(--anime-duration) var(--anime-ease);
  will-change: opacity, transform;
}

/* Direções */
[data-anime="left"] {
  transform: translate3d(calc(-1 * var(--anime-distance)), 0, 0) scale(0.98);
}

[data-anime="right"] {
  transform: translate3d(var(--anime-distance), 0, 0) scale(0.98);
}

[data-anime="top"] {
  transform: translate3d(0, calc(-1 * var(--anime-distance)), 0) scale(0.98);
}

[data-anime="down"] {
  transform: translate3d(0, var(--anime-distance), 0) scale(0.98);
}

/* Estado ativo */
[data-anime].animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* =========================
   MELHORIAS VISUAIS OPCIONAIS
========================= */

/* Fade com leve blur (efeito moderno) */
[data-anime].animate {
  filter: blur(0);
}

[data-anime] {
  filter: blur(6px);
  transition:
    opacity var(--anime-duration) var(--anime-ease),
    transform var(--anime-duration) var(--anime-ease),
    filter var(--anime-duration) var(--anime-ease);
}

/* =========================
   MOBILE (mais fluido)
========================= */

@media (max-width: 480px) {
  .container {
    overflow-x: hidden;
  }

  /* Reduz intensidade ao invés de remover */
  :root {
    --anime-distance: 20px;
  }

  [data-anime] {
    filter: none; /* remove blur para performance */
  }
}

/* =========================
   ACESSIBILIDADE
========================= */

/* Usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  [data-anime] {
    transition: none;
    transform: none;
    opacity: 1;
    filter: none;
  }
}