.night-train { position: relative; }
.night-train svg { display: block; width: 100%; height: auto; }
.night-train .night-sky { position: absolute; bottom: 100%; left: 0; z-index: -1; }
.night-train-track { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, currentColor 13%); }
.night-train-track .train { position: absolute; inset: 0; height: 100%; }
.night-train .masts rect { opacity: 0; }
.night-train .stars rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .night-train[data-motion="waiting"] .train { translate: -96%; }
  .night-train[data-motion="waiting"] .masts rect { opacity: 1; }
  .night-train[data-motion="playing"] .train { animation: train-arrives 5s cubic-bezier(.3, .36, .45, 1) both; animation-timing-function: linear(0, .07, .139, .209, .279, .348, .418, .488, .556, .618, .675, .727, .774, .816, .853, .885, .913, .936, .956, .971, .983, .991, .997, .999, 1); }
  .night-train[data-motion="playing"] .masts rect { animation: 5s linear both; }
  .night-train[data-motion="playing"] .masts rect:nth-child(1) { animation-name: mast-left; }
  .night-train[data-motion="playing"] .masts rect:nth-child(2) { animation-name: mast-middle; }
  .night-train[data-motion="playing"] .masts rect:nth-child(3) { animation-name: mast-right; }
}
@keyframes train-arrives { from { translate: -96%; } }
@keyframes mast-left { 0%, 11.7% { opacity: 1; } 11.8%, 100% { opacity: 0; } }
@keyframes mast-middle { 0%, 26.2% { opacity: 1; } 26.3%, 100% { opacity: 0; } }
@keyframes mast-right { 0%, 47.4% { opacity: 1; } 47.5%, 100% { opacity: 0; } }