/* Custom Animations for Reveal on Scroll */
@keyframes heroFade {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes heroSlide {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-hero-fade { animation: heroFade 1s ease-out forwards; }
.animate-hero-slide { animation: heroSlide 1s ease-out 0.5s forwards; opacity: 0; }
.animate-hero-reveal { animation: heroReveal 1.2s ease-out 1s forwards; opacity: 0; }

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1s ease-out;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 1s ease-out;
}

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