/* Hong Kong visual layer: restrained motion and location cues. */
.hero-media {
  inset: 0;
  opacity: .92;
  background-image: url("images/hong-kong-harbour-blue-hour.webp");
  background-position: 58% center;
  background-size: cover;
  filter: saturate(.78) contrast(1.04) brightness(.82);
  animation: hk-hero-pan 26s ease-in-out infinite alternate;
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(7, 9, 10, .98) 0%, rgba(7, 9, 10, .91) 38%, rgba(7, 9, 10, .38) 68%, rgba(7, 9, 10, .14) 100%),
    linear-gradient(180deg, rgba(7, 9, 10, .05) 55%, rgba(7, 9, 10, .94) 100%);
}

.hk-identity {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(174, 184, 190, .13);
  background: #0b0f11;
}

.hk-identity div {
  min-height: 82px;
  padding: 21px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid rgba(174, 184, 190, .13);
}

.hk-identity div:last-child {
  border-right: 0;
}

.hk-identity span {
  color: #35c7cf;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hk-identity strong {
  color: #dfe2e0;
  font-size: 14px;
  font-weight: 520;
}

.city-visual {
  animation: hk-city-pan 32s ease-in-out infinite alternate;
  transform-origin: center top;
}

.office-visual > div {
  animation: hk-office-drift 24s ease-in-out infinite alternate;
}

@keyframes hk-hero-pan {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.075) translate3d(-1.2%, .4%, 0); }
}

@keyframes hk-city-pan {
  from { background-position: center 38%; }
  to { background-position: 53% 42%; }
}

@keyframes hk-office-drift {
  from { transform: scale(1.01); }
  to { transform: scale(1.055); }
}

@media (max-width: 720px) {
  .hero-media {
    inset: 0;
    opacity: .72;
    background-position: 70% center;
  }

  .hk-identity {
    grid-template-columns: 1fr;
  }

  .hk-identity div {
    min-height: 68px;
    padding: 16px 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(174, 184, 190, .13);
  }

  .hk-identity div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media,
  .city-visual,
  .office-visual > div {
    animation: none !important;
  }
}