.progress i {
  width: .1%;
  min-width: 5px;
  box-shadow: 0 0 10px var(--gold);
}

.today-progress {
  display: none;
}

.today-progress i {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold) 0 12%, rgba(217,173,69,.18) 12%);
}

.today-progress span {
  display: block;
  margin-top: 7px;
  text-align: center;
  color: var(--gold);
  font: 500 10px Cinzel, serif;
  letter-spacing: .08em;
}

.journey-art.demo-running .plane {
  transition: filter .8s ease, opacity .8s ease;
}

.journey-art.demo-running .plane-mountain {
  filter: saturate(1.12) brightness(1.04);
}

.journey-art.demo-running .plane-embers {
  opacity: 1;
}

.journey-copy.demo-running .distance strong {
  text-shadow: 0 0 24px rgba(244,196,81,.55);
}

.journey-copy.demo-running .location,
.journey-copy.demo-running .story {
  animation: reveal-step 1s ease both;
}

@keyframes reveal-step {
  from { opacity: .2; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.sync-button {
  display: inline-grid;
  grid-template-columns: 9px auto;
  column-gap: 9px;
  align-items: center;
  text-align: left;
}

.sync-button b,
.sync-button small {
  display: block;
}

.sync-button b {
  font: 600 11px Inter, sans-serif;
  color: #eeeae0;
}

.sync-button small {
  grid-column: 2;
  margin-top: 3px;
  font: 400 9px Inter, sans-serif;
  color: #9c9993;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #62c778;
  box-shadow: 0 0 9px rgba(98,199,120,.65);
}

.demo-running .sync-dot {
  animation: sync-pulse .8s ease infinite alternate;
}

@keyframes sync-pulse {
  to { transform: scale(1.45); opacity: .55; }
}

/* Four genuinely independent parallax planes. */
.journey-art {
  background: radial-gradient(circle at 72% 22%, #8d2519 0, #35130f 22%, #110908 57%, #050505 100%);
}

.journey-copy,
.topbar {
  z-index: 8;
}

.journey-art .plane {
  inset: auto -260px 0;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
  clip-path: none;
  filter: none;
  transition: none;
}

.journey-art .plane-sky {
  inset: 0;
  background-image: linear-gradient(to bottom, transparent 55%, rgba(7,12,7,.72) 88%, #050705 100%), url('assets/willowmere-start.png');
  background-size: auto 100%;
  background-position: left center;
}

.journey-art .plane-mountain {
  height: 72%;
  background-image: url('assets/distant-peaks.svg');
  opacity: .28;
  mix-blend-mode: multiply;
}

.journey-art .plane-ridges {
  height: 54%;
  background-image: url('assets/middle-ridges.svg');
  opacity: .42;
}

.journey-art .plane-foreground {
  height: 39%;
  background-image: url('assets/foreground-ridge.svg');
  z-index: 4;
  opacity: .62;
}

.journey-art .plane-embers {
  inset: 0;
  z-index: 5;
}

.traveller {
  position: absolute;
  z-index: 6;
  left: 30%;
  bottom: 31%;
  width: 86px;
  height: 130px;
  background: url('assets/traveller-painted.png') center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.7));
  transform-origin: center bottom;
}

.journey-art.demo-running .traveller {
  animation: walking-bob .38s ease-in-out infinite alternate;
}

@keyframes walking-bob {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-5px) rotate(1deg); }
}

/* Clean, distant silhouette composition inspired by the supplied references. */
.journey-art {
  background: #9fd4dd;
  animation: scene-light 18s ease-in-out infinite alternate;
}

.journey-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(#07102f 0%, #14265a 54%, #b76958 100%);
  opacity: 0;
  animation: night-fade 18s ease-in-out infinite alternate;
}

.stars {
  position: absolute;
  z-index: 1;
  inset: 0 0 42%;
  opacity: 0;
  background-image: radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#ffe8a8 0 1px,transparent 2px);
  background-size: 53px 61px,91px 77px;
  background-position: 8px 3px,31px 16px;
  animation: stars-fade 18s ease-in-out infinite alternate;
}

.sun-moon {
  position: absolute;
  z-index: 1;
  right: 16%;
  top: 17%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff4c8;
  box-shadow: 0 0 24px rgba(255,238,172,.8);
  animation: celestial-cycle 18s ease-in-out infinite alternate;
}

.journey-art .plane-sky {
  display: none;
}

.journey-art .plane-mountain {
  z-index: 2;
  height: 48%;
  bottom: 37%;
  opacity: .55;
  filter: hue-rotate(135deg) saturate(.65) brightness(1.25);
  mix-blend-mode: multiply;
}

.journey-art .plane-ridges {
  z-index: 3;
  height: 35%;
  bottom: 34%;
  opacity: .82;
  filter: hue-rotate(125deg) saturate(.55) brightness(.72);
}

.journey-art .plane-foreground {
  z-index: 4;
  height: 23%;
  bottom: 31%;
  opacity: 1;
  filter: brightness(0);
}

.journey-art .plane-embers {
  display: none;
}

.hillhome {
  position: absolute;
  z-index: 5;
  left: -6%;
  bottom: 31%;
  width: 78%;
  height: 28%;
  background: url('assets/hillhome-silhouette.svg') left bottom/contain no-repeat;
  will-change: transform;
}

.traveller {
  z-index: 6;
  left: 48%;
  bottom: 46%;
  width: 25px;
  height: 39px;
  filter: brightness(0) drop-shadow(0 1px 1px rgba(0,0,0,.5));
}

.depth-fog {
  z-index: 7;
  background: linear-gradient(to bottom,transparent 0 50%,rgba(0,0,0,.04) 56%,#030303 70%);
}

.journey-copy {
  bottom: 88px;
}

.journey-copy .day {
  font-size: 18px;
}

.journey-copy .distance strong {
  font-size: 55px;
}

.journey-copy .ornament {
  margin: 14px auto 9px;
}

@keyframes night-fade {
  0%,28% { opacity: 0; }
  72%,100% { opacity: 1; }
}

@keyframes stars-fade {
  0%,45% { opacity: 0; }
  80%,100% { opacity: .85; }
}

@keyframes celestial-cycle {
  0% { transform: translate(-180px,120px); background:#ffd477; box-shadow:0 0 38px #ffb55c; }
  45% { transform: translate(-90px,-70px); background:#fff6c7; }
  100% { transform: translate(0,25px); background:#e9f0ff; box-shadow:0 0 24px rgba(214,225,255,.8); }
}

@keyframes scene-light {
  0% { background:#f4bd80; }
  45% { background:#a8d8df; }
  100% { background:#081334; }
}