#preloader {
  transition: opacity 500ms ease;
}
/* Разрешаем выход за пределы SVG */
#preloader svg {
  overflow: visible;
  width: 1200px;
  height: 300px;

  @media(width < 1200px) {
    width: 800px;
    height: 200px;
  }
  @media(width < 768px) {
    width: 300px;
    height: 75px;
  }
}
.circle-group {
  transform-origin: 16.5px 17px;
  animation: growCircle 2s ease-out forwards;
}
@keyframes growCircle {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.letters-group {
  opacity: 0;
  animation: fadeIn 1s ease-out 1.5s forwards;
}
.inner-shape {
  opacity: 0;
  animation: fadeIn 0.8s ease-out 2.2s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.letter-group {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}