/* Определение анимации */
@keyframes slide-left {
  from {
    transform: translateX(-100vw); /* Старт с -100% по оси X, чтобы меню было скрыто */
    opacity: 0; /* Начальная прозрачность для плавного появления */
  }
  to {
    transform: translateX(0vw); /* Конечное положение: на месте */
    opacity: 1; /* Полная видимость */
  }
}

@keyframes appear-opacity {
  from {
    opacity: 0; /* Начальная прозрачность для плавного появления */
  }
  to {
    opacity: 1; /* Полная видимость */
  }
}

.appear-opacity-100 {
  animation: appear-opacity 0.1s ease-out forwards;
}

.appear-opacity-200 {
  animation: appear-opacity 0.2s ease-out forwards;
}

.appear-opacity-300 {
  animation: appear-opacity 0.3s ease-out forwards;
}

.appear-opacity-400 {
  animation: appear-opacity 0.4s ease-out forwards;
}

.appear-opacity-500 {
  animation: appear-opacity 0.5s ease-out forwards;
}

.appear-opacity-600 {
  animation: appear-opacity 0.6s ease-out forwards;
}

.appear-opacity-700 {
  animation: appear-opacity 0.7s ease-out forwards;
}

.appear-opacity-800 {
  animation: appear-opacity 0.8s ease-out forwards;
}

.appear-opacity-900 {
  animation: appear-opacity 0.9s ease-out forwards;
}

.slide-left-100 {
  animation: slide-left 0.1s ease-out forwards;
}

.slide-left-200 {
  animation: slide-left 0.2s ease-out forwards;
}

.slide-left-300 {
  animation: slide-left 0.3s ease-out forwards;
}

.slide-left-400 {
  animation: slide-left 0.4s ease-out forwards;
}

.slide-left-500 {
  animation: slide-left 0.5s ease-out forwards;
}

.slide-left-600 {
  animation: slide-left 0.6s ease-out forwards;
}

.slide-left-700 {
  animation: slide-left 0.7s ease-out forwards;
}

.slide-left-800 {
  animation: slide-left 0.8s ease-out forwards;
}

.slide-left-900 {
  animation: slide-left 0.9s ease-out forwards;
}