.left-ring {
  opacity: 0;
  animation: fadeIn 1.5s 0s ease forwards;
}

.text-simple {
  opacity: 0;
  animation: fadeOut 1s 1.5s ease forwards;
}

.right-ring {
  opacity: 0;
  animation: fadeIn 1.5s 2.5s ease forwards;
}

.text-reliable {
  opacity: 0;
  animation: fadeOut 1s 4s ease forwards;
}

.bottom-ring {
  opacity: 0;
  animation: fadeIn 1.5s 5s ease forwards;
}

.text-secure {
  opacity: 0;
  animation: fadeOut 1s 6.5s ease forwards;
}

.full-logo {
  animation: fadeInAndGrow 3s 7.5s ease forwards;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.rings {
  animation: fadeOut 1s 8.5s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInAndGrow {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  33% {
    opacity: 1;
    transform: scale(1);
  }
  66% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(4);
  }
}