/*
 * Email Marketing page only.
 *
 * Shared service-page styles are in services-common.css (including the
 * .card-glow-hover cards and the .animated-dotted-line connector this page
 * also uses); utilities come from main.css. Nothing from those files is
 * repeated here.
 */

/* Feature tiles that draw an inner yellow ring on hover. */
.hover-yellow-inner {
  transition: all 0.3s ease !important;
}

.hover-yellow-inner:hover {
  border-color: #ffc001 !important;
  box-shadow:
    inset 0 0 0 2px #ffc001,
    0 10px 25px rgba(255, 192, 1, 0.15) !important;
}

/* Decorative paper plane that glides in behind the hero, then hovers. */
@keyframes airplaneGlideIn {
  0% {
    transform: translateX(-800px) translateY(-20%);
    opacity: 0;
  }
  30% {
    opacity: 0.08;
  }
  100% {
    transform: translateX(0) translateY(-50%);
    opacity: 0.08;
  }
}

@keyframes airplaneFloat {
  0% {
    transform: translateX(0) translateY(-50%);
    opacity: 0.08;
  }
  50% {
    transform: translateX(0) translateY(calc(-50% - 20px));
    opacity: 0.08;
  }
  100% {
    transform: translateX(0) translateY(-50%);
    opacity: 0.08;
  }
}

.airplane-animate {
  animation:
    airplaneGlideIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    airplaneFloat 4s 1.5s ease-in-out infinite !important;
}