@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(-20%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(25%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes floating-element {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.05); }
  100% { transform: scale(0.8); }
}

@keyframes floating {
  0% { transform: translate(0, 0); }
  25% { transform: translate(5px, -10px); }
  50% { transform: translate(0, -20px); }
  75% { transform: translate(-5px, -10px); }
  100% { transform: translate(0, 0); }
}

.fade-in,
.slide-up-5s,
.slide-up-3s,
.slide-left-3s,
.slide-left-5s,
.slide-right-3s,
.slide-right-5s,
.floating-element,
.floating {
  position: relative;
  will-change: transform, opacity;
}

.fade-in {
  animation: fade-in 3s ease-in-out forwards;
}

.slide-up-5s {
  animation: slide-up 5s forwards;
}

.slide-up-3s {
  animation: slide-up 3s ease-in-out forwards;
}

.slide-left-3s {
  animation: slide-left 3s ease-in-out forwards;
}
.slide-left-5s {
  animation: slide-left 5s forwards;
}

.slide-right-3s {
  animation: slide-right 3s ease-in-out forwards;
}
.slide-right-5s {
  animation: slide-right 5s forwards;
}

.floating-element {
  animation: floating-element 4s ease-in-out infinite;
}

.floating {
  animation: floating 4s ease-in-out infinite;
}

.hidden-element {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
}