/**
 * Header quick-links scroll affordance.
 *
 * The mobile header strip holds five items — LISTEN, WATCH, EPISODES,
 * PODCASTS, HIGHLIGHTS — but only three fit on a phone. The only hint that
 * more exist is a small grey "SWIPE" caption, which reads as a label rather
 * than a control, so partners conclude the PODCAST link is missing.
 *
 * This fades the content at whichever edge has more to reveal, so the strip
 * visibly continues past the screen. Applied by fism-navfix.js only to an
 * element that genuinely overflows, and only via a mask — no wrapper elements,
 * no positioning, nothing that can disturb the Elementor layout.
 */

.fism-scroll {
	/* Kill the scrollbar on platforms that would draw one over the items. */
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.fism-scroll::-webkit-scrollbar {
	display: none;
}

/* Overflow on both sides. */
.fism-scroll {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 26px,
		#000 calc(100% - 40px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 26px,
		#000 calc(100% - 40px),
		transparent 100%
	);
}

/* Scrolled fully left: only the right edge has more to show. */
.fism-scroll.at-start {
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - 40px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - 40px),
		transparent 100%
	);
}

/* Scrolled fully right: nothing further to reveal on that side. */
.fism-scroll.at-end {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 26px,
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 26px,
		#000 100%
	);
}

/* Both ends visible at once (wide screen): no fade at all. */
.fism-scroll.at-start.at-end {
	-webkit-mask-image: none;
	mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
	.fism-scroll {
		scroll-behavior: auto;
	}
}