.logo-box{
  padding-top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.logo {
  width: 160px;
  z-index: 3;
  height: auto;
  opacity: 0;
  transform: scale(0.3);
  animation: fadeZoom 7s ease-out forwards, flicker 4s linear infinite;
}

.tagline {
  margin-top: 20px;
  font-size: 20px;
  z-index: 3;
  font-weight: 300;
  letter-spacing: 3px;
  text-align: center;
  opacity: 0;
  animation: fadeInTag 2.4s ease-out forwards;
  animation-delay: 3.1s;
  color: black;
}

@keyframes fadeZoom {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes flicker {
  0%   { opacity: 1; filter: drop-shadow(0 0 1px rgb(255, 144, 255)); }
  3%   { opacity: 0.4; filter: none; }
  6%   { opacity: 0.9; filter: drop-shadow(0 0 5px rgb(255, 144, 255)); }
  8%   { opacity: 0.2; filter: none; }
  10%  { opacity: 1; filter: drop-shadow(0 0 1px rgb(255, 144, 255)); }
  13%  { opacity: 0.3; filter: none; }
  16%  { opacity: 0.8; filter: drop-shadow(0 0 5px rgb(255, 144, 255)); }
  20%  { opacity: 1; filter: drop-shadow(0 0 1px rgb(255, 144, 255)); }
  25%  { opacity: 0.1; filter: none; }
  30%  { opacity: 0.9; filter: drop-shadow(0 0 5px rgb(255, 144, 255)); }
  38%  { opacity: 0.2; filter: none; }
  45%  { opacity: 1; filter: drop-shadow(0 0 1px rgb(255, 144, 255)); }
  60%  { opacity: 1; filter: drop-shadow(0 0 5px rgb(255, 144, 255)); }
  80%  { opacity: 0.9; filter: drop-shadow(0 0 1px rgb(255, 144, 255)); }
  100% { opacity: 1; filter: drop-shadow(0 0 5px rgb(255, 144, 255)); }
}