/* ============================================================
   WMC House — What's On rail
   Posters hang from a hairline. The rail bleeds off the right
   edge of the viewport, which is what signals "more" instead of
   a pair of arrow buttons.
   ============================================================ */

/* === Rail ===
   The hairline, the tick above each card and the 01/02 numbering all belonged
   to the static version, where posters hung from a rule like prints on a wire.
   In a loop the ticks slide past as a picket fence and the numbers repeat, so
   they are gone. The section rule above already draws the only line needed. */
.rail { position: relative; }

/* === Viewport === */
/* Constrained to the same measure as every other row. It used to bleed the
   full viewport, which made What's On the widest thing on the page and broke
   the column the rest of the site sits in. */
.rail__vp { overflow: hidden; }

/* Marquee. The track holds two identical sets and travels exactly one set
   width, so the seam lands where the copy begins and the loop is invisible.
   translate3d keeps it on the compositor — no layout work per frame. */
.rail__track { display: flex; width: max-content; gap: var(--rail-gap); padding: var(--s-2) 0 0; animation: rail-drift var(--rail-dur, 60s) linear infinite; }
.rail { --rail-gap: clamp(1.25rem, 2.4vw, 2.25rem); }

@keyframes rail-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - (var(--rail-gap) / 2)), 0, 0); }
}

/* Stop for anyone reading it, by pointer or by keyboard. A caption that
   slides away mid-sentence is the reason most marquees are hated. */
.rail:hover .rail__track,
.rail:focus-within .rail__track { animation-play-state: paused; }

/* === Item, hung from the rail === */
.rail__item { position: relative; flex: 0 0 clamp(260px, 24vw, 380px); }

/* === Poster === */
.rail__card { display: block; transition: transform .6s var(--ease); }
.rail__item:hover .rail__card { transform: translateY(-7px); }
.rail__media { display: block; position: relative; aspect-ratio: var(--ratio); overflow: hidden; background: var(--dark); }
.rail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--px,0px), 0, 0) scale(1.09); will-change: transform; }

/* === Caption. Category, hook, link. Never a repeated headline. === */
.rail__meta { padding-top: 1.15rem; }
.rail__cat { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); margin-bottom: .7rem; }
.rail__cat::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; flex: 0 0 auto; }
.rail__hook { max-width: 30ch; margin-bottom: .9rem; }

/* === Foot === */
/* No progress bar: a loop has no end to be a proportion of. */
.rail__foot { display: flex; justify-content: flex-end; padding: var(--s-4) var(--gutter) 0; max-width: var(--wrap); margin-inline: auto; }
.rail__all { flex: 0 0 auto; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }

/* === Reduced motion === */
/*
 * TOUCH: a real scrolling strip, not a CSS animation.
 *
 * A transform-driven marquee cannot be grabbed — the finger slides over a row
 * that keeps moving on its own. Handing the job to native overflow scrolling
 * means a drag is a drag and a flick carries its own momentum, and wmc.js just
 * nudges scrollLeft along when nobody is touching it. Same loop, same look,
 * but the row answers the hand.
 */
@media (pointer: coarse) {
.rail__vp { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail__vp::-webkit-scrollbar { display: none; }
.rail__track { animation: none; }
}

/* Reduced motion: no drift at all, just a strip the guest moves themselves. */
@media (prefers-reduced-motion: reduce) {
.rail__card { transition: none; transform: none; }
.rail__media img { transform: none; }
.rail__track { animation: none; width: auto; }
.rail__vp { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.rail__vp::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }
}