#hope-loader {
  /* Already full screen and centered via Tailwind */
  z-index: 9999 !important;
  background: #fff !important;
}

.hope-logo {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 5rem;
  font-weight: bold;
  opacity: 0;
  position: relative;
  z-index: 10;
  transition: transform 1.4s cubic-bezier(.77,0,.18,1), opacity 0.8s;
}

.hope-left {
  transform: translateX(-100px);
}

.hope-right {
  transform: translateX(100px);
}

.hope-logo.in {
  opacity: 1;
  transform: translateX(0);
}

.hope-logo-border {
  position: absolute;
  top: -0.5em; left: -0.5em; right: -0.5em; bottom: -0.5em;
  border: 2px solid #222;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.6s;
}

.hope-logo-border.in {
  animation: border-draw 1.6s cubic-bezier(.77,0,.18,1) forwards;
  opacity: 1;
}

@keyframes border-draw {
  0% {
    clip-path: inset(0 100% 100% 0);
  }
  25% {
    clip-path: inset(0 0 100% 0);
  }
  50% {
    clip-path: inset(0 0 0 100%);
  }
  75% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 600px) {
  .hope-logo {
    font-size: 2.5rem;
  }
}