/* CTA 提示弹框（公共样式见 styles/base.css 的 .site-alert） */

.hero {
  --hero-eyebrow-progress: 0;
  --hero-eyebrow-y: 34px;
  --hero-eyebrow-scale: .96;
  --hero-wordmark-progress: 0;
  --hero-wordmark-y: 42px;
  --hero-wordmark-scale: .94;
  --hero-cta-progress: 0;
  --hero-cta-y: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding-top: 134px;
  overflow: hidden;
  background: #0f141d;
}

.hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 20, 29, .18) 0%, transparent 34%),
    linear-gradient(0deg, rgba(15, 20, 29, .32) 0%, transparent 32%);
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--hero-video-fade-ms, 400ms) ease-out;
}

.hero.is-video-ready .hero__video {
  opacity: 1;
}

.hero__eyebrow {
  position: relative;
  z-index: 2;
  width: 544px;
  height: 72px;
  margin: 0;
  color: #fe9349;
  font-size: 60px;
  font-weight: 630;
  line-height: 72px;
  text-align: center;
  white-space: nowrap;
  opacity: var(--hero-eyebrow-progress);
  transform: translate3d(0, var(--hero-eyebrow-y), 0) scale(var(--hero-eyebrow-scale));
  transform-origin: center bottom;
  will-change: opacity, transform;
}

.hero__wordmark {
  position: relative;
  z-index: 2;
  width: 996px;
  max-width: 100%;
  height: auto;
  margin: 11px 0 0;
  opacity: var(--hero-wordmark-progress);
  transform: translate3d(0, var(--hero-wordmark-y), 0) scale(var(--hero-wordmark-scale));
  transform-origin: center top;
  will-change: opacity, transform;
}

.hero__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 139px;
  height: 41px;
  margin-top: 527px;
  border-radius: 50px;
  background: #06c;
  color: #f5f5f7;
  font: 630 20px/normal "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  opacity: var(--hero-cta-progress);
  transform: translate3d(0, var(--hero-cta-y), 0);
  transition: background 200ms ease, transform 200ms ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: #0077ed;
  transform: scale(1.02);
  transition: background 200ms ease, transform 200ms ease;
}

.hero__cta:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__eyebrow,
  .hero__wordmark,
  .hero__cta {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
}