/* Native motion for the contact page; no animation framework is required. */
.contact-page .header-container {
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

.contact-page .mobile-inner-header-icon {
  padding: 0;
  border: 0;
  background: transparent;
}

.contact-page .header-nav-ul a[aria-current='page']::before {
  right: 0;
  left: 0;
}

.contact-banner__heading {
  display: block;
  margin: 0;
  font-weight: 500;
}

.contact-page .banner-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.contact-page .contact-banner__english,
.contact-page .contact-banner__chinese,
.contact-page .banner-200-description {
  display: block;
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-page .contact-banner__english {
  animation-name: contact-fade-down;
  animation-duration: 900ms;
  animation-delay: 100ms;
}

.contact-page .contact-banner__chinese {
  animation-name: contact-fade-up;
  animation-duration: 900ms;
  animation-delay: 260ms;
}

.contact-page .banner-200-description {
  animation-name: contact-fade-up;
  animation-duration: 900ms;
  animation-delay: 1300ms;
}

.banner-wave__layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  background-position: left bottom;
  background-repeat: repeat-x;
  pointer-events: none;
  will-change: transform;
  animation-name: contact-wave-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.banner-wave__layer--1 {
  height: 30px;
  background-image: url('/image/wave/wave-1.png');
  background-size: 50% auto;
  animation-duration: 9s;
}

.banner-wave__layer--2 {
  height: 60px;
  background-image: url('/image/wave/wave-2.png');
  background-size: 50% auto;
  animation-duration: 15s;
}

.banner-wave__layer--3 {
  height: 100px;
  background-image: url('/image/wave/wave-3.png');
  background-size: 50% auto;
  animation-duration: 28s;
}

@keyframes contact-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, -18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes contact-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes contact-wave-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-wave__layer {
    animation: none;
  }
}