/* ===========================
   CSS Animation Library
   =========================== */

/* Fade Animations */
.fade-in {
  animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fadeOut 1s ease forwards;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Slide Animations */
.slide-up {
  animation: slideUp 1s ease forwards;
}
@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-down {
  animation: slideDown 1s ease forwards;
}
@keyframes slideDown {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-left {
  animation: slideLeft 1s ease forwards;
}
@keyframes slideLeft {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-right {
  animation: slideRight 1s ease forwards;
}
@keyframes slideRight {
  from { transform: translateX(-100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Zoom Animations */
.zoom-in {
  animation: zoomIn 1s ease forwards;
}
@keyframes zoomIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.zoom-out {
  animation: zoomOut 1s ease forwards;
}
@keyframes zoomOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.5); opacity: 0; }
}

/* Bounce Animation */
.bounce {
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* Shake Animation */
.shake {
  animation: shake 0.8s linear;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

/* Pulse Animation */
.pulse {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Rotate Animation */
.rotate {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}










/* -----------------  */

/* animations.css - lightweight animation library */
/*.fade-in { animation: fadeIn 0.8s ease forwards; }
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }

.fade-out { animation: fadeOut 0.8s ease forwards; }
@keyframes fadeOut { 0%{opacity:1} 100%{opacity:0} }

.slide-up { animation: slideUp 0.8s ease forwards; }
@keyframes slideUp { 0%{transform:translateY(20px);opacity:0} 100%{transform:translateY(0);opacity:1} }

.slide-down { animation: slideDown 0.8s ease forwards; }
@keyframes slideDown { 0%{transform:translateY(-20px);opacity:0} 100%{transform:translateY(0);opacity:1} }

.slide-left { animation: slideLeft 0.8s ease forwards; }
@keyframes slideLeft { 0%{transform:translateX(20px);opacity:0} 100%{transform:translateX(0);opacity:1} }

.slide-right { animation: slideRight 0.8s ease forwards; }
@keyframes slideRight { 0%{transform:translateX(-20px);opacity:0} 100%{transform:translateX(0);opacity:1} }

.zoom-in { animation: zoomIn 0.8s ease forwards; }
@keyframes zoomIn { 0%{transform:scale(.6);opacity:0} 100%{transform:scale(1);opacity:1} }

.zoom-out { animation: zoomOut 0.8s ease forwards; }
@keyframes zoomOut { 0%{transform:scale(1);opacity:1} 100%{transform:scale(.6);opacity:0} }

.bounce { animation: bounce 1s cubic-bezier(.28,.84,.42,1) both; }
@keyframes bounce { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-30px)} 60%{transform:translateY(-15px)} }

.shake { animation: shake 0.8s linear both; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-10px)} 40%,80%{transform:translateX(10px)} }

.rotate { animation: rotate 1.2s linear infinite; }
@keyframes rotate { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
*/
.hover-zoom { transition: transform .28s ease; }
.hover-zoom:hover { transform: scale(1.05); }

.delay-1 { animation-delay: .2s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .4s; }
.delay-4 { animation-delay: .5s; }
.duration-slow { animation-duration: 1.6s; }
.duration-fast { animation-duration: .5s; }
.infinite { animation-iteration-count: infinite; }

.hovr-to-up:hover{ transition: 0.4s ease-in; transform: scale(1.01) translate(0px, -2px);}