:root {
  --blue: #0757a7;
  --blue-deep: #073a75;
  --ink: #082f5d;
  --paper: #fff8e9;
  --orange: #ff9d19;
  --yellow: #ffc928;
  --white: #fffdf7;
  --shadow: 0 16px 40px rgba(3, 39, 82, .2);
}

* { box-sizing: border-box; }

html {
  background: #07366d;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.phone-canvas,
.map-canvas,
.detail-canvas {
  width: min(100%, 520px);
  margin: 0 auto;
  position: relative;
  background: var(--paper);
  box-shadow: 0 0 80px rgba(0, 0, 0, .28);
}

.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
}

.round-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  color: white;
  background: rgba(4, 48, 97, .88);
  box-shadow: 0 8px 24px rgba(3, 38, 77, .2);
  font-size: 22px;
}

.primary-button,
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.primary-button {
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: 5px 16px 5px 16px;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 5px 6px 0 var(--ink), 0 0 32px rgba(255, 201, 40, .42);
  letter-spacing: .08em;
  animation: button-breathe 2.4s ease-in-out infinite;
}

.primary-button:active {
  transform: translate(4px, 5px);
  box-shadow: 1px 1px 0 var(--ink);
}

.primary-button--dark {
  margin-top: 32px;
  color: white;
  background: var(--blue);
  box-shadow: 5px 6px 0 var(--ink);
  animation: none;
}

/* Cover */
.cover-page { background: #07366d; }

.cover {
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #eaf6ff;
}

.cover__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cover-push 12s ease-out both;
}

.cover__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,253,244,.12) 0%, rgba(255,253,244,.08) 43%, rgba(4,63,121,.12) 72%, rgba(4,47,93,.48) 100%);
}

.cover__content {
  position: absolute;
  z-index: 2;
  top: max(9vh, 58px);
  left: 9%;
  right: 9%;
  animation: rise-in .9s .15s both;
}

.cover__content h1 {
  max-width: 330px;
  margin: 12px 0 16px;
  color: var(--ink);
  font-size: clamp(39px, 11vw, 58px);
  line-height: .98;
  letter-spacing: -.07em;
  text-shadow: 0 2px 0 rgba(255,255,255,.75);
}

.cover__content h1 span {
  display: block;
  color: var(--blue);
  font-size: .62em;
  letter-spacing: .04em;
  margin-bottom: 9px;
}

.cover__lead {
  margin: 0;
  color: #124d84;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.8;
}

.cover__action {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: max(6vh, 42px);
  left: 9%;
  animation: rise-in .9s .6s both;
}

.cover__action > p {
  margin: 15px 0 0;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
}

.mist {
  position: absolute;
  z-index: 1;
  width: 78%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.24), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.mist--one { top: 35%; left: -45%; animation: mist-drift 9s ease-in-out infinite alternate; }
.mist--two { top: 55%; right: -52%; animation: mist-drift 12s -3s ease-in-out infinite alternate-reverse; }

.journey-transition {
  position: absolute;
  z-index: 30;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--paper);
  border-radius: 5px 16px 5px 16px;
  transform: translate3d(0, -6svh, 0) scale3d(.84, .075, 1);
  transform-origin: center bottom;
  backface-visibility: hidden;
  contain: paint;
  will-change: transform, opacity;
}

.journey-transition > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}

.journey-transition::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7px;
  border: 1.5px solid rgba(255,255,255,.72);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(7,87,167,.2);
}

.journey-transition::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .16;
  background:
    repeating-linear-gradient(168deg, rgba(7,87,167,.12) 0 1px, transparent 1px 7px);
}

.journey-transition__shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,250,235,.3) 0%, rgba(255,250,235,.06) 44%, rgba(5,48,94,.42) 100%);
}

.journey-transition__copy,
.journey-transition__footer,
.journey-stamp,
.journey-route {
  position: absolute;
  z-index: 4;
  opacity: 0;
}

.journey-transition__copy {
  top: 10%;
  left: 8%;
  color: var(--ink);
  transform: translateY(18px);
}

.journey-transition__copy p {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .19em;
}

.journey-transition__copy h2 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(42px, 12vw, 62px);
  line-height: .98;
  letter-spacing: -.07em;
  text-shadow: 0 2px 0 rgba(255,255,255,.72);
}

.journey-transition__copy > span {
  display: block;
  margin-top: 14px;
  color: #245d8e;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
}

.journey-stamp {
  top: 8%;
  right: 7%;
  display: grid;
  width: 70px;
  height: 70px;
  place-content: center;
  border: 2px dashed rgba(7,87,167,.7);
  border-radius: 50%;
  color: var(--blue);
  background: rgba(255,248,233,.46);
  text-align: center;
  transform: rotate(13deg) scale(.55);
}

.journey-stamp::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(7,87,167,.52);
  border-radius: 50%;
}

.journey-stamp span {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .12em;
}

.journey-stamp small {
  display: block;
  margin-top: 2px;
  font-size: 6px;
  font-weight: 850;
  letter-spacing: .14em;
}

.journey-route {
  right: 3%;
  bottom: 21%;
  width: 78%;
  overflow: visible;
}

.journey-route path {
  fill: none;
  stroke: rgba(255,201,40,.96);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 9;
}

.journey-route circle {
  fill: var(--yellow);
  stroke: white;
  stroke-width: 3;
}

.journey-transition__footer {
  right: 8%;
  bottom: 6%;
  left: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  transform: translateY(12px);
}

.journey-transition__footer span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.journey-transition__footer strong {
  font-size: 11px;
  letter-spacing: .08em;
}

.cover.is-leaving .cover__image,
.cover.is-leaving .mist,
.cover.is-leaving .primary-button {
  animation-play-state: paused;
}
.cover.is-leaving .cover__content,
.cover.is-leaving .cover__action { opacity: 0; transform: translateY(-8px); transition: .22s ease; }
.cover.is-leaving .journey-transition {
  visibility: visible;
  opacity: 1;
  animation: postcard-open .56s cubic-bezier(.72,0,.18,1) forwards;
}
.cover.is-leaving .journey-transition > img { animation: postcard-image .56s cubic-bezier(.2,.8,.2,1) forwards; }
.cover.is-leaving .journey-transition__copy { animation: postcard-copy .26s .3s ease forwards; }
.cover.is-leaving .journey-stamp { animation: postcard-stamp .24s .34s cubic-bezier(.2,.9,.3,1.25) forwards; }
.cover.is-leaving .journey-route { animation: postcard-detail .2s .38s ease forwards; }
.cover.is-leaving .journey-transition__footer { animation: postcard-detail .18s .4s ease forwards; }

/* Map */
.map-page { background: #07366d; }

.map-nav {
  position: fixed;
  z-index: 20;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  width: min(calc(100% - 24px), 496px);
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 28px;
  color: white;
  background: rgba(5,61,117,.9);
  box-shadow: 0 12px 30px rgba(3,42,85,.16);
  transform: translateX(-50%);
}

.map-nav > div { padding-left: 10px; }
.map-nav strong { display: block; font-size: 13px; }
.map-nav span { display: block; margin-top: 2px; font-size: 9px; opacity: .78; letter-spacing: .06em; }
.map-nav .map-nav__count { margin: 0 8px 0 0; font-weight: 800; font-size: 11px; opacity: 1; }

.map-panel {
  position: relative;
  aspect-ratio: 750 / 1624;
  overflow: hidden;
  background: #e7f5fd;
}

.map-panel--intro,
.map-panel--outro {
  aspect-ratio: 941 / 1672;
}

.map-panel > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent, rgba(7,87,167,.12));
  pointer-events: none;
}

.map-intro,
.map-outro {
  position: absolute;
  z-index: 4;
  left: 9%;
  color: var(--ink);
}

.map-intro { top: 13%; }
.map-intro h1,
.map-outro h2 {
  margin: 10px 0 14px;
  color: var(--blue);
  font-size: clamp(38px, 11vw, 58px);
  line-height: 1.03;
  letter-spacing: -.06em;
}

.map-intro > p:last-child,
.map-outro > p {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.75;
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  right: 9%;
  bottom: 7%;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 42px;
  margin: 0 auto 10px;
  background: var(--blue);
  animation: scroll-line 1.8s ease-in-out infinite;
}

.spot-hotspot {
  position: absolute;
  z-index: 5;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  border-radius: 18px;
  cursor: pointer;
}

.spot-hotspot::before,
.spot-hotspot::after,
.hotspot-ring {
  position: absolute;
  z-index: 2;
  top: var(--hint-y);
  left: var(--hint-x);
  opacity: 0;
  pointer-events: none;
}

.spot-hotspot::before {
  content: "↗";
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  box-shadow:
    3px 4px 0 var(--ink),
    0 0 0 0 rgba(255, 201, 40, .72);
  font-size: 18px;
  font-weight: 950;
  transform: translate(-50%, -50%) scale(.5);
}

.spot-hotspot::after {
  content: "点击探索";
  min-width: 64px;
  padding: 5px 8px;
  border-radius: 999px;
  color: white;
  background: rgba(7, 58, 117, .96);
  box-shadow: 0 5px 14px rgba(4, 46, 92, .2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  transform: translate(-50%, 27px);
}

.spot-hotspot.is-visible::before {
  animation: hotspot-enter .55s var(--delay) cubic-bezier(.2,.8,.2,1) forwards;
}

.spot-hotspot.is-visible::after {
  animation:
    hotspot-label-in .5s calc(var(--delay) + .15s) ease forwards,
    hotspot-label-float 2.2s calc(var(--delay) + .65s) ease-in-out infinite;
}

.hotspot-ring {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 201, 40, .9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.9);
}

.spot-hotspot.is-visible .hotspot-ring {
  animation: hotspot-ring 2.2s calc(var(--delay) + .55s) ease-out infinite;
}

.spot-hotspot.is-visited::before {
  content: "✓";
  color: white;
  background: var(--blue);
  box-shadow: 3px 4px 0 var(--ink);
}

.spot-hotspot.is-visited::after {
  content: "已到访";
  color: var(--ink);
  background: var(--yellow);
}

.spot-hotspot.is-visited .hotspot-ring {
  animation: none;
  opacity: 0;
}

.spot-hotspot:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 4px;
}

.spot-hotspot:active::before {
  transform: translate(-50%, -50%) scale(.82);
  transition: transform .12s ease;
}

.map-outro {
  top: 12%;
  right: 9%;
}
.map-outro h2 { max-width: 310px; }
.map-outro.is-complete h2 { color: #0757a7; }
.map-outro.is-complete .eyebrow { color: #d26d00; }
.secondary-button {
  width: max-content;
  margin-top: 24px;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 3px 12px 3px 12px;
  color: white;
  background: var(--blue);
  box-shadow: 4px 5px 0 var(--ink);
}

/* Detail */
.detail-page { background: #07366d; }
.detail-canvas { min-height: 100vh; overflow: hidden; }

.detail-back {
  position: fixed;
  z-index: 20;
  top: max(16px, env(safe-area-inset-top));
  left: max(calc(50% - 244px), 16px);
}

.detail-hero {
  position: relative;
  height: min(78svh, 720px);
  min-height: 570px;
  overflow: hidden;
  background: var(--blue);
}

.detail-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: detail-image-in 1.1s ease both;
}

.detail-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4,39,78,.1) 62%, rgba(4,36,72,.9) 100%);
}

.detail-title {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 7%;
  left: 8%;
  color: white;
  animation: rise-in .75s .2s both;
}

.detail-title .eyebrow { color: #ffe27b; }
.detail-title h1 {
  margin: 9px 0 9px;
  font-size: clamp(43px, 12vw, 64px);
  line-height: .98;
  letter-spacing: -.06em;
  text-shadow: 0 3px 0 rgba(4,44,88,.35);
}
.detail-title > p:last-child {
  max-width: 360px;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.detail-sheet {
  position: relative;
  z-index: 3;
  margin-top: -18px;
  padding: 38px 8% max(50px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(7,87,167,.07), transparent 25%),
    var(--paper);
  box-shadow: 0 -16px 42px rgba(4,38,76,.16);
  animation: sheet-in .8s .15s both;
}

.detail-index {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  padding-bottom: 22px;
  border-bottom: 2px solid rgba(7,87,167,.18);
}
.detail-index span {
  color: var(--blue);
  font-size: 54px;
  font-weight: 950;
  line-height: .8;
  letter-spacing: -.08em;
}
.detail-index p {
  margin: 0;
  color: var(--blue);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .12em;
}

.detail-sheet section { padding-top: 30px; }
.detail-sheet h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 18px;
  letter-spacing: -.02em;
}
.detail-sheet section p {
  margin: 0;
  color: #284d70;
  font-size: 14px;
  line-height: 1.9;
}

.detail-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding: 18px 0;
  border-top: 2px solid rgba(7,87,167,.18);
  border-bottom: 2px solid rgba(7,87,167,.18);
}
.detail-time span { color: #65809b; font-size: 12px; font-weight: 750; }
.detail-time strong { color: var(--blue); font-size: 15px; text-align: right; }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.tags span {
  padding: 7px 11px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  background: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 750;
  opacity: 0;
  animation: tag-in .45s ease forwards;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cover-push {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}
@keyframes button-breathe {
  0%,100% { box-shadow: 5px 6px 0 var(--ink), 0 0 20px rgba(255,201,40,.32); }
  50% { box-shadow: 5px 6px 0 var(--ink), 0 0 40px rgba(255,201,40,.72); }
}
@keyframes mist-drift {
  to { transform: translateX(150%); opacity: .08; }
}
@keyframes postcard-open {
  0% {
    border-radius: 5px 16px 5px 16px;
    transform: translate3d(0, -6svh, 0) scale3d(.84, .075, 1);
  }
  48% {
    border-radius: 14px;
    transform: translate3d(0, -12svh, 0) scale3d(.92, .58, 1);
  }
  100% {
    border-radius: 0;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
@keyframes postcard-image {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@keyframes postcard-copy {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes postcard-stamp {
  to { opacity: .86; transform: rotate(13deg) scale(1); }
}
@keyframes postcard-detail {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-line {
  0%,100% { transform: scaleY(.55); transform-origin: top; opacity: .45; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes hotspot-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-18deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes hotspot-ring {
  0% { opacity: .78; transform: translate(-50%, -50%) scale(.9); }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); }
}
@keyframes hotspot-label-in {
  from { opacity: 0; transform: translate(-50%, 21px); }
  to { opacity: 1; transform: translate(-50%, 27px); }
}
@keyframes hotspot-label-float {
  0%, 100% { opacity: 1; transform: translate(-50%, 27px); }
  50% { opacity: .86; transform: translate(-50%, 31px); }
}
@keyframes detail-image-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(35px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tag-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
  .detail-back { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}