/* ============================================================
   SZENE 3 — Die Zugfahrt
   ============================================================ */
#sceneJourney { background: #0e161e; }
.sky { position: absolute; inset: 0; transition: opacity 2.5s ease; }
/* Morgen → Mittag → goldener Nachmittag bei der Ankunft */
#skyDay {
  background: linear-gradient(180deg, #3f83bd 0%, #85b6d6 42%, #c6dbdf 76%, #ebedda 100%);
}
#skyNoon {
  background: linear-gradient(180deg, #5fa0cf 0%, #a4c8dc 46%, #dae7e0 80%, #f3f1dd 100%);
  opacity: 0;
}
#skyGold {
  background: linear-gradient(180deg, #33507e 0%, #7b7ba0 28%, #c48f68 58%, #e9b174 80%, #ffd9a0 100%);
  opacity: 0;
}
.sun {
  position: absolute; left: 74%; top: 8%;
  width: min(96px, 20vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fffdf2, #ffefbe 60%, #ffdc96);
  box-shadow: 0 0 90px 34px rgba(255, 242, 198, .35);
  opacity: .95;
  transition: opacity 2s ease;
}
.sun-dusk {
  position: absolute; left: 22%; bottom: 26vh;
  width: min(150px, 32vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #ffc370, #f28444 60%, #e05e30);
  box-shadow: 0 0 110px 45px rgba(242, 132, 68, .42);
  opacity: 0;
  transition: opacity 2.5s ease;
}

.strip { position: absolute; left: 0; bottom: 0; will-change: transform; display: flex; }
.strip svg { display: block; flex: 0 0 auto; }

/* left: 0 explizit — sonst landet die Landmarke an ihrer statischen Position
   im zentrierten Flex-Container, also eine halbe Bildbreite zu weit rechts. */
.landmark { position: absolute; left: 0; bottom: 0; will-change: transform; }
.landmark svg { display: block; }

.mistband {
  position: absolute; left: 0; right: -60vw; height: 16vh;
  background: linear-gradient(90deg, transparent, rgba(230, 236, 230, .5) 20%, rgba(230, 236, 230, .35) 60%, transparent);
  filter: blur(14px);
  border-radius: 50%;
  will-change: transform;
}

.train-wrap {
  position: absolute; left: 6vw; bottom: 6.5vh;
  z-index: 7;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  will-change: transform;
}
.train-wrap svg { display: block; width: min(430px, 76vw); height: auto; }

.speedlines { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.speedlines i {
  position: absolute; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 236, 220, .55), transparent);
  animation: streak .7s linear infinite;
}
.speedlines.paused i { animation-play-state: paused; }
@keyframes streak {
  from { transform: translateX(105vw); }
  to   { transform: translateX(-70vw); }
}

.bird-flock {
  position: absolute; left: 0; z-index: 4;
  opacity: 0; pointer-events: none;
  animation: flyby linear infinite;
}
@keyframes flyby {
  0%   { transform: translateX(108vw) translateY(0); opacity: 0; }
  8%   { opacity: .7; }
  50%  { transform: translateX(38vw) translateY(-3.5vh); }
  92%  { opacity: .7; }
  100% { transform: translateX(-28vw) translateY(1vh); opacity: 0; }
}

.caption {
  position: absolute; left: 7vw; top: 12vh; z-index: 8;
  max-width: 78vw;
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
  pointer-events: none;
}
.caption.show { opacity: 1; transform: translateY(0); }
.caption .c-zh { font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 1.05; color: var(--paper); }
.caption .c-de {
  margin-top: 8px; font-size: clamp(.85rem, 3.4vw, 1.05rem);
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold2);
}
.caption .c-brush {
  margin-top: 12px; width: 130px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, var(--vermillion) 0%, rgba(214,69,51,.65) 70%, transparent);
}

.skip-btn {
  position: absolute; right: 5vw; bottom: 4.5vh; z-index: 9;
  background: rgba(16, 24, 32, .45);
  border: 1px solid rgba(242, 232, 213, .3);
  color: rgba(242, 232, 213, .75);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem; letter-spacing: .18em;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

/* Halte-Dialog: aussteigen oder weiterfahren */
.stop-choice {
  position: absolute; left: 50%; bottom: 2vh; z-index: 9;
  transform: translateX(-50%) translateY(18px);
  display: flex; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
}
.stop-choice.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.exit-btn {
  padding: 14px 30px;
  background: linear-gradient(160deg, var(--vermillion), #a82a1c);
  color: var(--paper);
  border: none; border-radius: 999px;
  font-family: 'Noto Serif SC', serif;
  font-size: .95rem; font-weight: 900; letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(192,57,43,.45), inset 0 0 0 2px rgba(240,201,108,.45);
  animation: btnGlow 2s ease-in-out infinite;
}
.stay-btn {
  background: rgba(16,24,32,.4);
  border: 1px solid rgba(242,232,213,.28);
  color: rgba(242,232,213,.7);
  border-radius: 999px; padding: 12px 20px;
  font-family: 'Noto Serif SC', serif;
  font-size: .78rem; letter-spacing: .16em;
  cursor: pointer; backdrop-filter: blur(4px);
}