.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 5.5s cubic-bezier(.3, .36, .45, 1) both; }
  .night-train[data-motion="playing"] .masts rect { animation: 5.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%, 13.9% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes mast-middle { 0%, 28.3% { opacity: 1; } 28.4%, 100% { opacity: 0; } }
@keyframes mast-right { 0%, 49.2% { opacity: 1; } 49.3%, 100% { opacity: 0; } }