.ha-hero { position: relative; width: 100%; height: 100vh; min-height: 300px; overflow: hidden; color: #fff; }
.ha-hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s,visibility .8s; }
.ha-hero__slide.is-current { opacity: 1; visibility: visible; z-index: 1; }
.ha-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(3,17,36,.46),rgba(3,17,36,.28) 55%,rgba(3,17,36,.18)); pointer-events: none; }
.ha-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.ha-hero__slide.is-current .ha-hero__image { animation: ha-hero-image 5s ease both; }
@keyframes ha-hero-image { from { transform: scale(1.111111); } to { transform: scale(1); } }
.ha-hero__copy { position: absolute; z-index: 2; left: 10%; top: 50%; transform: translateY(-50%); width: 80%; }
.ha-hero__english,.ha-hero__title { font-family: var(--ha-copy-font); font-size: 3.5vw; line-height: 1.2; font-weight: 400; }
.ha-hero__english { font-family: var(--ha-display-font); font-weight: 700; }
.ha-hero__title { font-weight: 700; }
.ha-hero__divider { height: 33.3332px; }
.ha-hero__summary { font-size: 2.5vw; line-height: 1; margin-top: 30px; letter-spacing: 5px; font-weight: 700; }
.ha-hero__slide.is-current .ha-hero__english,.ha-hero__slide.is-current .ha-hero__title,.ha-hero__slide.is-current .ha-hero__summary { animation: ha-hero-copy 2s ease both; }
.ha-hero__slide.is-current .ha-hero__english { animation-delay: .5s; }
.ha-hero__slide.is-current .ha-hero__title { animation-delay: .7s; }
.ha-hero__slide.is-current .ha-hero__summary { animation-delay: 1s; }
@keyframes ha-hero-copy { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.ha-hero__pagination { position: absolute; z-index: 3; bottom: 50px; left: 10%; display: flex; gap: 8px; align-items: center; }
.ha-hero__pagination button { width: 10px; height: 10px; border-radius: 20px; background: #ffffff80; }
.ha-hero__pagination button.is-current { width: 30px; background: var(--ha-blue); }
.ha-hero__scroll { position: absolute; z-index: 3; bottom: 40px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 12px; line-height: 20px; }
.ha-hero__scroll > span { width: 20px; height: 30px; border: 2px solid #fff; border-radius: 12px; display: block; margin: 0 auto 12px; position: relative; }
.ha-hero__scroll > span::after { content: ""; position: absolute; top: 3px; left: 50%; width: 4px; height: 10px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: ha-scroll-cue 2s linear infinite; }
@keyframes ha-scroll-cue { from { transform: translate(-50%,0); opacity: 1; } to { transform: translate(-50%,10px); opacity: 0; } }
.ha-hero__arrows { position: absolute; z-index: 3; right: 7%; bottom: 40px; display: flex; gap: 20px; }
.ha-hero__arrows button { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 50%; }
.ha-hero__arrows button:first-child svg { transform: rotate(180deg); }
.ha-hero__arrows button:first-child { opacity: .35; }
.ha-hero__arrows button:hover { background: var(--ha-blue); opacity: 1; }
.ha-hero__arrows svg { width: 20px; height: 20px; }
@media(max-width:768px) {
  .ha-hero { height: 440px; }
  .ha-hero__image { position: absolute; top: 50px; height: 440px; }
  .ha-hero__image[src*="hongao-banner-gate"] { object-position: 82% center; }
  .ha-hero__image[src*="hongao-banner-factory"] { object-position: 12% center; }
  .ha-hero__copy { left: 5%; width: 90%; top: calc(50% + 25px); padding-top: 22px; }
  .ha-hero__english { font-size: 26px; line-height: 1.2; margin-bottom: 5px; }
  .ha-hero__title { font-size: 27px; line-height: 1.3; }
  .ha-hero__divider { height: 23.3332px; }
  .ha-hero__summary { font-size: 17px; line-height: 1.5; letter-spacing: 1px; margin-top: 14px; }
  .ha-hero__arrows,.ha-hero__scroll { display: none; }
  .ha-hero__pagination { left: 5%; bottom: 20px; gap: 6px; }
  .ha-hero__pagination button { width: 6px; height: 6px; }
  .ha-hero__pagination button.is-current { width: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion="full"]) .ha-hero__slide.is-current .ha-hero__image,html:not([data-motion="full"]) .ha-hero__slide.is-current .ha-hero__english,html:not([data-motion="full"]) .ha-hero__slide.is-current .ha-hero__title,html:not([data-motion="full"]) .ha-hero__slide.is-current .ha-hero__summary,html:not([data-motion="full"]) .ha-hero__scroll > span::after { animation: none; }
}