/* A small journey lives beside the contact heading, outside the form. */
.contact-heading { grid-template-columns: max-content minmax(0,1fr); align-items: center; column-gap: 24px; }
.contact-heading .profile-heading { grid-column: 1; grid-row: 1; }
.contact-introduction { grid-column: 1 / -1; grid-row: 2; }
.contact-universe { grid-column: 2; grid-row: 1; position: relative; height: 82px; width: 100%; justify-self: end; isolation: isolate; pointer-events: none; overflow: clip; }
.contact-planet { position: absolute; right: -10px; bottom: -16px; width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 0 16px #a9bbcf1a); }
.contact-runway { position: absolute; inset: 0 104px 0 0; }
.contact-traveler { position: absolute; left: 0; bottom: -2px; width: 94px; height: 94px; }
.contact-runner { display: block; width: 100%; height: 100%; background: url('./assets/contact/runner-sprite.png') 0 0 / 200% 100% no-repeat; }
.contact-star { position: absolute; color: #d1e5e6; opacity: .55; font-size: 13px; }
.star-one { left: 20%; top: 10%; }
.star-two { right: 33%; top: 24%; font-size: 9px; }
.star-three { left: 47%; top: 60%; font-size: 24px; }
.contact-meteor { position: absolute; left: 45%; top: 9px; width: 64px; height: 2px; border-radius: 50%; background: linear-gradient(90deg,transparent,#c9e8ee); box-shadow: 4px 0 8px #c9e8ee44; opacity: 0; transform: rotate(16deg); }
.contact-universe.is-playing .contact-traveler { animation: contact-journey 7.2s ease-in-out infinite; }
.contact-universe.is-playing .contact-meteor { animation: contact-meteor 7.2s linear infinite; }
.contact-universe.is-playing .contact-star { animation: contact-twinkle 3s ease-in-out infinite; }
.contact-universe.is-playing .star-two { animation-delay: .7s; }
.contact-universe.is-playing .star-three { animation-delay: 1.4s; }
/* Keep the journey's pace, then rest beside the planet for about two seconds. */
@keyframes contact-journey { 0% { left: 0; opacity: 0; } 4.3% { opacity: 1; } 27.4%,36.8% { left: calc(45% - 34px); opacity: 1; } 63.6%,90% { left: calc(100% - 76px); opacity: 1; } 96%,100% { left: calc(100% - 76px); opacity: 0; } }
@keyframes contact-meteor { 0%,27.4% { transform: translate(-30px,-12px) rotate(16deg); opacity: 0; } 28.9% { opacity: 1; } 36.1% { transform: translate(65px,15px) rotate(16deg); opacity: 1; } 39.7%,100% { transform: translate(95px,23px) rotate(16deg); opacity: 0; } }
@keyframes contact-twinkle { 0%,100% { opacity: .25; } 50% { opacity: .85; } }
@media(max-width:850px) {
 .contact-heading { grid-template-columns: max-content minmax(0,1fr); gap: 14px 20px; }
 .contact-universe { height: 82px; }
 .contact-traveler { width: 88px; height: 88px; }
 .contact-runway { right: 86px; }
 .contact-planet { width: 130px; height: 130px; }
}
@media(max-width:650px) {
 .contact-heading { grid-template-columns: max-content minmax(0,1fr); gap: 14px 8px; }
 .contact-universe { grid-row: 1; height: 76px; }
 .contact-introduction { grid-column: 1 / -1; }
 .contact-traveler { width: 66px; height: 66px; bottom: 0; }
 .contact-runway { right: 44px; }
 .contact-planet { width: 90px; height: 90px; bottom: -10px; right: -14px; }
 #contact .contact-heading .profile-heading { font-size: clamp(1.7rem,6.7vw,2.75rem); }
}
@media(max-width:380px) {
 .contact-traveler { width: 58px; height: 58px; }
}
@media(max-height:560px) and (min-width:651px) {
 .contact-universe { height: 86px; }
 .contact-traveler { width: 76px; height: 76px; }
 .contact-planet { width: 106px; height: 106px; }
}
@media(prefers-reduced-motion:reduce) {
 .contact-universe * { animation: none !important; }
 .contact-traveler { left: 30%; opacity: 1; }
 .contact-meteor { display: none; }
}