/*
 * 語意動效：住宿落點與出發交通。
 *
 * 這一層只為已存在的規劃資料補上空間關係：住宿是「抵達並安定下來的
 * 落點」，地面交通是「出發、轉乘、抵達」的一段路。不要在這裡加入花、
 * 動物、彗星、景點照片或其他與資料無關的裝飾。
 */

/* ─── 固定錨點／住宿落點 ─────────────────────────────────────── */
.journey-stage-visual.visual-anchors {
  --stay-ink: #684d39;
  --stay-accent: #bf7540;
  --stay-soft: rgba(191, 117, 64, .16);
}

.visual-anchors .anchor-field {
  isolation: isolate;
  overflow: visible;
}

.visual-anchors .anchor-field::before,
.visual-anchors .anchor-field::after {
  display: none;
}

/* 兩條不同曲率的線只表示「抵達住宿」與「下一段離開」，不是虛構地圖。 */
.visual-anchors .anchor-route {
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--stay-accent) 68%, transparent) 0 6px,
    transparent 6px 13px
  );
  opacity: .82;
  transform-origin: left center;
}

.visual-anchors .anchor-route-one {
  --semantic-route-rotation: -5deg;
  top: 92px;
  right: 18px;
  left: 18px;
  transform: rotate(-5deg);
}

.visual-anchors .anchor-route-two {
  --semantic-route-rotation: 5deg;
  top: 113px;
  right: 48px;
  left: 48px;
  opacity: .48;
  transform: rotate(5deg);
}

.visual-anchors .anchor-route-three {
  --semantic-route-rotation: 20deg;
  top: 78px;
  right: 82px;
  left: 82px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stay-ink) 26%, transparent), transparent);
  opacity: .8;
  transform: rotate(20deg);
}

/* pin 的內圈是已確認的落點；外圈是可在此延伸安排的半徑。 */
.visual-anchors .anchor-pin {
  z-index: 3;
  top: 73px;
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
  background: var(--stay-accent);
  box-shadow: 0 0 0 9px var(--stay-soft), 0 10px 20px rgba(91, 61, 38, .16);
  transform: rotate(-45deg);
}

.visual-anchors .anchor-pin::after {
  top: 10px;
  left: 10px;
  width: 15px;
  height: 15px;
  background: #fffaf5;
}

.visual-anchors .anchor-radius {
  z-index: 0;
  top: 45px;
  left: calc(50% - 47px);
  width: 94px;
  height: 94px;
  border: 1px solid color-mix(in srgb, var(--stay-accent) 44%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--stay-accent) 8%, transparent) 0 33%, transparent 70%);
  box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--stay-accent) 3%, transparent);
  opacity: .9;
}

.visual-anchors .anchor-field b {
  color: var(--stay-ink);
}

/* 只在進入這一步時執行一次；避免一個住宿圖示無止盡跳動。 */
.journey-flow.is-entering .visual-anchors .anchor-route-one,
.journey-flow.is-entering .visual-anchors .anchor-route-two,
.journey-flow.is-entering .visual-anchors .anchor-route-three {
  animation: semanticRouteDraw .52s cubic-bezier(.2, .8, .2, 1) both;
}

.journey-flow.is-entering .visual-anchors .anchor-route-two { animation-delay: .1s; }
.journey-flow.is-entering .visual-anchors .anchor-route-three { animation-delay: .18s; }
.journey-flow.is-entering .visual-anchors .anchor-radius { animation: semanticStayRadius .62s .12s cubic-bezier(.2, .8, .2, 1) both; }
.journey-flow.is-entering .visual-anchors .anchor-pin { animation: semanticStayArrive .56s .2s cubic-bezier(.2, .85, .2, 1) both; }

/* ─── 出發交通／地面轉乘 ─────────────────────────────────────── */
.journey-stage-visual.visual-ground {
  --ground-ink: #294f68;
  --ground-accent: #2f7892;
  --ground-soft: rgba(47, 120, 146, .15);
}

.journey-focus:has(.visual-ground) {
  --journey-accent: var(--ground-accent);
  --journey-accent-soft: var(--ground-soft);
  --journey-ink: var(--ground-ink);
}

.visual-ground .booking-field {
  isolation: isolate;
}

/* 一筆交通資料用三個節點表示「出發 → 轉乘／等候 → 抵達」。 */
.visual-ground .booking-route {
  z-index: 0;
  top: 89px;
  right: 22px;
  left: 22px;
  height: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ground-accent) 72%, transparent) 0 7px,
    transparent 7px 14px
  );
  opacity: .84;
  transform-origin: left center;
}

.visual-ground .booking-route::after {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid #fffaf5;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--ground-accent);
  box-shadow: 0 2px 7px rgba(35, 73, 91, .2);
  content: "";
}

.visual-ground .booking-node {
  z-index: 2;
  top: 79px;
  width: 21px;
  height: 21px;
  border: 4px solid #fffaf5;
  box-shadow: 0 4px 13px rgba(35, 73, 91, .16);
}

.visual-ground .booking-node-start { left: 19px; background: var(--ground-accent); }
.visual-ground .booking-node-now { left: calc(50% - 10px); background: var(--ground-ink); }
.visual-ground .booking-node-end { right: 19px; background: #8fb7c4; }

.visual-ground .booking-node::after {
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: #fffaf5;
  content: "";
}

.visual-ground .booking-node-now::after {
  inset: 5px;
  background: var(--ground-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ground-ink) 18%, transparent);
}

.visual-ground .booking-field b { color: var(--ground-ink); }

.journey-flow.is-entering .visual-ground .booking-route { animation: semanticRouteDraw .5s cubic-bezier(.2, .8, .2, 1) both; }
.journey-flow.is-entering .visual-ground .booking-route::after { animation: semanticGroundMarker .72s .23s cubic-bezier(.2, .8, .2, 1) both; }
.journey-flow.is-entering .visual-ground .booking-node { animation: semanticGroundNode .42s cubic-bezier(.2, .8, .2, 1) both; }
.journey-flow.is-entering .visual-ground .booking-node-now { animation-delay: .12s; }
.journey-flow.is-entering .visual-ground .booking-node-end { animation-delay: .24s; }

@keyframes semanticRouteDraw {
  from { opacity: 0; transform: rotate(var(--semantic-route-rotation, 0deg)) scaleX(.08); }
  to { opacity: .84; transform: rotate(var(--semantic-route-rotation, 0deg)) scaleX(1); }
}

@keyframes semanticStayRadius {
  from { opacity: 0; transform: scale(.46); }
  72% { opacity: .95; transform: scale(1.04); }
  to { opacity: .9; transform: scale(1); }
}

@keyframes semanticStayArrive {
  from { opacity: 0; transform: translateY(-16px) scale(.66) rotate(-45deg); }
  72% { opacity: 1; transform: translateY(2px) scale(1.06) rotate(-45deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(-45deg); }
}

@keyframes semanticGroundNode {
  from { opacity: 0; transform: translateY(10px) scale(.7); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes semanticGroundMarker {
  from { left: 0; opacity: 0; transform: scale(.55); }
  to { left: calc(100% - 8px); opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .visual-anchors .anchor-field { width: min(282px, 100%); height: 174px; }
  .visual-anchors .anchor-route-one { top: 78px; right: 18px; left: 18px; }
  .visual-anchors .anchor-route-two { top: 96px; right: 42px; left: 42px; }
  .visual-anchors .anchor-route-three { top: 65px; right: 70px; left: 70px; }
  .visual-anchors .anchor-pin { top: 61px; }
  .visual-anchors .anchor-radius { top: 36px; }
  .visual-ground .booking-route { top: 77px; }
  .visual-ground .booking-node { top: 67px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-flow.is-entering .visual-anchors .anchor-route,
  .journey-flow.is-entering .visual-anchors .anchor-radius,
  .journey-flow.is-entering .visual-anchors .anchor-pin,
  .journey-flow.is-entering .visual-ground .booking-route,
  .journey-flow.is-entering .visual-ground .booking-route::after,
  .journey-flow.is-entering .visual-ground .booking-node {
    animation: none;
  }
}