/* Native document scroll carries the reader from the office to the city. */
.shanghai-story {
  position: relative;
  isolation: isolate;
  color: #f1f5f3;
  background: #071721;
  --shanghai-mix: 0;
  --office-scale: 1;
  --skyline-scale: 1.08;
}
.shanghai-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.shanghai-story.is-entering { background: transparent; }
.shanghai-story.is-entering .shanghai-stage {
  transform: translate3d(0, var(--shanghai-entry-lift, 0px), 0);
  opacity: var(--shanghai-entry-opacity, 1);
}
.shanghai-visuals,
.shanghai-visuals img,
.shanghai-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.shanghai-visuals img { object-fit: cover; }
.shanghai-office-photo {
  object-position: 58% 50%;
  transform: scale(var(--office-scale));
  transform-origin: 66% 45%;
}
.shanghai-skyline-photo {
  object-position: 55% 50%;
  opacity: var(--shanghai-mix);
  transform: scale(var(--skyline-scale));
  transform-origin: 62% 48%;
}
.shanghai-story.is-visible .shanghai-visuals img { will-change: transform, opacity; }
.shanghai-shade {
  background:
    linear-gradient(180deg, #071721 0%, #07172152 14%, transparent 32%, #07172130 70%, #071721e6 100%),
    linear-gradient(90deg, #04131cdb 0%, #04131ca8 25%, #04131c24 60%, transparent 80%);
}
.shanghai-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 100svh;
  padding: 140px var(--gutter) 140px;
  scroll-margin-top: 0;
}
.shanghai-step .eyebrow {
  color: #b6e3e1;
  margin-bottom: 28px;
  letter-spacing: .15em;
}
.shanghai-step .eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: #4dbac0;
  flex: none;
}
.shanghai-step h2,
.shanghai-step h3 {
  max-width: 9.5em;
  color: #f1f5f3;
  font-size: clamp(48px, 6.1vw, 96px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.1;
  text-wrap: balance;
}
.shanghai-step h2 span,
.shanghai-step h3 span { color: #a6d8d5; }
.shanghai-step > p:not(.eyebrow) {
  max-width: 370px;
  margin-top: 28px;
  color: #e0e9e9;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.85;
}
.shanghai-step .text-link {
  margin-top: 27px;
  min-height: 48px;
  border-color: #a6d8d56b;
  color: #f1f5f3;
  font-size: 14px;
}
.shanghai-step .text-link > span { color: #75d0d1; }
.shanghai-caption {
  position: absolute;
  inset: auto var(--gutter) 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #d4e4e5;
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.shanghai-caption-location { display: flex; align-items: center; gap: 12px; }
.shanghai-caption-location::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4dbac0;
  box-shadow: 0 0 12px #4dbac066;
}
.shanghai-caption small { font-size: 9px; letter-spacing: .03em; opacity: .8; }
.shanghai-story:not(.is-enhanced) .shanghai-step:last-child {
  background:
    linear-gradient(90deg, #04131cdb, #04131c50 65%, #04131c18),
    linear-gradient(180deg, #071721, transparent 20%, transparent 75%, #071721),
    url('./assets/shanghai/skyline.webp') 55% center / cover;
}
@media (max-width: 760px) {
  .shanghai-step { padding: 150px var(--gutter) 130px; justify-content: flex-end; }
  .shanghai-step h2,
  .shanghai-step h3 { font-size: clamp(40px, 10.5vw, 64px); max-width: 10em; }
  .shanghai-step .eyebrow { font-size: 10px; margin-bottom: 23px; }
  .shanghai-step > p:not(.eyebrow) { max-width: 320px; margin-top: 20px; font-size: 15px; line-height: 1.75; }
  .shanghai-office-photo { object-position: 34% center; transform-origin: 60% 42%; }
  .shanghai-skyline-photo { object-position: 56% center; }
  .shanghai-shade {
    background: linear-gradient(180deg, #071721 0%, #07172138 18%, #07172126 38%, #04131cba 59%, #071721ef 100%);
  }
  .shanghai-caption { bottom: 27px; flex-wrap: wrap; gap: 7px 18px; font-size: 9px; }
  .shanghai-caption small { font-size: 9px; }
  .shanghai-step .text-link { margin-top: 22px; font-size: 13px; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .shanghai-step { padding-top: 110px; padding-bottom: 100px; }
  .shanghai-step h2,
  .shanghai-step h3 { font-size: 54px; }
  .shanghai-step .eyebrow { margin-bottom: 18px; }
  .shanghai-step > p:not(.eyebrow) { margin-top: 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .shanghai-visuals img { transform: none; }
}
.motion-paused .shanghai-visuals img { transform: none; }