.reveal-up, .reveal-down, .reveal-left, .reveal-right { 
  opacity: 0; 
  will-change: opacity, transform;
}

.reveal-up.is-visible { animation: revealUp 0.8s cubic-bezier(0.5, 0, 0, 1) forwards; }
.reveal-down.is-visible { animation: revealDown 0.8s cubic-bezier(0.5, 0, 0, 1) forwards; }
.reveal-left.is-visible { animation: revealLeft 0.8s cubic-bezier(0.5, 0, 0, 1) forwards; }
.reveal-right.is-visible { animation: revealRight 0.8s cubic-bezier(0.5, 0, 0, 1) forwards; }

@keyframes revealUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes revealRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

.pulse { animation: pulse 1.8s ease infinite; }
@keyframes countUp { from { opacity: .2; } to { opacity: 1; } }
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.03);} }

@keyframes infiniteScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}