/* Noto Sans SC, SIL OFL 1.1. Locally hosted subset for this Chinese tagline. */
@font-face {
  font-family: "City Lights Hero Sans SC";
  src: url('./assets/fonts/noto-sans-sc-700-hero-zh.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Full-bleed, title-free CD-cover artwork with the original floating headline. */
.hero.hero-final {
  --banner-header-height: 84px;
  background: #10082b;
}

/* Fill the entire hero, including beneath the translucent navigation. */
.hero-final .hero-stage {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: #180e46;
}

.hero-final .hero-art {
  inset: 0;
  background: none;
  transform: none;
  animation: none;
}

.hero-final .hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the top so wider screens cannot crop the face under the menu. */
  object-position: 85% top;
}

/* Darken only the title side; keep the character and car luminous. */
.hero-final .hero-shade {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 2, 23, .96) 0%, rgba(13, 3, 35, .84) 24%, rgba(13, 3, 35, .46) 36%, rgba(13, 3, 35, .08) 51%, transparent 65%),
    linear-gradient(0deg, rgba(9, 3, 22, .72), transparent 22%);
}

/* CITY outline, LIGHTS gradient and the original typefaces come from styles.css. */
.hero-final .hero-copy {
  top: calc(50% + var(--banner-header-height) / 2);
  width: min(640px, 44vw);
}

.hero-final .hero-copy h1,
.hero-final .hero-copy .city,
.hero-final .hero-copy .lights {
  width: max-content;
  max-width: none;
}

.hero-final .hero-meta { flex-wrap: wrap; }

/* Scope strictly to the Chinese hero tagline; keep every other font intact. */
html[lang="zh-CN"] .hero-final .jp-title {
  font-family: "City Lights Hero Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.65;
  letter-spacing: .055em;
}

@media (max-width: 1200px) {
  .hero-final .hero-art img { object-position: 60% top; }
}

@media (max-width: 900px) {
  .hero.hero-final { --banner-header-height: 70px; }
  .hero-final .hero-copy { width: 60vw; }
  .hero-final .hero-shade {
    background:
      linear-gradient(90deg, rgba(8, 2, 23, .93), rgba(13, 3, 35, .55) 42%, transparent 78%),
      linear-gradient(0deg, rgba(9, 3, 22, .88), transparent 70%);
  }
}

@media (max-width: 600px) {
  .hero-final .hero-shade {
    background:
      linear-gradient(90deg, rgba(8, 2, 23, .7), transparent 85%),
      linear-gradient(0deg, #090316 0%, rgba(9, 3, 22, .94) 28%, rgba(9, 3, 22, .65) 49%, transparent 76%);
  }
  .hero-final .hero-copy,
  .hero-final .hero-copy.reveal,
  .hero-final .hero-copy.reveal.visible {
    top: auto;
    bottom: 54px;
    width: calc(100% - 44px);
    transform: none;
  }
  .hero-final .hero-copy h1 { font-size: clamp(70px, 21vw, 88px); }
}