.landing-rail {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: min(35vw, 650px);
  overflow: hidden;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 2.45s cubic-bezier(.22,.74,.18,1);
  mix-blend-mode: screen;
  --spot-x: 50%;
  --spot-y: 50%;
  -webkit-mask-image: radial-gradient(circle 230px at var(--spot-x) var(--spot-y), #000 0%, rgba(0,0,0,.92) 28%, transparent 78%);
  mask-image: radial-gradient(circle 230px at var(--spot-x) var(--spot-y), #000 0%, rgba(0,0,0,.92) 28%, transparent 78%);
}
.landing-rail-left { left: 0; }
.landing-rail-right { right: 0; }
.landing-rail.is-hot { opacity: .74; transition-duration: 2.15s; }
.landing-rail.is-peer-hot { opacity: .085; transition-duration: 2.9s; }
.landing-rail-track { display: grid; gap: 0; width: 100%; will-change: transform; }
.landing-rail-left .landing-rail-track { animation: rail-up 48s linear infinite; }
.landing-rail-right .landing-rail-track { animation: rail-down 52s linear infinite; transform: translateY(-50%); }
.landing-rail img { display: block; width: 100%; height: clamp(220px, 39vh, 520px); object-fit: contain; opacity: .76; filter: grayscale(1) contrast(1.08); }
/* Darken blend so the image's white areas + borders drop out on the light bg,
   leaving only the dark line-art visible. */
html[data-theme="light"] .landing-rail { mix-blend-mode: darken; }
html[data-theme="light"] .landing-rail img { filter: invert(1) grayscale(1) contrast(1.08); }
@keyframes rail-up { to { transform: translateY(-50%); } }
@keyframes rail-down { to { transform: translateY(0); } }
@media (max-width: 700px) {
  .landing-rail { width: 42vw; -webkit-mask-image: radial-gradient(circle 130px at var(--spot-x) var(--spot-y), #000, transparent 78%); mask-image: radial-gradient(circle 130px at var(--spot-x) var(--spot-y), #000, transparent 78%); }
  .landing-rail img { height: 31vh; }
}
@media (prefers-reduced-motion: reduce) { .landing-rail-track { animation-play-state: paused !important; } }