/* R5 trilingual home hero: the Chinese edition remains the visual source of truth. */
body[data-current="home"] .zh-hero-r5 {
  --r5-ink: #130b11;
  --r5-wine: #5f1022;
  --r5-wine-deep: #2a0d17;
  --r5-gold: #dba23d;
  min-height: clamp(690px, calc(100dvh - 176px), 900px);
  padding-top: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 32%, rgba(173, 35, 64, 0.25), transparent 32%),
    linear-gradient(116deg, #130b11 0%, #220d16 36%, #4b1020 72%, #1a0b12 100%);
}

body[data-current="home"] .zh-hero-r5::before {
  z-index: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 16% 18%, rgba(219, 162, 61, 0.1), transparent 18%),
    linear-gradient(105deg, transparent 0 39%, rgba(231, 199, 130, 0.08) 39.1% 39.2%, transparent 39.3%),
    linear-gradient(180deg, rgba(255, 254, 249, 0.035), transparent 42%);
  transform: none;
}

body[data-current="home"] .zh-hero-r5::after {
  z-index: 1;
  top: auto;
  right: auto;
  bottom: -13%;
  left: -8%;
  width: 70%;
  height: 44%;
  opacity: 0.76;
  background: linear-gradient(18deg, rgba(12, 7, 11, 0.96), rgba(42, 13, 23, 0.5) 58%, transparent 59%);
  clip-path: none;
  transform: skewX(-12deg);
  pointer-events: none;
}

body[data-current="home"] .zh-hero-r5-backdrop,
body[data-current="home"] .zh-hero-r5-foreground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-current="home"] .zh-hero-r5-backdrop {
  z-index: 1;
  overflow: hidden;
}

body[data-current="home"] .zh-hero-r5-backdrop span {
  position: absolute;
  top: -0.12em;
  left: -0.035em;
  color: transparent;
  font-family: var(--font-display-latin);
  font-size: clamp(7rem, 14.5vw, 18rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.065em;
  white-space: nowrap;
  opacity: 0.16;
  -webkit-text-stroke: 1px rgba(231, 199, 130, 0.75);
}

body[data-current="home"] .zh-hero-r5-backdrop img {
  position: absolute;
  bottom: -5%;
  left: 2.5%;
  width: clamp(13rem, 23vw, 27rem);
  height: auto;
  opacity: 0.075;
  filter: saturate(0.8);
}

body[data-current="home"] .zh-hero-r5 .stage-atmosphere-r4,
body[data-current="home"] .zh-hero-r5 .stage-foreground-r4,
body[data-current="home"] .zh-hero-r5 .score-experience,
body[data-current="home"] .zh-hero-r5 .sound-experience,
body[data-current="home"] .zh-hero-r5 .music-pulse,
body[data-current="home"] .zh-hero-r5 .score-transition,
body[data-current="home"] .zh-hero-r5 [data-score-status] {
  display: none;
}

body[data-current="home"] .zh-hero-r5 .headline-stage-slides,
body[data-current="home"] .zh-hero-r5 .headline-stage-slide {
  z-index: 2;
  overflow: visible;
}

body[data-current="home"] .zh-hero-r5 .headline-stage-slide {
  overflow: hidden;
}

body[data-current="home"] .zh-hero-r5 .stage-media,
body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-media,
body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-media {
  z-index: 1;
  inset: clamp(1.25rem, 3vh, 2.5rem) 0 0 35%;
  width: 65%;
  height: calc(100% - clamp(1.25rem, 3vh, 2.5rem));
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(0.76) contrast(1.08) brightness(0.86);
  box-shadow: -4rem 2rem 7rem rgba(10, 5, 9, 0.48);
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 5% 69%);
  transition: filter 520ms ease;
}

body[data-current="home"] .zh-hero-r5 .stage-scrim {
  z-index: 2;
  background:
    linear-gradient(90deg, #130b11 0%, rgba(19, 11, 17, 0.98) 24%, rgba(19, 11, 17, 0.73) 42%, rgba(19, 11, 17, 0.1) 69%, rgba(19, 11, 17, 0.18) 100%),
    linear-gradient(0deg, rgba(15, 8, 13, 0.88) 0%, rgba(15, 8, 13, 0.12) 43%, rgba(15, 8, 13, 0.3) 100%);
}

body[data-current="home"] .zh-hero-r5 .stage-copy,
body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .stage-copy {
  position: absolute;
  z-index: 5;
  inset: 0;
  min-height: 0;
  height: 100%;
  justify-content: flex-end;
  padding-top: 11.5rem;
  padding-bottom: clamp(6.3rem, 10vh, 7.8rem);
  text-shadow: 0 1.1rem 3rem rgba(10, 5, 9, 0.48);
}

body[data-current="home"] .zh-hero-r5 .stage-meta {
  position: relative;
  gap: 0;
  margin-bottom: clamp(0.9rem, 1.7vh, 1.3rem);
  color: var(--gold-soft);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

body[data-current="home"] .zh-hero-r5 .stage-meta::before {
  content: "";
  width: clamp(2.5rem, 4vw, 4rem);
  height: 1px;
  margin-right: 0.9rem;
  background: var(--r5-gold);
}

body[data-current="home"] .zh-hero-r5 .stage-meta time {
  margin-left: 0.9rem;
  padding-left: 0.9rem;
}

body[data-current="home"] .zh-hero-r5 .stage-copy h1,
body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
  width: min(48%, 14em);
  max-width: none;
  margin-bottom: clamp(0.9rem, 1.8vh, 1.3rem);
  color: #f4efe7;
  font-size: clamp(3.6rem, 4.55vw, 5.35rem);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

body[data-current="home"] .zh-hero-r5 .stage-summary {
  max-width: 38rem;
  margin-bottom: 1.35rem;
  color: rgba(244, 239, 231, 0.82);
  font-size: clamp(0.94rem, 1.1vw, 1.05rem);
  line-height: 1.72;
}

body[data-current="home"] .zh-hero-r5 .stage-actions {
  gap: 0;
}

body[data-current="home"] .zh-hero-r5 .stage-cta {
  min-width: 8.5rem;
  min-height: 50px;
  padding-inline: 1.5rem;
  border-radius: 0;
  color: #1a0c12;
  box-shadow: 1.1rem 1.1rem 0 rgba(244, 239, 231, 0.08);
}

body[data-current="home"] .zh-hero-r5 .stage-identity {
  z-index: 7;
  top: 12rem;
  color: rgba(244, 239, 231, 0.68);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-align: left;
}

body[data-current="home"] .zh-hero-r5 .stage-identity span {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

body[data-current="home"] .zh-hero-r5 .stage-identity span::after {
  content: "";
  width: 5rem;
  height: 1px;
  background: rgba(219, 162, 61, 0.56);
}

body[data-current="home"] .zh-hero-r5-foreground {
  z-index: 6;
  overflow: hidden;
}

body[data-current="home"] .zh-hero-r5-foreground::before {
  content: "";
  position: absolute;
  top: -8%;
  right: -5%;
  width: 28%;
  height: 120%;
  background:
    linear-gradient(90deg, rgba(94, 16, 34, 0.08), rgba(73, 10, 25, 0.72) 50%, rgba(24, 8, 15, 0.96)),
    linear-gradient(180deg, rgba(219, 162, 61, 0.09), transparent 38%);
  box-shadow: -2rem 0 5rem rgba(10, 5, 9, 0.32);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%, 24% 62%);
}

body[data-current="home"] .zh-hero-r5-foreground::after {
  content: "";
  position: absolute;
  right: 21%;
  bottom: -16%;
  width: 36%;
  height: 45%;
  background: linear-gradient(146deg, transparent 0 47%, rgba(219, 162, 61, 0.42) 47.2% 47.45%, rgba(21, 9, 15, 0.78) 47.7%);
  transform: skewX(-12deg);
}

body[data-current="home"] .zh-hero-r5-foreground span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35%;
  width: 1px;
  opacity: 0.72;
  background: linear-gradient(transparent 3%, rgba(219, 162, 61, 0.64) 28%, rgba(219, 162, 61, 0.1) 86%, transparent);
  transform: skewX(-7deg);
  transform-origin: top;
}

body[data-current="home"] .zh-hero-r5-foreground i {
  position: absolute;
  top: 8%;
  right: 13%;
  width: 8rem;
  height: 8rem;
  border-top: 1px solid rgba(231, 199, 130, 0.54);
  border-right: 1px solid rgba(231, 199, 130, 0.28);
  transform: skewX(-8deg);
}

body[data-current="home"] .zh-hero-r5 .stage-console {
  z-index: 9;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  bottom: 1rem;
  left: auto;
  width: min(36rem, 42vw);
  grid-template-columns: 44px minmax(12rem, 1fr) auto 44px;
  gap: 0.55rem;
  margin: 0;
}

body[data-current="home"] .zh-hero-r5 .stage-step,
body[data-current="home"] .zh-hero-r5 .stage-pause {
  min-height: 44px;
  border-color: rgba(244, 239, 231, 0.34);
  border-radius: 0;
  background: rgba(19, 11, 17, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-current="home"] .zh-hero-r5 .stage-step {
  width: 44px;
}

body[data-current="home"] .zh-hero-r5 .score-progress {
  height: 44px;
}

body[data-current="home"] .zh-hero-r5 .score-progress-lines {
  height: 1px;
  border: 0;
  background: rgba(231, 199, 130, 0.42);
}

body[data-current="home"] .zh-hero-r5 .score-progress-node {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

body[data-current="home"] .zh-hero-r5 .score-progress-node span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold-soft);
  border-radius: 0;
  background: var(--r5-ink);
  transform: rotate(45deg);
}

body[data-current="home"] .zh-hero-r5 .score-progress-node.is-active span,
body[data-current="home"] .zh-hero-r5 .score-progress-node:hover span,
body[data-current="home"] .zh-hero-r5 .score-progress-node:focus-visible span {
  background: var(--r5-gold);
  transform: rotate(45deg) scale(1.28);
}

body[data-current="home"] .zh-hero-r5 .score-playhead {
  top: 10px;
  bottom: 10px;
}

@media (max-width: 1100px) {
  body[data-current="home"] .zh-hero-r5 .stage-media,
  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-media,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-media {
    left: 29%;
    width: 71%;
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
    width: min(80%, 14em);
    font-size: clamp(3.25rem, 5.8vw, 4.6rem);
  }
}

@media (max-width: 800px) {
  body[data-current="home"] .zh-hero-r5 {
    min-height: max(770px, calc(100dvh - 72px));
  }

  body[data-current="home"] .zh-hero-r5::after {
    bottom: -5%;
    left: -25%;
    width: 110%;
    height: 52%;
  }

  body[data-current="home"] .zh-hero-r5-backdrop span {
    top: 2%;
    left: -0.02em;
    font-size: clamp(5rem, 25vw, 8rem);
    opacity: 0.12;
  }

  body[data-current="home"] .zh-hero-r5-backdrop img {
    bottom: 8%;
    left: -18%;
    width: 85vw;
    opacity: 0.055;
  }

  body[data-current="home"] .zh-hero-r5 .stage-media,
  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-media,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-media {
    inset: 0 0 auto;
    width: 100%;
    height: 65%;
    object-position: 55% center;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    box-shadow: 0 3rem 5rem rgba(10, 5, 9, 0.42);
  }

  body[data-current="home"] .zh-hero-r5 .stage-scrim {
    background:
      linear-gradient(0deg, #130b11 0%, rgba(19, 11, 17, 0.96) 24%, rgba(19, 11, 17, 0.55) 55%, rgba(19, 11, 17, 0.16) 100%),
      linear-gradient(90deg, rgba(19, 11, 17, 0.48), transparent 64%);
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .stage-copy {
    padding-top: 16rem;
    padding-bottom: 7.2rem;
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
    width: 100%;
    max-width: 13em;
    font-size: clamp(2.35rem, 7.6vw, 3.2rem);
    line-height: 1.02;
  }

  body[data-current="home"] .zh-hero-r5 .stage-summary {
    max-width: 34rem;
    font-size: 0.94rem;
    line-height: 1.6;
  }

  body[data-current="home"] .zh-hero-r5 .stage-identity {
    top: 5.4rem;
    display: block;
  }

  body[data-current="home"] .zh-hero-r5-foreground::before {
    right: -12%;
    width: 38%;
    opacity: 0.78;
  }

  body[data-current="home"] .zh-hero-r5-foreground::after {
    right: 8%;
    width: 58%;
    height: 34%;
  }

  body[data-current="home"] .zh-hero-r5-foreground span {
    left: 8%;
    opacity: 0.42;
  }

  body[data-current="home"] .zh-hero-r5-foreground i {
    display: none;
  }

  body[data-current="home"] .zh-hero-r5 .stage-console {
    right: var(--gutter);
    bottom: 0.8rem;
    left: var(--gutter);
    width: auto;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 0.45rem;
  }

  body[data-current="home"] .zh-hero-r5 .score-progress {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-current="home"] .zh-hero-r5 .stage-pause {
    grid-column: 2;
    grid-row: 2;
    min-height: 30px;
    border: 0;
    color: rgba(244, 239, 231, 0.7);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-current="home"] .zh-hero-r5 [data-carousel-next] {
    grid-column: 3;
    grid-row: 1;
  }
}

@media (max-width: 520px) {
  body[data-current="home"] .zh-hero-r5 {
    min-height: max(770px, calc(100dvh - 72px));
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .stage-copy {
    padding-top: 14rem;
    padding-bottom: 6.8rem;
  }

  body[data-current="home"] .zh-hero-r5 .stage-meta {
    margin-bottom: 0.7rem;
    font-size: 0.7rem;
  }

  body[data-current="home"] .zh-hero-r5 .stage-meta::before {
    width: 1.6rem;
    margin-right: 0.65rem;
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.95rem, 8.8vw, 2.3rem);
    line-height: 1.07;
    letter-spacing: -0.045em;
  }

  body[data-current="home"] .zh-hero-r5 .stage-summary {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 0.9rem;
    font-size: 0.86rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body[data-current="home"] .zh-hero-r5 .stage-cta {
    min-width: 7.4rem;
    min-height: 44px;
    padding-inline: 1.1rem;
  }

  body[data-current="home"] .zh-hero-r5 .stage-identity {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  body[data-current="home"] .zh-hero-r5 .stage-identity span::after {
    width: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-current="home"] .zh-hero-r5 .stage-media,
  body[data-current="home"] .zh-hero-r5 .stage-copy,
  body[data-current="home"] .zh-hero-r5-foreground,
  body[data-current="home"] .zh-hero-r5-backdrop {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* Static 3D composition: six readable planes without pointer or scroll input. */
@media (min-width: 801px) {
  body[data-current="home"] .zh-hero-r5 {
    --r5-image-top: clamp(2.25rem, 4vh, 3.5rem);
    --r5-image-right: clamp(3rem, 5vw, 6.5rem);
    --r5-image-bottom: clamp(4.5rem, 8vh, 6rem);
    --r5-image-left: 39%;
    --pointer-depth-x: 0;
    --pointer-depth-y: 0;
    --pointer-light-x: 0;
    --pointer-light-y: 0;
    --pointer-depth-energy: 0;
    isolation: isolate;
    perspective: 1320px;
    perspective-origin: 56% 46%;
    transform-style: preserve-3d;
    background:
      radial-gradient(ellipse at 74% 34%, rgb(128 45 51 / 0.22), transparent 34%),
      radial-gradient(ellipse at 22% 76%, rgb(80 20 37 / 0.24), transparent 42%),
      linear-gradient(116deg, #10090f 0%, #1b0b13 40%, #35101d 74%, #140a11 100%);
  }

  /* Z0: distant wine-black auditorium and low-contrast institutional texture. */
  body[data-current="home"] .zh-hero-r5::before {
    z-index: 0;
    opacity: 0.72;
    background:
      linear-gradient(102deg, transparent 0 31%, rgb(222 183 105 / 0.055) 31.1% 31.18%, transparent 31.28%),
      linear-gradient(180deg, rgb(255 248 232 / 0.028), transparent 38%),
      radial-gradient(ellipse at 50% 112%, rgb(0 0 0 / 0.62), transparent 56%);
  }

  body[data-current="home"] .zh-hero-r5::after {
    z-index: 2;
    bottom: -19%;
    left: -10%;
    width: 66%;
    height: 46%;
    opacity: 0.64;
    background: linear-gradient(18deg, rgb(8 5 8 / 0.94), rgb(43 15 25 / 0.48) 58%, transparent 58.5%);
    transform: skewX(-10deg) translateZ(-42px);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-backdrop {
    z-index: 0;
    opacity: 0.48;
    transform: translate3d(calc(var(--pointer-depth-x) * 2.5px), calc(var(--pointer-depth-y) * 1.5px), -180px) scale(1.13);
    filter: saturate(0.62) contrast(0.78) brightness(0.62) blur(2.2px);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-backdrop span {
    top: 0.04em;
    left: -0.02em;
    opacity: 0.12;
    -webkit-text-stroke-color: rgb(231 199 130 / 0.48);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-backdrop img {
    bottom: -10%;
    left: 4%;
    opacity: 0.055;
    filter: blur(1.2px) saturate(0.55);
  }

  /* Z1: restrained auditorium light, intentionally softer than every content plane. */
  body[data-current="home"] .zh-hero-r5 .stage-atmosphere-r4 {
    display: block !important;
    z-index: 1 !important;
    opacity: 0.82;
    transform: translate3d(calc(var(--pointer-light-x) * 3px), calc(var(--pointer-light-y) * 2px), -118px) scale(1.08) !important;
    filter: blur(0.4px);
  }

  body[data-current="home"] .zh-hero-r5 .stage-atmosphere-r4 > span {
    animation: none !important;
    transition: none !important;
  }

  body[data-current="home"] .zh-hero-r5 .stage-ambient {
    opacity: 0.72;
    background:
      radial-gradient(ellipse at 75% 24%, rgb(239 208 143 / 0.13), transparent 30%),
      radial-gradient(ellipse at 70% 72%, rgb(110 28 45 / 0.22), transparent 44%);
    filter: blur(14px);
  }

  body[data-current="home"] .zh-hero-r5 .stage-light {
    z-index: 1;
    opacity: 0.76;
    background:
      radial-gradient(ellipse at calc(72% + var(--pointer-light-x) * 4%) calc(30% + var(--pointer-light-y) * 3%), rgb(245 215 151 / 0.18), transparent 25%),
      radial-gradient(ellipse at calc(78% + var(--pointer-light-x) * 3%) calc(58% + var(--pointer-light-y) * 2%), rgb(135 35 52 / 0.18), transparent 38%);
    box-shadow: none;
    transform: translate3d(calc(var(--pointer-light-x) * 2px), calc(var(--pointer-light-y) * 1.5px), 0) !important;
    filter: blur(9px);
  }

  body[data-current="home"] .zh-hero-r5 .stage-vignette {
    opacity: 0.82;
    background: radial-gradient(ellipse at 66% 43%, transparent 25%, rgb(7 4 7 / 0.55) 92%);
  }

  /* Z2: the staff recedes through scale, softness and partial image occlusion. */
  body[data-current="home"] .zh-hero-r5 .living-score {
    z-index: 2;
    inset: 13% 14% 20% -8%;
    width: auto;
    height: auto;
    opacity: 0.44;
    pointer-events: none;
    transform: translate3d(calc(-1.5% + var(--pointer-depth-x) * 5px), calc(-2% + var(--pointer-depth-y) * 3.5px), -92px) scale(0.9) !important;
    transform-origin: 44% 48%;
    filter: saturate(0.45) contrast(0.7) brightness(0.72) blur(0.9px) !important;
  }

  body[data-current="home"] .zh-hero-r5 .living-score-lines {
    opacity: 0.62;
    transform: none !important;
    filter: none !important;
  }

  body[data-current="home"] .zh-hero-r5 .living-score-lines path {
    stroke: rgb(217 183 119 / 0.44);
    stroke-width: 0.9;
  }

  body[data-current="home"] .zh-hero-r5 .living-score-notes {
    display: none;
  }

  /* Z3: the news photograph becomes a physical visual plane with a recessed backplate. */
  body[data-current="home"] .zh-hero-r5 .headline-stage-slides,
  body[data-current="home"] .zh-hero-r5 .headline-stage-slide {
    z-index: 3;
    overflow: visible;
    transform-style: preserve-3d;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slides {
    transform: none;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--r5-image-top) + 1.1rem);
    right: calc(var(--r5-image-right) + 1.4rem);
    bottom: calc(var(--r5-image-bottom) - 1rem);
    left: calc(var(--r5-image-left) - 1.35rem);
    border: 1px solid rgb(223 185 108 / 0.16);
    background: rgb(41 13 23 / 0.72);
    clip-path: polygon(5% 0, 100% 0, 100% 92%, 94% 100%, 0 100%, 0 9%);
    transform: translate3d(0, 0, -18px) rotateY(-1.1deg);
    transform-origin: 58% 48%;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: var(--r5-image-top);
    right: var(--r5-image-right);
    bottom: var(--r5-image-bottom);
    left: var(--r5-image-left);
    border-top: 1px solid rgb(239 211 147 / 0.48);
    border-right: 1px solid rgb(239 211 147 / 0.18);
    clip-path: polygon(5% 0, 100% 0, 100% 92%, 94% 100%, 0 100%, 0 9%);
    pointer-events: none;
    transform: translate3d(0, 0, 38px) rotateY(-1.1deg);
    transform-origin: 58% 48%;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-media,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-media {
    z-index: 2;
    inset: var(--r5-image-top) var(--r5-image-right) var(--r5-image-bottom) var(--r5-image-left);
    width: auto;
    height: auto;
    object-position: calc(52% + var(--pointer-depth-x) * 0.8%) calc(43% + var(--pointer-depth-y) * 0.6%);
    border: 1px solid rgb(255 230 169 / 0.12);
    clip-path: polygon(5% 0, 100% 0, 100% 92%, 94% 100%, 0 100%, 0 9%);
    transform: translate3d(calc(var(--pointer-depth-x) * 8px), calc(var(--pointer-depth-y) * 5.5px), 24px) rotateY(calc(-1.25deg + var(--pointer-depth-x) * 0.9deg)) rotateX(calc(0.35deg - var(--pointer-depth-y) * 1.1deg)) scale(calc(0.995 + var(--pointer-depth-energy) * 0.01)) !important;
    transform-origin: 58% 48%;
    filter: saturate(0.78) contrast(1.09) brightness(0.78) !important;
    box-shadow: -1.4rem 1.6rem 2.8rem rgb(5 3 5 / 0.3), 0 0 0 1px rgb(231 199 130 / 0.08);
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-scrim {
    z-index: 4;
    background:
      linear-gradient(90deg, rgb(16 9 15 / 0.72) 0%, rgb(16 9 15 / 0.86) 27%, rgb(16 9 15 / 0.6) 42%, rgb(16 9 15 / 0.06) 66%, rgb(16 9 15 / 0.18) 100%),
      linear-gradient(0deg, rgb(10 6 9 / 0.76) 0%, transparent 43%, rgb(10 6 9 / 0.16) 100%);
    transform: translateZ(32px);
  }

  /* Z4: editorial type remains flat and readable while clearly nearer than the image. */
  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-copy {
    z-index: 6;
    padding-top: 10.8rem;
    padding-bottom: clamp(6.4rem, 10vh, 8rem);
    transform: translate3d(calc(clamp(3.75rem, 4.6vw, 5.5rem) - var(--pointer-depth-x) * 5px), calc(var(--pointer-depth-y) * -3px), 108px) !important;
    filter: none;
    text-shadow: none;
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
    position: relative;
    z-index: 2;
    width: min(48%, 13.2em);
    color: #f6f0e6;
    text-shadow: 0 2px 2px rgb(5 3 5 / 0.72), 0 14px 30px rgb(5 3 5 / 0.4);
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1::after,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2::after {
    content: "";
    position: absolute;
    left: 56%;
    bottom: -0.72rem;
    width: clamp(13rem, 31vw, 31rem);
    height: 1px;
    background: linear-gradient(90deg, rgb(224 187 111 / 0.72), rgb(224 187 111 / 0.12) 68%, transparent);
    pointer-events: none;
  }

  body[data-current="home"] .zh-hero-r5 .stage-meta,
  body[data-current="home"] .zh-hero-r5 .stage-summary,
  body[data-current="home"] .zh-hero-r5 .stage-actions {
    position: relative;
    z-index: 2;
  }

  body[data-current="home"] .zh-hero-r5 .stage-summary {
    text-shadow: 0 4px 16px rgb(5 3 5 / 0.56);
  }

  /* Z5: crisp bars cross the image edge and complete the foreground occlusion. */
  body[data-current="home"] .zh-hero-r5 .stage-foreground-r4 {
    display: block !important;
    z-index: 8;
    opacity: 1;
    transform: translate3d(calc(var(--pointer-depth-x) * 14px), calc(var(--pointer-depth-y) * 9px), 156px) !important;
    filter: none;
  }

  body[data-current="home"] .zh-hero-r5 .stage-foreground-r4 span {
    position: absolute;
    top: 67%;
    right: -2%;
    width: 43%;
    height: 54px;
    opacity: 0.72;
    background: repeating-linear-gradient(to bottom, transparent 0 9px, rgb(231 199 130 / 0.43) 9px 10px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 78%, transparent);
    transform: rotate(-2.2deg);
    transform-origin: center;
  }

  body[data-current="home"] .zh-hero-r5 .stage-foreground-r4 i {
    position: absolute;
    top: calc(67% - 0.35rem);
    right: 20%;
    width: 1px;
    height: 68px;
    background: rgb(239 211 147 / 0.72);
    box-shadow: 5px 0 0 rgb(239 211 147 / 0.2);
    transform: rotate(-2.2deg);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-foreground {
    z-index: 7;
    opacity: 1;
    transform: translate3d(calc(var(--pointer-depth-x) * 11px), calc(var(--pointer-depth-y) * 7px), 132px) !important;
    filter: none;
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-foreground::before {
    right: -3%;
    width: 18%;
    opacity: 0.82;
    background:
      linear-gradient(90deg, rgb(75 16 31 / 0.06), rgb(42 10 20 / 0.64) 54%, rgb(15 7 12 / 0.94)),
      linear-gradient(180deg, rgb(219 162 61 / 0.07), transparent 42%);
    box-shadow: -1.25rem 0 2.5rem rgb(5 3 5 / 0.2);
    clip-path: polygon(46% 0, 100% 0, 100% 100%, 6% 100%, 28% 60%);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-foreground::after {
    top: var(--r5-image-top);
    right: auto;
    bottom: auto;
    left: calc(var(--r5-image-left) - 0.2rem);
    width: 10rem;
    height: 6rem;
    border-top: 1px solid rgb(239 211 147 / 0.7);
    border-left: 1px solid rgb(239 211 147 / 0.42);
    background: none;
    transform: translateZ(8px) skewX(-7deg);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-foreground span {
    top: var(--r5-image-top);
    bottom: var(--r5-image-bottom);
    left: calc(var(--r5-image-left) + 0.3rem);
    opacity: 0.7;
    background: linear-gradient(transparent 2%, rgb(235 202 134 / 0.7) 18%, rgb(235 202 134 / 0.15) 86%, transparent);
    transform: skewX(-3deg);
  }

  body[data-current="home"] .zh-hero-r5 .zh-hero-r5-foreground i {
    top: 8%;
    right: 4%;
    width: 7rem;
    height: 7rem;
    opacity: 0.62;
  }

  body[data-current="home"] .zh-hero-r5 .stage-identity,
  body[data-current="home"] .zh-hero-r5 .stage-console {
    z-index: 10;
  }

  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .zh-hero-r5-backdrop,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .stage-atmosphere-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .living-score,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .stage-media,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .stage-foreground-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .zh-hero-r5-foreground,
  body[data-current="home"] .zh-hero-r5[data-spatial-ready="true"] .stage-light {
    transition: none !important;
  }

  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .zh-hero-r5-backdrop,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .stage-atmosphere-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .living-score,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .stage-media,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .stage-foreground-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="active"] .zh-hero-r5-foreground,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .zh-hero-r5-backdrop,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .stage-atmosphere-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .living-score,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .stage-media,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .stage-copy,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .stage-foreground-r4,
  body[data-current="home"] .zh-hero-r5[data-spatial-pointer="returning"] .zh-hero-r5-foreground {
    will-change: transform;
  }
}

@media (min-width: 1600px) {
  body[data-current="home"] .zh-hero-r5 {
    --r5-image-left: 40.5%;
    --r5-image-right: clamp(4rem, 6vw, 8rem);
  }

  body[data-current="home"] .zh-hero-r5 .stage-copy h1,
  body[data-current="home"] .zh-hero-r5 .stage-copy h2 {
    width: min(66%, 13.2em);
  }
}

/* Desktop image-led editorial stage: widen the existing visual plane only. */
@media (min-width: 1101px) {
  body[data-current="home"] .zh-hero-r5 {
    --r5-image-left: 20%;
    --r5-image-right: 0px;
    --r5-image-bottom: 0px;
  }

  body[data-current="home"] .zh-hero-r5 .stage-media,
  body[data-current="home"] .zh-hero-r5 .headline-stage-slide.is-active .stage-media,
  body[data-current="home"] .zh-hero-r5[data-score-state="playing"] .headline-stage-slide.is-active .stage-media {
    inset: clamp(1.25rem, 3vh, 2.5rem) 0 0 20%;
    width: 80%;
    height: calc(100% - clamp(1.25rem, 3vh, 2.5rem));
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 1.5% 72%);
    box-shadow: -2rem 1.8rem 5.5rem rgba(10, 5, 9, .34);
  }

  body[data-current="home"] .zh-hero-r5 .stage-scrim {
    background:
      linear-gradient(
        90deg,
        rgba(18, 8, 14, .98) 0%,
        rgba(27, 9, 17, .92) 15%,
        rgba(32, 10, 19, .78) 29%,
        rgba(25, 8, 15, .48) 43%,
        rgba(16, 7, 12, .14) 65%,
        rgba(16, 7, 12, .12) 100%
      ),
      linear-gradient(
        0deg,
        rgba(15, 8, 13, .82) 0%,
        rgba(15, 8, 13, .09) 44%,
        rgba(15, 8, 13, .26) 100%
      );
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide:nth-child(1) .stage-media {
    object-position: 56% 41%;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide:nth-child(2) .stage-media {
    object-position: 52% 46%;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide:nth-child(3) .stage-media {
    object-position: 50% 48%;
  }

  body[data-current="home"] .zh-hero-r5 .headline-stage-slide:nth-child(4) .stage-media {
    object-position: 58% 40%;
  }
}