/*
 * Five finite photographic exposures carried by the existing chapter bridges
 * and the Yunnan–Shanghai route. This layer creates no interactive controls.
 */

#memoryProjection {
  --memory-exposure-image: none;
}

#memoryProjection::after {
  position: absolute;
  z-index: 4;
  top: 3%;
  right: -5%;
  width: min(76vw, 1100px);
  height: 92vh;
  border-radius: 48% 52% 46% 54%;
  content: "";
  opacity: 0;
  pointer-events: none;
  background-image: var(--memory-exposure-image);
  background-position: center;
  background-size: cover;
  filter: grayscale(0.14) saturate(0.74) contrast(0.92) blur(9px);
  mask-image:
    radial-gradient(
      ellipse 58% 54% at 50% 48%,
      #000 8%,
      rgb(0 0 0 / 0.66) 44%,
      transparent 78%
    );
  mix-blend-mode: soft-light;
  transform: translate3d(
    calc(var(--projection-x, 0px) * 0.72),
    calc(var(--projection-y, 0px) * 0.72),
    0
  ) scale(1.08);
  transition:
    opacity 320ms ease,
    filter 620ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

#memoryProjection.is-memory-exposure-visible::after {
  opacity: 0.18;
  filter: grayscale(0.05) saturate(0.9) contrast(0.96) blur(6px);
  transform: translate3d(
    calc(var(--projection-x, 0px) * 0.72),
    calc(var(--projection-y, 0px) * 0.72),
    0
  ) scale(1.035);
}

#memoryProjection[data-memory-exposure="01"]::after {
  background-position: center 58%;
}

#memoryProjection[data-memory-exposure="02"]::after,
#memoryProjection[data-memory-exposure="04"]::after {
  background-position: center;
}

#memoryProjection[data-memory-exposure="03"]::after {
  background-position: center 42%;
}

#memoryProjection[data-memory-exposure="05"]::after {
  right: -1%;
  width: 92vw;
  background-position: center 32%;
  mix-blend-mode: multiply;
}

.chapter-bridge.has-memory-exposure i::before {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 38px;
  height: 15px;
  border: 1px solid rgb(var(--sky-b) / 0.2);
  border-radius: 2px;
  content: "";
  opacity: 0.46;
  pointer-events: none;
  background:
    linear-gradient(rgb(12 16 22 / 0.08), rgb(12 16 22 / 0.3)),
    var(--memory-exposure-thumb, linear-gradient(90deg, transparent, currentColor));
  background-position: center;
  background-size: cover;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.035),
    0 0 18px rgb(var(--sky-b) / 0.07);
  filter: grayscale(0.22) saturate(0.72);
  transform: translateY(-50%) scaleX(0.86);
  transform-origin: right center;
  transition:
    opacity 360ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter-bridge.has-memory-exposure:hover i::before,
.chapter-bridge.has-memory-exposure:focus-visible i::before,
.chapter-bridge.is-carrying-exposure i::before {
  opacity: 0.78;
  filter: grayscale(0.04) saturate(0.9);
  transform: translateY(-50%) scaleX(1);
}

.chapter-bridge.is-carrying-exposure {
  border-color: rgb(var(--sky-b) / 0.38);
}

.city-pair__memory-exposures {
  pointer-events: none;
}

.city-pair__memory-exposure {
  opacity: 0.52;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.city-pair__memory-exposure-wash {
  fill: rgb(231 205 175 / 0.035);
  stroke: rgb(231 205 175 / 0.22);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.city-pair__memory-exposure-core {
  fill: rgb(239 215 184 / 0.72);
  filter: drop-shadow(0 0 7px rgb(229 195 163 / 0.26));
}

.city-pair__memory-exposure-word {
  fill: rgb(104 75 73 / 0.54);
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  paint-order: stroke;
  stroke: rgb(255 248 239 / 0.46);
  stroke-width: 1.4px;
  vector-effect: non-scaling-stroke;
}

.city-pair__memory-exposure.is-passed {
  opacity: 0.94;
}

.city-pair__memory-exposure.is-passed .city-pair__memory-exposure-wash {
  fill: rgb(225 188 155 / 0.08);
  stroke: rgb(203 154 134 / 0.42);
}

.city-pair__memory-exposure.is-passed .city-pair__memory-exposure-core {
  fill: rgb(201 143 126 / 0.84);
}

body.archive-is-open #memoryProjection::after,
body.moon-secret-is-open #memoryProjection::after {
  opacity: 0 !important;
}

body.is-data-saver #memoryProjection::after {
  display: none;
}

body.is-data-saver .chapter-bridge.has-memory-exposure i::before {
  background-image: linear-gradient(90deg, transparent, currentColor);
  filter: none;
}

@media (max-width: 700px) {
  #memoryProjection::after {
    top: 8%;
    right: -28%;
    width: 118vw;
    height: 76svh;
    opacity: 0;
    filter: grayscale(0.16) saturate(0.72) contrast(0.92) blur(8px);
    mask-image:
      radial-gradient(
        ellipse 54% 50% at 56% 46%,
        #000 7%,
        rgb(0 0 0 / 0.56) 42%,
        transparent 76%
      );
  }

  #memoryProjection.is-memory-exposure-visible::after {
    opacity: 0.13;
  }

  .chapter-bridge.has-memory-exposure i::before {
    right: 10px;
    width: 28px;
    height: 12px;
  }

  .city-pair__memory-exposure-word {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #memoryProjection::after,
  .chapter-bridge.has-memory-exposure i::before,
  .city-pair__memory-exposure {
    transition-duration: 0.01ms !important;
  }

  #memoryProjection::after {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  #memoryProjection::after,
  .chapter-bridge.has-memory-exposure i::before,
  .city-pair__memory-exposures {
    display: none;
  }
}