#contact-page {
  opacity: 0;
  transform: translateY(30px);
}

#contact-page.animation-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}

#contact-page .contact-left-animation {
  opacity: 0;
  transform: translateX(-35px);
}

#contact-page.animation-ready .contact-left-animation {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
  transition-delay: 0.1s;
}

#contact-page .contact-right-animation {
  opacity: 0;
  transform: translateX(35px);
}

#contact-page.animation-ready .contact-right-animation {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
  transition-delay: 0.2s;
}

#contact-page .contact-box-animation {
  opacity: 0;
  transform: translateY(25px);
}

#contact-page.animation-ready .contact-box-animation {
  opacity: 1;
  transform: translateY(0);
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

#contact-page .contact-right-animation {
  position: relative;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

#contact-page .contact-right-animation::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mouse-x) var(--mouse-y), rgba(247,107,28,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#contact-page .contact-right-animation:hover::before {
  opacity: 1;
}

#contact-page .field-active input,
#contact-page .field-active textarea,
#contact-page .field-active select {
  border-color: var(--orange);
  transition: border-color 0.25s ease;
}