/*
 * City Cinema — final-scene progressive enhancement.
 * Load after final-ritual.css. Everything is namespaced to .city-cinema-*.
 */

.city-cinema-mounted {
  --cc-parallax-x: 0;
  --cc-parallax-y: 0;
  --cc-pointer-x: 50%;
  --cc-pointer-y: 50%;
  cursor: default;
}

.scroll-painting #daybreak .colophon {
  /*
   * Keep the final scene's own full-viewport frame.  Resetting this to 100%
   * shrank the grid to the chapter shell before the child tried to break out,
   * producing the visible right-hand seam on mobile.
   */
  width: 100vw;
  width: 100dvw;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted {
  width: 100vw;
  width: 100dvw;
  min-height: max(100svh, 36rem);
  height: max(100svh, 36rem);
  /*
   * Break out of the padded colophon with one coordinate system.  The old
   * margin/left/translate compensation left the canvas narrower than its
   * painted world on several mobile aspect ratios, which exposed a hard
   * vertical edge through Shanghai.
   */
  margin:
    clamp(3.5rem, 9vh, 7rem)
    calc(50% - 50vw)
    0;
  left: auto;
  border: 0;
  border-radius: 0;
  background: #020913;
  box-shadow: none;
  translate: none;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted #closingPrompt {
  /*
   * The semantic prompt remains in the document and is announced before the
   * ritual.  Visually it duplicated the operative sentence and made three
   * lines compete above the moon, so the cinematic frame keeps one direction.
   */
  display: none !important;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted::before,
.scroll-painting #daybreak .city-pair.city-cinema-mounted::after {
  border-radius: 0;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted + :is(.page-warmth-summary, .colophon__title) {
  margin-top: clamp(2.2rem, 5vh, 4rem);
}

.scroll-painting #daybreak .archive-door {
  margin-top: clamp(13rem, 30svh, 22rem);
}

.city-cinema-mounted .city-cinema__world {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform:
    translate3d(
      calc(var(--cc-parallax-x) * -7px),
      calc(var(--cc-parallax-y) * -4px),
      0
    )
    scale(1.02);
  transform-origin: 78% 59%;
  transition:
    filter 1.8s cubic-bezier(.16, 1, .3, 1),
    transform 1.8s cubic-bezier(.16, 1, .3, 1);
}

.city-cinema-mounted > svg {
  z-index: 3 !important;
  opacity: 0 !important;
  filter: none !important;
  pointer-events: auto;
  animation: none !important;
  transition: none !important;
}

.city-cinema-mounted .city-cinema__canvas {
  position: absolute;
  inset: 0;
  display: block;
  /*
   * JS sizes the backing store from the host.  Force its CSS box to the same
   * full-bleed frame instead of inheriting the former overscan inset.
   */
  width: 100% !important;
  height: 100% !important;
}

.city-cinema-mounted .city-cinema__atmosphere {
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(ellipse 24% 38% at 79% 29%, rgb(190 214 217 / .08), transparent 78%),
    radial-gradient(ellipse 38% 22% at 18% 75%, rgb(74 130 128 / .1), transparent 72%),
    linear-gradient(180deg, transparent 56%, rgb(0 8 14 / .18));
  mix-blend-mode: screen;
  transform:
    translate3d(
      calc(var(--cc-parallax-x) * -10px),
      calc(var(--cc-parallax-y) * -5px),
      0
    );
  transition: opacity 1.6s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.city-cinema-mounted .city-cinema__pointer-light {
  position: absolute;
  top: var(--cc-pointer-y);
  left: var(--cc-pointer-x);
  width: clamp(130px, 19vw, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgb(238 214 170 / .11), rgb(125 178 185 / .045) 34%, transparent 72%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(.84);
  transition: opacity .65s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.city-cinema-mounted.has-city-cinema-pointer .city-cinema__pointer-light {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.city-cinema-mounted .city-cinema__grain {
  position: absolute;
  inset: -40%;
  opacity: .09;
  background:
    repeating-radial-gradient(circle at 17% 31%, rgb(255 255 255 / .1) 0 .45px, transparent .6px 3px),
    repeating-radial-gradient(circle at 72% 66%, rgb(0 0 0 / .26) 0 .5px, transparent .7px 3.6px);
  background-size: 7px 9px, 11px 13px;
  mix-blend-mode: soft-light;
  transform: translate3d(-.5%, .4%, 0);
}

.city-cinema-mounted[data-city-cinema-state="ready"] .city-cinema__world,
.city-cinema-mounted[data-city-cinema-state="travelling"] .city-cinema__world {
  filter: saturate(1.06) contrast(1.035);
}

.city-cinema-mounted[data-city-cinema-state="travelling"] .city-cinema__atmosphere {
  opacity: .9;
}

.city-cinema-mounted[data-city-cinema-state="arrived"] .city-cinema__world,
.city-cinema-mounted.has-route-arrived .city-cinema__world {
  filter: saturate(1.12) contrast(1.06) brightness(1.04);
  transform:
    translate3d(
      calc(var(--cc-parallax-x) * -4px),
      calc(var(--cc-parallax-y) * -2px - 1.2%),
      0
    )
    scale(1.075);
}

.city-cinema-mounted[data-city-cinema-state="arrived"] .city-cinema__atmosphere,
.city-cinema-mounted.has-route-arrived .city-cinema__atmosphere {
  opacity: 1;
  background:
    radial-gradient(ellipse 30% 44% at 79% 29%, rgb(229 218 183 / .13), transparent 76%),
    radial-gradient(ellipse 42% 23% at 19% 74%, rgb(88 145 140 / .12), transparent 72%),
    linear-gradient(180deg, transparent 48%, rgb(11 31 41 / .12));
}

.city-cinema-mounted[data-city-cinema-hover="route"] {
  cursor: ew-resize;
}

.city-cinema-mounted[data-city-cinema-hover="moon"] {
  cursor: pointer;
}

.city-cinema-mounted.is-city-cinema-dragging {
  cursor: grabbing;
  user-select: none;
}

.city-cinema-mounted[data-city-cinema-hover="yunnan"] .city-pair__place--yunnan,
.city-cinema-mounted[data-city-cinema-awake="yunnan"] .city-pair__place--yunnan,
.city-cinema-mounted[data-city-cinema-hover="shanghai"] .city-pair__place--shanghai,
.city-cinema-mounted[data-city-cinema-awake="shanghai"] .city-pair__place--shanghai {
  color: rgb(248 231 198 / .98) !important;
  text-shadow:
    0 2px 18px rgb(0 4 8 / .78),
    0 0 24px rgb(214 174 112 / .24) !important;
  transform: translateY(-3px);
}

.city-cinema-mounted .city-pair__place {
  pointer-events: none;
}

.city-cinema-mounted .city-pair__place::before {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: .1em;
  content: "";
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .38;
  vertical-align: middle;
  transform-origin: right center;
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}

.city-cinema-mounted[data-city-cinema-hover="yunnan"] .city-pair__place--yunnan::before,
.city-cinema-mounted[data-city-cinema-hover="shanghai"] .city-pair__place--shanghai::before {
  opacity: .82;
  transform: scaleX(1.35);
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint {
  /*
   * Treat the copy as two independently directed shots: one main sentence in
   * the quiet upper sky, and one practical/privacy cue close to the light.
   */
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  width: auto;
  margin: 0;
  color: rgb(241 229 207 / .94);
  font-family: var(--serif);
  pointer-events: none;
  transform: none;
  opacity: 1;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint > span {
  position: absolute;
  top: clamp(7.6rem, 18svh, 10.4rem);
  left: 50%;
  width: min(31em, calc(100% - 3rem));
  color: inherit;
  font-size: clamp(1.04rem, 1.45vw, 1.32rem);
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.85;
  text-align: center;
  text-shadow:
    0 2px 22px rgb(0 4 9 / .95),
    0 0 42px rgb(2 10 17 / .78);
  text-wrap: balance;
  transform: translateX(-50%);
  transition:
    top 1.5s cubic-bezier(.16, 1, .3, 1),
    opacity .9s ease,
    transform 1.5s cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint small {
  position: absolute;
  top: 65.5%;
  left: 18.5%;
  display: block;
  width: min(19rem, 58vw);
  padding-left: 2.35rem;
  color: rgb(200 209 205 / .8);
  font-family: var(--sans);
  font-size: clamp(.63rem, .8vw, .72rem);
  letter-spacing: .08em;
  line-height: 1.75;
  text-align: left;
  text-shadow: 0 2px 18px rgb(0 4 9 / .96);
  opacity: .88;
  transform: translateY(-50%);
  transition:
    opacity .55s ease,
    transform .75s cubic-bezier(.16, 1, .3, 1);
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint small::before {
  position: absolute;
  top: .72em;
  left: 0;
  width: 1.7rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgb(235 205 157 / .08), rgb(235 205 157 / .72));
  box-shadow: 0 0 12px rgb(226 184 120 / .28);
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted[data-city-cinema-state="travelling"] .city-pair__gesture-hint small {
  opacity: 0;
  transform: translate(1rem, -50%);
}

.city-cinema-mounted[data-city-cinema-state="travelling"] .city-pair__gesture-hint {
  text-shadow:
    0 2px 24px rgb(0 4 8 / .9),
    0 0 34px rgb(211 174 117 / .12) !important;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted:is(
  [data-city-cinema-state="arrived"],
  .has-route-arrived
) .city-pair__gesture-hint {
  inset: 0;
  width: auto;
  transform: none;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted:is(
  [data-city-cinema-state="arrived"],
  .has-route-arrived
) .city-pair__gesture-hint > span {
  top: 48%;
  width: min(29em, calc(100% - 3rem));
  color: rgb(248 230 198 / .97);
  font-size: clamp(1.28rem, 2.2vw, 1.9rem);
  letter-spacing: .11em;
  line-height: 1.95;
  transform: translate(-50%, -50%);
  transition-delay: .42s;
}

.scroll-painting #daybreak .city-pair.city-cinema-mounted:is(
  [data-city-cinema-state="arrived"],
  .has-route-arrived
) .city-pair__gesture-hint small {
  display: none;
}

.city-cinema-fallback {
  background:
    radial-gradient(circle at 79% 23%, rgb(222 216 188 / .17) 0 4%, transparent 18%),
    radial-gradient(ellipse 36% 18% at 19% 77%, rgb(65 117 116 / .21), transparent 72%),
    linear-gradient(180deg, #020812, #071a28 62%, #04121c) !important;
}

@media (max-width: 620px) {
  body.scroll-painting.is-final-bloom #daybreak .daybreak__final-wash {
    opacity: 0.14 !important;
    filter: opacity(0.18) saturate(0.8);
    animation: none !important;
    mix-blend-mode: soft-light;
  }

  .scroll-painting #daybreak .city-pair.city-cinema-mounted {
    width: 100vw;
    width: 100dvw;
    min-height: max(100svh, 32rem);
    height: max(100svh, 32rem);
    margin-top: 3rem;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    left: auto;
  }

  .scroll-painting #daybreak .archive-door {
    margin-top: clamp(9rem, 22svh, 14rem);
  }

  .scroll-painting #daybreak .archive-door__button small,
  .scroll-painting #daybreak .archive-door__action > p {
    color: rgb(228 216 195 / 0.76);
    font-size: 0.75rem;
    line-height: 1.55;
    opacity: 1;
  }

  .city-cinema-mounted .city-cinema__world {
    inset: 0;
    transform:
      translate3d(
        calc(var(--cc-parallax-x) * -4px),
        calc(var(--cc-parallax-y) * -2px),
        0
      )
      scale(1.015);
  }

  .city-cinema-mounted[data-city-cinema-state="arrived"] .city-cinema__world,
  .city-cinema-mounted.has-route-arrived .city-cinema__world {
    transform: translate3d(0, -1%, 0) scale(1.055);
  }

  .city-cinema-mounted .city-cinema__pointer-light {
    width: clamp(105px, 38vw, 160px);
  }

  .city-cinema-mounted .city-pair__place::before {
    width: 11px;
  }

  .scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint > span {
    top: clamp(8.8rem, 21svh, 11.6rem);
    width: min(22em, calc(100% - 2.5rem));
    font-size: clamp(.98rem, 4.6vw, 1.16rem);
    letter-spacing: .085em;
    line-height: 1.9;
  }

  .scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint small {
    top: 64%;
    left: 10%;
    width: min(16rem, 72vw);
    padding-left: 1.8rem;
    font-size: .62rem;
    line-height: 1.7;
  }

  .scroll-painting #daybreak .city-pair.city-cinema-mounted .city-pair__gesture-hint small::before {
    width: 1.25rem;
  }

  .scroll-painting #daybreak .city-pair.city-cinema-mounted:is(
    [data-city-cinema-state="arrived"],
    .has-route-arrived
  ) .city-pair__gesture-hint > span {
    top: 46%;
    width: min(19em, calc(100% - 2.5rem));
    font-size: clamp(1.18rem, 5.4vw, 1.5rem);
    letter-spacing: .075em;
    line-height: 1.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-cinema-mounted .city-cinema__world,
  .city-cinema-mounted .city-cinema__atmosphere,
  .city-cinema-mounted .city-cinema__pointer-light,
  .city-cinema-mounted .city-pair__place,
  .city-cinema-mounted .city-pair__place::before {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .city-cinema-mounted .city-cinema__world,
  .city-cinema-mounted[data-city-cinema-state="arrived"] .city-cinema__world,
  .city-cinema-mounted.has-route-arrived .city-cinema__world {
    transform: none;
  }

  .city-cinema-mounted .city-cinema__grain,
  .city-cinema-mounted .city-cinema__pointer-light {
    display: none;
  }
}

body.is-data-saver .city-cinema-mounted .city-cinema__grain,
body.is-data-saver .city-cinema-mounted .city-cinema__pointer-light {
  display: none;
}

body.is-data-saver .city-cinema-mounted .city-cinema__atmosphere {
  mix-blend-mode: normal;
}

@media (forced-colors: active) {
  .city-cinema-mounted .city-cinema__world {
    display: none;
  }

  .city-cinema-mounted > svg {
    opacity: 1 !important;
  }
}