.contact-title-intro {
  animation: slide-title-intro 0.85s ease-in-out 0s 1 normal forwards;
  opacity: 0;
}

.contact-form-inputs-intro {
  animation: contact-form-inputs-intro 0.575s cubic-bezier(0.17, 0.67, 0.57, 0.99) 0.55s 1 normal forwards;
  opacity: 0;
}

@keyframes contact-form-inputs-intro {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: scale(0);
  }
  100% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: scale(1);
  }
}

.contact-form-button-intro {
  animation: contact-form-button-intro 1.3s ease-out 1.3s 1 normal forwards;
  filter: none;
  opacity: 0;
}

@keyframes contact-form-button-intro {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}

@media (hover: hover) {
  #contact-form button:hover {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0, 0.25) 100%), rgb(255, 255, 255);
    cursor: pointer;
    text-shadow: 0px 0px 6px #f7f6f6d5;
  }
}

.contact-info-bubble-open {
  animation: contact-info-bubble-open 0.5s ease-out 0s 1 normal forwards;
  opacity: 0;
}

@keyframes contact-info-bubble-open {
  0% {
    filter: blur(8px);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.contact-info-bubble-close {
  animation: contact-info-bubble-close 0.75s cubic-bezier(0.29, 0.45, 0.67, 0.85) 0s 1 normal forwards;
  opacity: 1;
}

@keyframes contact-info-bubble-close {
  0% {
    opacity: 1;
  }
  100% {
    filter: blur(8px);
    opacity: 0;
  }
}