/* ============================================================
   故事转场：目的地选中底板、首页插画的地形回应、出发车票。
   这一层用 GSAP 编排，CSS 只负责最终形态和静态兜底。
   ============================================================ */

/* ---------- 目的地选中底板 ---------- */
.destination-grid {
  position: relative;
}

.destination-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 26px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(150deg, #E9F0DE 0%, #DDE9CF 58%, #D5E2C6 100%);
  border: 1px solid #D2DFC2;
  box-shadow:
    0 9px 20px rgba(124, 147, 104, .16),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  transform-origin: 50% 50%;
}

#view-home.is-entering .destination-marker {
  visibility: hidden;
}

.destination-card {
  position: relative;
  z-index: 1;
}

.destination-card.selected {
  border-color: #879D73;
  box-shadow: 0 10px 22px rgba(133, 144, 107, .14);
}

@media (hover: hover) and (pointer: fine) {
  .destination-card.selected:hover {
    box-shadow: 0 15px 28px rgba(133, 144, 107, .18);
  }
}

.destination-card.check-drop .destination-check {
  animation: check-drop .48s cubic-bezier(.34, 1.56, .64, 1) .20s both;
}

@keyframes check-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(.35) rotate(-18deg); }
  62% { opacity: 1; transform: translateY(1px) scale(1.16) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ---------- 首页插画的地形回应 ---------- */
.hero-scene {
  position: absolute;
  inset: 11% 4% 10%;
  z-index: 2;
  overflow: hidden;
  border-radius: 26px;
  pointer-events: none;
}

.scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.hero-scene.is-coast .coast-scene,
.hero-scene.is-forest .forest-scene,
.hero-scene.is-mountain .mountain-scene {
  opacity: 1;
  visibility: visible;
}

/* 海岸：贝壳落在花箱里，水波扩散 */
.scene-shell {
  position: absolute;
  left: 59%;
  top: 17%;
  width: 46px;
  height: 38px;
  filter: drop-shadow(0 4px 5px rgba(157, 109, 94, .18));
  transform-origin: 50% 80%;
}

.scene-ripple {
  position: absolute;
  left: 63%;
  top: 27%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 2px solid rgba(116, 178, 199, .55);
  border-radius: 50%;
  opacity: 0;
}

.scene-ripple.r2 {
  border-color: rgba(160, 204, 214, .45);
}

.scene-splash {
  position: absolute;
  left: 63%;
  top: 25%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8FC8D7;
  opacity: 0;
}

.scene-splash.s1 { margin: -5px 0 0 -26px; }
.scene-splash.s2 { margin: -7px 0 0 20px; }
.scene-splash.s3 { margin: 2px 0 0 2px; }

/* 森林只保留蘑菇，不再在棋盘上叠加模糊绿色叶影。 */

.scene-mushroom {
  position: absolute;
  left: 17%;
  bottom: 23%;
  width: 42px;
  height: 48px;
  opacity: 1;
}

.scene-mushroom .m-cap {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 24px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, #DFA292 0%, #D08D7B 100%);
  box-shadow: 0 3px 6px rgba(126, 89, 77, .18);
}

.scene-mushroom .m-stem {
  position: absolute;
  left: 16px;
  top: 19px;
  width: 11px;
  height: 27px;
  border-radius: 5px;
  background: linear-gradient(180deg, #F9E8CA 0%, #EFDCBB 100%);
}

.scene-mushroom .m-dot {
  position: absolute;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: #FCE5CE;
}

.scene-mushroom .m-dot.d1 { left: 8px; top: 7px; }
.scene-mushroom .m-dot.d2 { left: 23px; top: 10px; width: 4px; height: 3px; }
.scene-mushroom .m-dot.d3 { left: 31px; top: 6px; width: 3px; height: 3px; }

/* 山丘：云朵飘入，舒展开 */
.scene-cloud {
  position: absolute;
  right: 7%;
  top: 13%;
  width: 112px;
  height: 54px;
  opacity: 1;
  filter: drop-shadow(0 7px 10px rgba(126, 140, 120, .14));
}

.scene-cloud i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFDF6 0%, #F2F0E4 100%);
  box-shadow: inset 0 1px 0 #FFF;
}

.scene-cloud i:nth-child(1) { left: 0; top: 22px; width: 46px; height: 32px; }
.scene-cloud i:nth-child(2) { left: 24px; top: 0; width: 54px; height: 54px; }
.scene-cloud i:nth-child(3) { right: 0; top: 19px; width: 48px; height: 35px; }

.scene-cloud-shadow {
  position: absolute;
  right: 8%;
  top: 35%;
  width: 96px;
  height: 14px;
  border-radius: 50%;
  background: rgba(139, 116, 91, .10);
  filter: blur(5px);
  opacity: .12;
}

/* 出发时让相片先收正 */
#view-home.is-departing .hero-picture {
  transform: perspective(900px) rotate(0deg) scale(.985) translateY(6px);
  opacity: .9;
  transition: transform .32s var(--m-ease-out, cubic-bezier(.22, 1, .36, 1)), opacity .32s ease;
}

/* ---------- 出发车票遮罩 ---------- */
.departure-layer {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 65% at 50% 42%, #FDF8ED 0%, rgba(253, 248, 237, 0) 70%),
    #F7F1E5;
  pointer-events: auto;
}

.departure-card {
  width: min(340px, 82vw);
  padding: 24px 24px 28px;
  position: relative;
  text-align: center;
  border: 1px solid #E6DCC8;
  border-radius: 20px;
  background: #FFFCF4;
  box-shadow:
    0 20px 60px rgba(90, 76, 52, .18),
    inset 0 1px 0 #FFF;
}

.departure-kicker {
  display: block;
  font-size: 9px;
  letter-spacing: 2.4px;
  color: #A39D88;
}

.departure-art {
  height: 154px;
  margin: 13px 0 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #F1EEE1;
}

.departure-art svg {
  width: 100%;
  height: 100%;
}

#departureName {
  display: block;
  font-size: 18px;
  letter-spacing: 1px;
  color: #4B5548;
}

.departure-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.7;
  color: #939A86;
}

.departure-stamp {
  position: absolute;
  right: -14px;
  top: 34%;
  width: 72px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #B06A53;
  border-radius: 50%;
  color: #B06A53;
  font-style: normal;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 1px;
  opacity: 0;
  transform: rotate(-8deg);
  box-shadow: inset 0 0 0 3px #FFFCF4, inset 0 0 0 4px #D8B6A6, 0 4px 10px rgba(120, 90, 70, .12);
}

.departure-stamp small {
  font-size: 7px;
  letter-spacing: 1px;
  margin-top: 2px;
}

@media (max-width: 620px) {
  .departure-card {
    width: min(320px, 84vw);
    padding: 20px 20px 24px;
  }
  .departure-art {
    height: 130px;
  }
  .departure-stamp {
    width: 62px;
    height: 62px;
    font-size: 12px;
  }
}