/* ============================================
   ANIMAÇÕES DE SCROLL
   Adicione este CSS no final do seu style.css
   ============================================ */

/* Elementos que vão animar ao scroll */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Quando o elemento entra na tela */
.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Animação de fade simples (apenas aparecer) */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in.active {
  opacity: 1;
}

/* Animação vindo da esquerda */
.slide-left {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Animação vindo da direita */
.slide-right {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Animação de escala (crescer) */
.scale-up {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-up.active {
  opacity: 1;
  transform: scale(1);
}

/* Animação especial para títulos */
.title-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.title-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Animação de linha crescendo */
.line-grow {
  width: 0;
  height: 3px;
  background: var(--primary, #0066cc);
  margin: 20px auto;
  transition: width 0.8s ease;
}

.line-grow.active {
  width: 100px;
}

/* Animação para o mapa */
.map-reveal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.map-reveal.active {
  opacity: 1;
  transform: scale(1);
}

/* Animação rotação suave */
.rotate-in {
  opacity: 0;
  transform: rotate(-5deg) scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rotate-in.active {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Remove animações em dispositivos que preferem sem movimento */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .fade-in,
  .slide-left,
  .slide-right,
  .scale-up,
  .title-reveal,
  .map-reveal,
  .rotate-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}