:root {
  --accent: #6fbf93;
  --accent-hot: #b8f5d0;
  --ink: #eef3ef;
  --muted: #a3b0a8;
  --glass: rgb(14 20 17 / .72);
  --line: rgb(255 255 255 / .12);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0f0d; color: var(--ink); overflow: hidden;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#map { position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* --- top-left HUD ---------------------------------------------------- */
.hud {
  position: fixed; top: 16px; left: 16px; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.back {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; text-decoration: none;
  color: var(--ink); background: rgb(255 255 255 / .06);
}
.back:hover { background: rgb(255 255 255 / .14); }
.hud-title { font-weight: 700; letter-spacing: -.01em; }
.hud-title span { font-weight: 400; color: var(--muted); }
.hud-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hud-count b { color: var(--accent); font-weight: 600; }

/* --- photo card -------------------------------------------------------- */
.card {
  position: fixed; right: 24px; top: 50%; width: min(420px, 38vw);
  border-radius: 20px; overflow: hidden; background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgb(0 0 0 / .5);
  transform: translate(30px, -50%) scale(.96); opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.card.show { opacity: 1; transform: translate(0, -50%) scale(1); }
.card[hidden] { display: block; visibility: hidden; }
.card-photos { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.card-photos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity .9s ease; transform-origin: center;
}
.card-photos img.on { opacity: 1; animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.card-body { padding: 16px 20px 18px; display: grid; gap: 6px; }
.card-date { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.card-caption {
  margin: 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--accent-hot), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-tags span { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgb(111 191 147 / .16); color: var(--accent-hot); }
.card-tags:empty { display: none; }
.card-peaks { font-weight: 600; }
.card-peaks small { color: var(--muted); font-weight: 400; }
.card-people { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.card-people span { display: inline-flex; align-items: center; gap: 6px; }
.card-people img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* --- controls ---------------------------------------------------------- */
.controls {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
  background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line);
}
.buttons { display: flex; gap: 4px; flex: none; }
.buttons button {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: rgb(255 255 255 / .06); font-size: 15px;
}
.buttons button:hover { background: rgb(255 255 255 / .14); }
#speed { font-size: 13px; font-weight: 600; }
.timeline { flex: 1; display: flex; align-items: center; gap: 2px; height: 38px; }
.timeline button {
  flex: 1; height: 8px; border: 0; padding: 0; border-radius: 3px; background: rgb(255 255 255 / .14);
  transition: background .3s, height .2s;
}
.timeline button:hover { height: 16px; }
.timeline button.done { background: var(--accent); }
.timeline button.now { background: var(--accent-hot); height: 16px; box-shadow: 0 0 12px var(--accent); }

/* --- glowing head marker ---------------------------------------------- */
.head { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-hot);
  box-shadow: 0 0 0 4px rgb(111 191 147 / .35), 0 0 24px 6px var(--accent); }
.head::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent);
  animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

/* --- intro / outro ----------------------------------------------------- */
.intro {
  position: fixed; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at center, rgb(11 15 13 / .35), rgb(11 15 13 / .85));
  transition: opacity .8s ease;
}
.intro.gone { opacity: 0; pointer-events: none; }
.intro-inner { display: grid; justify-items: center; gap: 10px; padding: 24px; }
.intro svg { width: 64px; fill: var(--accent); filter: drop-shadow(0 0 18px var(--accent)); }
.intro h1 { margin: 0; font-size: clamp(48px, 9vw, 96px); font-weight: 900; letter-spacing: -.04em; }
.intro p { margin: 0 0 12px; color: var(--muted); font-size: 18px; }
.intro button {
  padding: 14px 28px; border-radius: 999px; border: 0; font-size: 17px; font-weight: 700;
  color: #0b0f0d; background: var(--accent); box-shadow: 0 0 30px rgb(111 191 147 / .5);
}
.intro button:disabled { opacity: .5; }
/* The ending: keep the route web visible, text sits low. */
.intro.outro { place-items: end center; padding-bottom: 96px; pointer-events: none;
  background: linear-gradient(to top, rgb(11 15 13 / .9), transparent 45%); }
.intro.outro .intro-inner { pointer-events: auto; } /* back button, timeline and map stay usable */
.intro.outro svg { display: none; }
.intro.outro h1 { font-size: clamp(28px, 4vw, 40px); }

.maplibregl-ctrl-attrib { background: rgb(0 0 0 / .4) !important; }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }

@media (max-width: 760px) {
  .card { left: 12px; right: 12px; top: auto; bottom: 96px; width: auto; transform: translateY(30px); }
  .card.show { transform: translateY(0); }
  .card-photos { aspect-ratio: 16 / 9; }
  .card-caption { font-size: 22px; }
  .controls { bottom: 12px; gap: 8px; }
  .timeline { gap: 0; }
  .timeline button { min-width: 2px; border-radius: 0; }
  .hud { top: 12px; left: 12px; }
}