/* ---------- Trail (path bed + travelled overlay) ---------- */
.journey__path-bed {
  fill: none;
  stroke: var(--path-bed);
  stroke-width: 14;
  stroke-linecap: round;
}
@media (min-width: 860px) {
  .journey__path-bed { stroke-width: 20; }
}

.journey__path-line {
  fill: none;
  stroke: var(--path-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 10;
  opacity: 0.6;
}

.journey__path-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--path-len, 0);
  stroke-dashoffset: var(--path-len, 0);
}
@media (min-width: 860px) {
  .journey__path-fill { stroke-width: 7; }
}

/* ---------- Decorative biome scenery ---------- */
.journey__decor {
  opacity: 0.85;
  pointer-events: none;
}

/* Tier 0 — quick doodles: thin wobbly single-pass strokes, no fill, unpolished. */
.journey__decor .decor-sketch {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
.journey__decor .decor-sketch-b { opacity: 0.32; }
.journey__decor .decor-sketch-trunk {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  stroke-linecap: round;
  opacity: 0.5;
}

/* Tier 1 — today's flat, clean icons. */
.journey__decor .decor-forest { fill: var(--forest); }
.journey__decor .decor-prairie-bush { fill: #9caa4a; }
.journey__decor .decor-prairie-dot { fill: var(--gold-soft); }
.journey__decor .decor-hill { fill: #d9a97a; opacity: 0.8; }
.journey__decor .decor-sparkle { fill: none; stroke: #d98fa0; stroke-width: 1.6; stroke-linecap: round; }

/* Tier 2 — layered, shaded "professional" illustrations. */
.journey__decor .decor-trunk { fill: #6b4a30; }
.journey__decor .decor-forest-shade { fill: var(--forest-deep); }
.journey__decor .decor-forest-hi { fill: var(--forest); opacity: 0.9; }
.journey__decor .decor-prairie-shade { fill: #8a9a3f; }
.journey__decor .decor-prairie-hi { fill: #bdc873; opacity: 0.95; }
.journey__decor .decor-hill-shade { fill: #cf9868; opacity: 0.85; }
.journey__decor .decor-hill-hi { fill: #e6bc8e; opacity: 0.85; }
.journey__decor .decor-hill-tree { fill: var(--forest-deep); opacity: 0.85; }
.journey__decor .decor-summit-star { fill: var(--accent); opacity: 0.88; }
.journey__decor .decor-summit-dot { fill: var(--gold); opacity: 0.75; }

/* ---------- Character ---------- */
.character svg { display: block; width: 100%; height: 100%; }
.character-figure { transform-origin: 50% 80%; }
html.motion-ready .character-figure {
  animation: char-bob 0.5s ease-in-out infinite alternate;
}
@keyframes char-bob {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-3px) rotate(2deg); }
}

/* ---------- Station markers: a point of interest on the trail ---------- */
.stop { position: relative; }

/* Vertical anchor stays CSS-driven (bottom of the card, so the bubble sits
   ABOVE its point of interest); horizontal position is set inline by JS to
   land exactly on the drawn path curve at this station's height. */
.stop__marker {
  position: absolute;
  bottom: -16px;
  left: 9px;
  width: 18px;
  height: 18px;
  z-index: 2;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--path-line);
  box-shadow: 0 0 0 4px var(--paper);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

@media (min-width: 860px) {
  .stop__marker { left: 50%; }
}

.stop.is-active .stop__marker {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 9px rgba(211, 161, 60, 0.3);
}

/* Date badge: a small pill hanging below the dot, in the open gutter space,
   with a little triangular connector pointing up at it. */
.stop__marker::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  border: 5px solid transparent;
  border-bottom-color: var(--card-bg);
  transition: border-bottom-color 0.4s ease;
}
.stop__marker::after {
  content: attr(data-date);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 15px;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--forest-deep);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.28em 0.75em;
  box-shadow: var(--shadow-sm);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.stop.is-active .stop__marker::before { border-bottom-color: var(--forest-deep); }
.stop.is-active .stop__marker::after {
  background: var(--forest-deep);
  color: #fff;
  border-color: var(--forest-deep);
}

/* ---------- The experience "bubble": visible only while the station is active ---------- */
.stop__card { opacity: 1; transform: none; }

html.motion-ready .stop__card {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion-ready .stop.is-active .stop__card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}