/* Shared geometry contract for the English prototype hero banners. */
:root {
  --prototype-hero-desktop-max: 450px;
  --prototype-hero-ratio-height: 31.25vw;
  --prototype-hero-mobile-height: clamp(180px, 50vw, 240px);
  --prototype-hero-desktop-inset: clamp(48px, 5.56vw, 80px);
  --prototype-hero-title-mobile-padding: 24px;
}

:is(.reference-hero, .about-hero, .tiger-prototype-banner,
  .talent-hero-banner, .direction-hero) {
  width: 100%;
  max-width: none;
  height: min(var(--prototype-hero-desktop-max), var(--prototype-hero-ratio-height));
  min-height: 0;
  margin-inline: 0;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

:is(.reference-hero-image, .reference-hero-fallback,
  .about-hero-media img, .tiger-prototype-banner-image,
  .talent-hero-banner-layer, .direction-hero-layer) {
  width: 100%;
  height: 100%;
}

/* Shared hero-title entrance: rise 28px while fading in, with a restrained
   line stagger. The title remains visible when JavaScript or motion is off. */
@keyframes prototype-hero-title-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.reference-hero-copy h1, .tiger-banner-copy h1, .direction-hero-title) > * {
    animation: prototype-hero-title-rise 750ms cubic-bezier(.22, 1, .36, 1) both;
  }

  :is(.reference-hero-copy h1, .tiger-banner-copy h1, .direction-hero-title) > *:nth-child(2) {
    animation-delay: 50ms;
  }
}

:is(.reference-hero-copy h1, .about-hero h1,
  .tiger-banner-copy h1, .talent-hero-banner-title,
  .direction-hero-title) {
  font-family: "Basel Grotesk", "CUHK Grotesk Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(36px, 4.167cqi, 60px);
  font-weight: 535;
  letter-spacing: -.03em;
  line-height: .94;
  text-wrap: balance;
}

/* Chinese campaign titles are intentionally composed as one paired line. */
:is(.reference-hero-copy h1, .about-hero h1, .tiger-banner-copy h1).hero-title--chinese {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .35em;
  row-gap: 0;
  white-space: normal;
  text-wrap: balance;
}

:is(.reference-hero-copy h1, .about-hero h1, .tiger-banner-copy h1).hero-title--chinese > span {
  display: inline;
  padding-left: 0;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 768px) {
  /* Desktop follows the English hero composition: two clear lines with the
     second phrase set slightly in from the first. */
  :is(.reference-hero-copy h1, .about-hero h1, .tiger-banner-copy h1).hero-title--chinese {
    display: block;
    white-space: normal;
  }

  :is(.reference-hero-copy h1, .about-hero h1, .tiger-banner-copy h1).hero-title--chinese > span {
    display: block;
  }

  :is(.reference-hero-copy h1, .about-hero h1, .tiger-banner-copy h1).hero-title--chinese > span:nth-child(2) {
    padding-left: clamp(24px, 7.3vw, 105px);
  }
}

/* The desktop/tablet title remains an overlay, with its scale tied to the
   banner container rather than the viewport. */
:is(.reference-hero-copy, .about-hero-copy, .tiger-banner-copy,
  .talent-hero-banner-title, .direction-hero-title) {
  max-width: 100%;
}

:is(.reference-hero-copy, .about-hero-copy, .tiger-banner-copy) {
  --hero-inset: var(--prototype-hero-desktop-inset);
  left: var(--hero-inset);
}

:is(.talent-hero-banner-title, .direction-hero-title) {
  width: min(36.25%, 522px);
  height: min(32%, 144px);
}

@media (max-width: 767px) {
  :is(.reference-hero, .about-hero, .tiger-prototype-banner,
    .talent-hero-banner, .direction-hero) {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  :is(.reference-hero-image, .reference-hero-fallback,
    .about-hero-media img, .tiger-prototype-banner-image,
    .talent-hero-banner-layer, .direction-hero-layer) {
    height: var(--prototype-hero-mobile-height);
  }

  .reference-hero {
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }

  .reference-hero-image,
  .reference-hero-fallback {
    position: relative;
    inset: auto;
    flex: 0 0 var(--prototype-hero-mobile-height);
  }

  .reference-hero-copy {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
    padding: var(--prototype-hero-title-mobile-padding) var(--content-pad, 24px);
  }

  .reference-hero-copy h1 {
    font-size: clamp(36px, 10.5cqi, 60px);
  }

  .about-hero {
    display: flex;
    flex-direction: column;
  }

  .about-hero-media {
    position: relative;
    inset: auto;
    flex: 0 0 var(--prototype-hero-mobile-height);
    height: var(--prototype-hero-mobile-height);
  }

  .about-hero-inner {
    height: auto;
  }

  .about-hero-copy {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    transform: none;
    padding: var(--prototype-hero-title-mobile-padding) var(--content-pad, 24px);
    background: #fff;
  }

  .about-hero h1 {
    font-size: clamp(36px, 10.5cqi, 60px);
  }

  .tiger-prototype-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--prototype-hero-mobile-height) auto;
  }

  .tiger-prototype-banner-image,
  .tiger-prototype-banner-slide-window {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--prototype-hero-mobile-height);
  }

  /* Match TIGER's page-specific selector strength so its image row, animated
     layers, and shade all consume this contract instead of stale formulas. */
  .tiger-prototype .tiger-prototype-banner {
    grid-template-rows: var(--prototype-hero-mobile-height) auto;
  }

  .tiger-prototype .tiger-prototype-banner-image,
  .tiger-prototype .tiger-prototype-banner-slide-window,
  .tiger-prototype .tiger-prototype-banner-layer,
  .tiger-prototype .tiger-prototype-banner-shade {
    height: var(--prototype-hero-mobile-height);
  }

  .tiger-banner-copy {
    position: relative;
    inset: auto;
    grid-row: 2;
    grid-column: 1;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: var(--prototype-hero-title-mobile-padding) var(--content-pad, 24px);
    background: var(--hero-surface);
    transform: none;
  }

  .tiger-banner-copy h1 {
    font-size: clamp(36px, 10.5cqi, 60px);
  }

  /* Keep the orbit in the title row; its rotation-only mobile animation
     preserves the current layout anchor. */
  .tiger-prototype-banner-atom {
    grid-row: 2;
    grid-column: 1;
    top: auto;
    right: 8px;
    left: auto;
    align-self: center;
    justify-self: end;
  }

  :is(.talent-hero-banner, .direction-hero) {
    display: flex;
    flex-direction: column;
    padding-top: var(--prototype-hero-mobile-height);
  }

  :is(.talent-hero-banner-layer, .direction-hero-layer) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    flex: 0 0 var(--prototype-hero-mobile-height);
  }

  .talent-hero .talent-hero-banner-title,
  .direction-hero-title {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: var(--prototype-hero-title-mobile-padding) var(--content-pad, 24px);
    transform: none;
    background: #fff;
    font-size: clamp(36px, 10.5cqi, 60px);
    line-height: .94;
    white-space: normal;
  }

  :is(.reference-hero-copy h1, .about-hero h1,
    .tiger-banner-copy h1, .talent-hero-banner-title,
    .direction-hero-title) {
    text-shadow: none;
  }

  :is(.reference-hero-copy h1, .about-hero h1).hero-title--chinese {
    font-size: clamp(28px, 10.5cqi, 60px);
  }

  .talent-hero .talent-hero-banner-title span,
  .direction-hero-title span {
    white-space: normal;
  }
}