:root {
  --navy: #142238;
  --blue: #274866;
  --cream: #eee7d7;
  --paper: #f7f0df;
  --red: #b4443f;
  --gold: #d4ad67;
  --ink: #1e2b36;
  --display: "Oswald", sans-serif;
  --serif: "Noto Serif SC", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--serif); }
button, a { font: inherit; }
button { cursor: pointer; }

.rail-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.15);
}
.rail-progress i { display: block; width: 0; height: 100%; background: var(--red); }

.route-map {
  position: fixed;
  right: 1rem;
  top: 50%;
  z-index: 45;
  display: grid;
  gap: .8rem;
  transform: translateY(-50%);
}
.route-map::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: rgba(238,231,215,.35);
}
.route-map a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(238,231,215,.55);
  font-size: .65rem;
  letter-spacing: .12em;
  text-decoration: none;
  mix-blend-mode: difference;
}
.route-map i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: background .3s, transform .3s;
}
.route-map a.is-active { color: #fff; }
.route-map a.is-active i { background: var(--red); transform: scale(1.3); }

.platform {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 5rem 1.25rem;
  color: var(--cream);
  background:
    linear-gradient(rgba(20,34,56,.89),rgba(20,34,56,.96)),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.08) 70px 72px);
}
.platform__clock {
  position: absolute;
  top: 2rem;
  right: max(1.25rem,5vw);
  font: 500 clamp(1.2rem,3vw,2rem) var(--display);
  letter-spacing: .12em;
}
.platform__board { position: relative; z-index: 2; width: min(820px,100%); text-align: center; }
.platform__overline, .route-intro p, .carriage__label, .terminal__board>p {
  margin: 0 0 1rem;
  color: var(--gold);
  font: 500 .75rem var(--display);
  letter-spacing: .32em;
}
.platform h1 { margin: 0; font-size: clamp(3rem,10vw,7rem); font-weight: 500; line-height: 1.1; }
.departure {
  width: min(650px,100%);
  margin: 2.5rem auto 1.5rem;
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  align-items: center;
}
.departure span { display: block; color: rgba(238,231,215,.55); font-size: .72rem; letter-spacing: .2em; }
.departure strong { display: block; margin-top: .45rem; font-size: clamp(1.2rem,4vw,2rem); font-weight: 500; }
.departure i { height: 1px; background: var(--gold); position: relative; }
.departure i::after { content: "→"; position: absolute; right: -2px; top: 50%; transform: translateY(-55%); color: var(--gold); }
.platform__notice { color: rgba(238,231,215,.65); }
.platform__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 0;
  color: #91c9a2;
  font: 500 .68rem var(--display);
  letter-spacing: .18em;
}
.platform__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #91c9a2;
  box-shadow: 0 0 0 4px rgba(145,201,162,.14);
  animation: status-pulse 1.8s ease-in-out infinite;
}
.platform__enter { display:inline-block;margin-top:1rem;padding:.8rem 1.4rem;color:var(--cream);text-decoration:none;border:1px solid rgba(238,231,215,.55); }
.platform__enter:hover { color:var(--navy);background:var(--cream); }
.platform__tracks { position:absolute;inset:auto 0 0;height:18%;perspective:500px; }
.platform__tracks::before,.platform__tracks::after { content:"";position:absolute;bottom:0;width:6px;height:160%;background:#8d897f;transform-origin:bottom; }
.platform__tracks::before { left:35%;transform:rotate(18deg); }.platform__tracks::after { right:35%;transform:rotate(-18deg); }
.platform__tracks i { position:absolute;left:27%;right:27%;bottom:var(--y);height:4px;background:#8d897f; }
.platform__tracks i:nth-child(1){--y:5%}.platform__tracks i:nth-child(2){--y:20%}.platform__tracks i:nth-child(3){--y:36%}
.platform__tracks i:nth-child(4){--y:53%}.platform__tracks i:nth-child(5){--y:70%}.platform__tracks i:nth-child(6){--y:88%}

.ticket-section { min-height: 90vh; display:grid; place-items:center; padding:5rem 1.25rem; background:#d5c6aa; }
.ticket { position:relative;width:min(860px,100%); display:grid; grid-template-columns:1fr 170px; filter:drop-shadow(0 22px 25px rgba(44,35,24,.18)); transform:rotate(-1deg); }
.ticket::after {
  content: "VALID";
  position: absolute;
  right: 21%;
  top: 20%;
  padding: .5rem .8rem;
  border: 3px double var(--red);
  border-radius: 50%;
  color: var(--red);
  font: 600 .7rem var(--display);
  letter-spacing: .16em;
  opacity: 0;
  transform: rotate(-14deg) scale(1.8);
  transition: opacity .45s .55s, transform .55s .55s var(--ease);
}
.ticket.is-visible::after { opacity: .62; transform: rotate(-14deg) scale(1); }
.ticket__main,.ticket__stub { background:var(--paper); }
.ticket__main { padding:clamp(1.5rem,5vw,3rem); }
.ticket__stub { border-left:2px dashed #a69985;display:grid;align-content:space-between;justify-items:center;padding:1.5rem .8rem;font:500 .72rem var(--display);letter-spacing:.2em; }
.ticket__stub strong{font-size:2.3rem;color:var(--red)}
.ticket__top { display:flex;justify-content:space-between;color:var(--red);font:500 .8rem var(--display);letter-spacing:.18em; }
.ticket__label{margin:2.3rem 0 .2rem;color:#887c6a;font-size:.7rem;letter-spacing:.2em}
.ticket h2{margin:0;font-size:clamp(2.4rem,7vw,4.8rem);font-weight:500}
.ticket__route{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:end;margin:2rem 0}
.ticket__route div:last-child{text-align:right}.ticket__route small,.ticket__meta small{display:block;color:#958876;font-size:.68rem;letter-spacing:.15em}
.ticket__route strong{font-size:1.1rem}.ticket__route span{font:2rem var(--display);color:var(--red)}
.ticket__meta{display:flex;justify-content:space-between;padding-top:1rem;border-top:1px solid #c8bdab}
.ticket__meta span:last-child{text-align:right}.ticket__meta b{font-weight:500}
.barcode{width:52px;height:130px;background:repeating-linear-gradient(90deg,#1e2b36 0 2px,transparent 2px 5px,#1e2b36 5px 6px,transparent 6px 9px)}

.route-intro { min-height:60vh;display:grid;place-content:center;text-align:center;padding:4rem 1.25rem;background:var(--paper); }
.route-intro h2{margin:0;font-size:clamp(2.3rem,7vw,4.5rem);font-weight:500}.route-intro span{margin-top:1rem;color:#71808a}

.station { position:relative;min-height:100vh;min-height:100svh;overflow:hidden;padding:clamp(3rem,8vw,7rem);display:flex;justify-content:space-between;align-items:flex-start; }
.station--morning{background:linear-gradient(#a9c7d1 0 55%,#b7c39b 55%)}.station--noon{background:linear-gradient(#74a8c7 0 62%,#d7c49f 62%)}
.station--sunset{background:linear-gradient(#c8756a 0 58%,#604d61 58%);color:#fff1df}.station--night{background:linear-gradient(#17263e,#253656);color:#ede8dc}
.station__sign,.station__words{position:relative;z-index:3}.station__sign span{font:500 .9rem var(--display);color:var(--red)}
.station__sign p{margin:1rem 0 .2rem;font:500 .7rem var(--display);letter-spacing:.25em;opacity:.6}
.station__sign h2{margin:0;font-size:clamp(3rem,10vw,7rem);font-weight:500;line-height:1}
.station__words{max-width:430px;margin-top:20vh;padding:1.3rem;border-left:2px solid currentColor}
.station__words p{margin:0;font-size:1.08rem;line-height:2}
.landscape{position:absolute;inset:0;z-index:1;transform:translate3d(var(--shift,0),0,0);will-change:transform}
.station::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 24%, rgba(255,255,255,.13) 31%, transparent 39%);
  transform: translateX(-80%);
  animation: window-glint 7s ease-in-out infinite;
}
.hill{position:absolute;bottom:-15%;width:65%;height:45%;border-radius:50% 50% 0 0}.h1{left:-10%;background:#6f8969}.h2{right:-15%;background:#879a70}
.pole{position:absolute;left:70%;bottom:0;width:5px;height:65%;background:#53615c}.pole::before{content:"";position:absolute;left:-70px;top:40px;width:140px;height:4px;background:#53615c}
.building{position:absolute;bottom:0;background:#6d7880}.b1{left:8%;width:18%;height:40%}.b2{left:32%;width:28%;height:55%}.b3{right:9%;width:24%;height:46%}
.building::after{content:"";position:absolute;inset:12%;background:repeating-linear-gradient(90deg,#e5cf88 0 5px,transparent 5px 20px)}
.sunset-sun{position:absolute;left:56%;top:35%;width:150px;height:150px;border-radius:50%;background:#efbd76}.h3{left:-15%;background:#50435a}.h4{right:-5%;background:#382f48}
.moon{position:absolute;right:14%;top:18%;width:120px;height:120px;border-radius:50%;background:#e9ddbb;box-shadow:0 0 50px rgba(233,221,187,.35)}
.star{position:absolute;color:#fff;font-size:2rem}.x1{left:15%;top:20%}.x2{left:48%;top:12%}.x3{right:35%;top:42%}.x4{left:32%;top:55%}

.carriage{min-height:110vh;display:grid;grid-template-columns:1fr 1fr;background:#714a3c;color:#f3e9da}
.carriage__window{padding:8vw 5vw;display:grid;place-items:center}.window-view{position:relative;overflow:hidden;width:100%;height:65vh;border:18px solid #d5b384;border-radius:45% 45% 12px 12px;background:linear-gradient(#9bbdc9 0 55%,#d6bd8c 55%);box-shadow:inset 0 0 0 5px #51372e}
.window-view::before {
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: 12%;
  height: 22%;
  background: repeating-linear-gradient(90deg,#536d54 0 90px,#6c825f 90px 180px);
  animation: scenery-pass 5s linear infinite;
}
.window-view::after {
  content: "";
  position: absolute;
  left: 16%;
  top: 18%;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: rgba(255,230,170,.65);
  box-shadow: 0 0 35px rgba(255,230,170,.45);
}
.carriage__letter{align-self:center;padding:clamp(3rem,7vw,7rem);background:#f3eadb;color:var(--ink)}
.carriage__letter h2{margin:.5rem 0 2rem;font-size:clamp(2rem,5vw,3.3rem);font-weight:500}
.carriage__letter #letterBody p{margin:0 0 1.4rem;color:#5c6770;line-height:2}
.carriage__sign{text-align:right;color:var(--red);margin-top:2.5rem}

.terminal{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:2rem 1.25rem;color:var(--cream);background:var(--navy)}
.terminal__board{width:min(850px,100%);padding:clamp(2rem,6vw,5rem);text-align:center;border:1px solid rgba(238,231,215,.25);background:#101c2e}
.terminal__board h2{margin:0 0 1rem;font-size:clamp(2.4rem,8vw,5rem);font-weight:500;line-height:1.25}
.terminal__board>span{color:rgba(238,231,215,.65);line-height:1.8}
.terminal__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-top:2.3rem}
.yes,.later{min-width:155px;min-height:48px;padding:.8rem 1.3rem;border:1px solid var(--cream);color:var(--cream);background:transparent}
.yes{border-color:var(--red);background:var(--red)}.later:hover{color:var(--navy);background:var(--cream)}

.arrival{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.5rem;color:var(--navy);background:#f0dfbd;text-align:center;overflow:hidden}
.arrival[hidden]{display:none}.arrival__light{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.75),transparent 38%)}
.arrival__copy{position:relative}.arrival__copy>p{font:500 .75rem var(--display);letter-spacing:.35em;color:var(--red)}
.arrival h2{margin:.5rem 0;font-size:clamp(4rem,17vw,8rem);font-weight:500;line-height:1}.arrival h3{font-size:1.3rem;font-weight:500}
.arrival span{display:block;color:#66737a;line-height:1.8}
.arrival__next { margin: 1.6rem 0 0; color: var(--red); font: 500 .75rem var(--display); letter-spacing: .25em; }
.arrival button{margin-top:1.2rem;padding:.7rem 0;border:0;border-bottom:1px solid var(--navy);color:var(--navy);background:transparent}

.reveal{opacity:0;transform:translateY(35px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@keyframes status-pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes window-glint {
  0%, 45% { transform: translateX(-80%); }
  70%, 100% { transform: translateX(100%); }
}
@keyframes scenery-pass { to { transform: translateX(180px); } }

@media(max-width:700px){
  .route-map { top: auto; right: 50%; bottom: .7rem; grid-auto-flow: column; transform: translateX(50%); padding: .55rem .75rem; border-radius: 999px; background: rgba(20,34,56,.82); backdrop-filter: blur(8px); }
  .route-map::before { left: 13px; right: 13px; top: 50%; bottom: auto; width: auto; height: 1px; }
  .route-map a span { display: none; }
  .departure{grid-template-columns:1fr 45px 1fr}.platform__clock{font-size:1rem}
  .ticket{grid-template-columns:1fr 74px}.ticket__stub span{writing-mode:vertical-rl}.barcode{width:32px;height:90px}
  .station{min-height:90vh;padding:3rem 1.25rem;display:block}.station__words{margin-top:25vh;margin-left:auto}
  .carriage{grid-template-columns:1fr}.carriage__window{padding:4rem 1.25rem}.window-view{height:45vh}.carriage__letter{padding:4rem 1.4rem}
  .terminal__actions{flex-direction:column;align-items:center}.yes,.later{width:min(100%,240px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .platform__status i,.station::after,.window-view::before{animation:none}
}