/* The email and phone marks share one fixed visual slot in the 44px icon column. */
body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child {
  position: relative;
  overflow: hidden;
}

body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] [data-hero-icon="true"],
body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child::after {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  will-change: top, opacity;
}

body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] [data-hero-icon="true"] {
  animation: heed-contact-mail-cycle 6s linear infinite !important;
}

body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child::after {
  animation: heed-contact-phone-cycle 6s linear infinite !important;
}

/* Each handoff occupies 7% of the cycle (420ms). Only one mark is visible at a time. */
@keyframes heed-contact-mail-cycle {
  0%, 42% { top: 0; opacity: 1; }
  42% { animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  45.5% { top: -20px; opacity: 0; }
  45.51%, 95.5% { top: 20px; opacity: 0; }
  95.5% { animation-timing-function: cubic-bezier(0, 0, .2, 1); }
  99%, 100% { top: 0; opacity: 1; }
}

@keyframes heed-contact-phone-cycle {
  0%, 45.5% { top: 20px; opacity: 0; }
  45.5% { animation-timing-function: cubic-bezier(0, 0, .2, 1); }
  49%, 92% { top: 0; opacity: 1; }
  92% { animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  95.5% { top: -20px; opacity: 0; }
  95.51%, 100% { top: 20px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child {
    overflow: visible;
  }

  body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] [data-hero-icon="true"],
  body.heed-luxury #top .heed-hero-product[data-hero-product="contacts"] > span:first-child::after {
    position: static !important;
    top: auto !important;
    opacity: 1 !important;
    animation: none !important;
    will-change: auto;
  }
}
