/* KBK Filmreel — film-strip scroller styles.
   Original work; mirrors the kinderbuchkino.de rebuild. All rules are scoped
   under .kbk-filmreel so nothing leaks into the surrounding theme, and every
   token is namespaced (--kbk-*).

   Motion is a single continuous CSS keyframe marquee — NOT a carousel library.
   A paginated carousel drives autoplay as back-to-back slide transitions with a
   loop re-layout at every tick; those re-layouts make downscaled cover art and
   the sprocket gradient re-sample each frame and shimmer. One uninterrupted
   transform animation (the same thing a smooth hand-drag does) has no ticks and
   no re-layout, so it stays crisp.

   Frame geometry is quantized to the 40px sprocket-hole period: 280px cell +
   2x20px film borders = 320px = 8 periods, so the holes never stretch. */

.kbk-filmreel {
	--kbk-filmcolor: #656160;
	--kbk-frame-w: 280px;
	--kbk-frame-h: 320px;
	--kbk-set-width: 0px;   /* width of one un-cloned set; set inline by JS */
	--kbk-reel-duration: 40s; /* set inline by JS from set width + speed */
	width: 100%;
	overflow: hidden;
	background: var(--kbk-filmcolor);
}

/* Viewport: clips the track to the page width. */
.kbk-filmreel .filmstrip {
	width: 100%;
	overflow: hidden;
	background: var(--kbk-filmcolor);
}

/* The moving strip: one flex row of frames (+ JS-appended clones), translated
   left by exactly one set width and looped — seamless because the content past
   that point is a duplicate of the start. */
.kbk-filmreel .film-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: kbk-reel var(--kbk-reel-duration) linear infinite;
}

/* Pause when the visitor hovers the strip. */
.kbk-filmreel:hover .film-track {
	animation-play-state: paused;
}

@keyframes kbk-reel {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--kbk-set-width)), 0, 0); }
}

.kbk-filmreel .film-item {
	flex: 0 0 auto;
	position: relative;
	background: var(--kbk-filmcolor);
	padding: 40px 0; /* top + bottom film bands */
	box-sizing: border-box;
}

.kbk-filmreel .film-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kbk-frame-w);
	height: var(--kbk-frame-h);
	border-left: 20px solid var(--kbk-filmcolor);
	border-right: 20px solid var(--kbk-filmcolor);
	box-sizing: border-box;
	text-decoration: none;
}

.kbk-filmreel .film-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* letterbox inside the fixed 280x320 frame */
	border: 0;
	transition: filter 0.3s ease;
}

.kbk-filmreel .film-item:hover .film-image img {
	filter: grayscale(100%);
}

/* Sprocket holes — white blocks that scroll with the strip. */
.kbk-filmreel .film-item::before,
.kbk-filmreel .film-item::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 25px;
	z-index: 1;
	background: repeating-linear-gradient(
		to right,
		#fff,
		#fff 20px,
		transparent 20px,
		transparent 40px
	);
	pointer-events: none;
}

.kbk-filmreel .film-item::before { top: 8px; }
.kbk-filmreel .film-item::after { bottom: 8px; }

/* Reduced motion: no auto-scroll. The strip becomes a static, manually
   scrollable row so every cover is still reachable. */
@media (prefers-reduced-motion: reduce) {
	.kbk-filmreel .filmstrip { overflow-x: auto; }
	.kbk-filmreel .film-track { animation: none; }
}

/* No mobile shrink: one viewport-dominant frame with a peek of the next reads
   correctly at 320px on a phone. Keep the frame a multiple of the 40px hole
   period. */