html {
  scroll-behavior: smooth;
}

/* Classes base para animações */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px); /* Slide-in padrão */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.fade-in {
  transform: none; /* Fade-in puro */
}

.animate-on-scroll.slide-in-left {
  transform: translateX(-50px);
}

.animate-on-scroll.zoom {
  transform: scale(0.8);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: none; /* Reseta para posição final */
}

/* Exemplo: Aplicar a seções */
section {
  /* Adicione classes como 'animate-on-scroll slide-in-left' nas tags <section> */
}

/* Botões */
button, .btn {
  transition: all 0.3s ease;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  background-color: #007bff; /* Ajuste para cor do seu site */
}

/* Links */
a {
  transition: color 0.3s ease;
}

a:hover {
  color: #007bff; /* Ajuste para cor do seu site */
}

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh; /* Ajuste altura */
  position: relative;
}

.parallax::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: translateZ(0); /* Força aceleração de hardware */
}

nav ul li a {
  transition: all 0.3s ease;
  position: relative;
}

nav ul li a:hover {
  transform: scale(1.05);
  color: #007bff; /* Ajuste cor */
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease;
}

nav ul li a:hover::after {
  width: 100%;
}