/* Utility Animation Classes */
.animate {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}
.fade-in   { animation-name: fadeIn; }
.slide-up  { animation-name: slideUp; }
.slide-down{ animation-name: slideDown; }
.slide-left{ animation-name: slideLeft; }
.slide-right{ animation-name: slideRight; }
.zoom-in   { animation-name: zoomIn; }

/* Delays */
.delay-1 { animation-delay: .2s; }
.delay-2 { animation-delay: .4s; }
.delay-3 { animation-delay: .6s; }
.delay-4 { animation-delay: .8s; }
.delay-5 { animation-delay: 1s; }

/* Keyframes */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideUp { from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideDown { from {opacity:0; transform:translateY(-50px);} to {opacity:1; transform:translateY(0);} }
@keyframes slideLeft { from {opacity:0; transform:translateX(50px);} to {opacity:1; transform:translateX(0);} }
@keyframes slideRight { from {opacity:0; transform:translateX(-50px);} to {opacity:1; transform:translateX(0);} }
@keyframes zoomIn { from {opacity:0; transform:scale(0.8);} to {opacity:1; transform:scale(1);} }
@keyframes cardPulse { 0%{transform:translateY(0) scale(1);} 50%{transform:translateY(-5px) scale(1.03);} 100%{transform:translateY(0) scale(1);} }