/* ------------------------------------------------------------------
 * HyperKit — Marquee Wall
 *
 * Architecture
 * ------------
 * The widget root (.hk-mw) is a fixed-height container with overflow
 * hidden. Inside it sits .hk-mw-tracks, a flex row holding each track.
 * Each track contains two identical strips (.hk-mw-strip) stacked
 * vertically — the items are rendered twice in the HTML to allow a
 * seamless infinite loop. The track animates translateY(0) → -50%,
 * which scrolls exactly one full set of items out, and the second
 * copy is right there to take over before the loop resets.
 *
 * The animation is on the .hk-mw-track element (not on each strip
 * individually) so both strips move together as one unit.
 *
 * Direction
 * ---------
 * "Up" is the default — items scroll up and away from the bottom.
 * "Down" reverses the animation direction. Both modes use the same
 * keyframes; only the `animation-direction` differs.
 *
 * Fade mask
 * ---------
 * `mask-image: linear-gradient(...)` fades the marquee to transparent
 * at the top, bottom, or both. The fade size is a CSS variable so the
 * editor can control it. This blends with whatever is behind the
 * widget — no overlay element needed.
 *
 * Mobile placement
 * ----------------
 * Three modes via class on the root:
 *   .hk-mw--mobile-bg     → background mode (see widget.php; rules
 *                           emitted inline with the user's breakpoint)
 *   .hk-mw--mobile-hidden → hidden below 767px (default)
 *   (no class)            → stacks normally
 * ------------------------------------------------------------------ */

.hk-mw {
	--hk-mw-fade-size: 18%;
	--hk-mw-bleed: 0%;

	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}
.hk-mw *,
.hk-mw *::before,
.hk-mw *::after {
	box-sizing: border-box;
}

/* Tracks row. Standard flex layout. The bleed variable lets the
 * tracks extend past the wall's bounds in all four directions, so
 * rotated content has room to fit before the outer overflow: hidden
 * clips. Default bleed is 0; users set it when they rotate.
 *
 * The negative margin trick:
 *   margin: calc(var(--hk-mw-bleed) * -1) 0
 *   width: calc(100% + (var(--hk-mw-bleed) * 2))
 *
 * Vertical bleed uses padding on the strip instead (so the
 * scrolling animation accounts for it properly). */
.hk-mw-tracks {
	--hk-mw-rotate: 0deg;
	--hk-mw-scale: 1;
	--hk-mw-offset-x: 0px;
	--hk-mw-offset-y: 0px;

	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: calc(100% + (var(--hk-mw-bleed) * 2));
	height: 100%;
	margin-left: calc(var(--hk-mw-bleed) * -1);
	gap: 12px;
	transform:
		translate(var(--hk-mw-offset-x), var(--hk-mw-offset-y))
		rotate(var(--hk-mw-rotate))
		scale(var(--hk-mw-scale));
	transform-origin: center center;
}
.hk-mw *,
.hk-mw *::before,
.hk-mw *::after {
	box-sizing: border-box;
}

/* One track = a vertically-scrolling column. No overflow clipping
 * here — the outer .hk-mw handles that. Clipping on each track would
 * cut rotated content at the track's own (rotated) edges. */
.hk-mw-track {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* The strip holds the items (rendered twice inside it). Animating
 * 0 → -50% scrolls one full copy of items out; the second copy is
 * already in place at the start position, so the loop is seamless.
 *
 * `animation-duration` is set inline by marquee-wall.js based on the
 * strip's measured height and the user-chosen pixels-per-second speed.
 * The fallback `40s` below applies if JS doesn't load. */
.hk-mw-strip {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 12px;
	width: 100%;
	animation: hk-mw-scroll-up 40s linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* "Down" direction uses its own keyframes block that runs forward
 * through values, so it loops cleanly. Using `animation-direction:
 * reverse` here caused a visible skip at the loop boundary in Safari
 * — a known browser quirk where reversed infinite animations don't
 * always wrap seamlessly. */
.hk-mw-track--down .hk-mw-strip {
	animation-name: hk-mw-scroll-down;
}

/* Pause on hover (opt-in via class on root). When pausing we need to
 * preserve translateZ(0) — otherwise the layer drops and the strip
 * snaps back to translateY(0). The animation pause handles position. */
.hk-mw--pause-on-hover:hover .hk-mw-strip {
	animation-play-state: paused;
}

/* Single item */
.hk-mw-item {
	width: 100%;
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.04);
}
.hk-mw-media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Two keyframes blocks, one per direction. Both run forward (no
 * animation-direction: reverse) so infinite-loop wrapping is
 * seamless in all browsers. */
@keyframes hk-mw-scroll-up {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -50%, 0); }
}
@keyframes hk-mw-scroll-down {
	from { transform: translate3d(0, -50%, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

/* ==================================================================
 * FADE MASKS
 *
 * `mask-image` is well-supported (Chrome, Firefox, Safari with the
 * `-webkit-` prefix). Older Safari needs the prefix; we include both.
 * The gradient transitions from transparent at the edge to opaque
 * past the fade band.
 * ================================================================== */
.hk-mw--fade-top {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--hk-mw-fade-size),
		#000 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--hk-mw-fade-size),
		#000 100%
	);
}
.hk-mw--fade-bottom {
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var(--hk-mw-fade-size)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var(--hk-mw-fade-size)),
		transparent 100%
	);
}
.hk-mw--fade-both {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--hk-mw-fade-size),
		#000 calc(100% - var(--hk-mw-fade-size)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--hk-mw-fade-size),
		#000 calc(100% - var(--hk-mw-fade-size)),
		transparent 100%
	);
}

/* ==================================================================
 * MOBILE PLACEMENT
 *
 * "Hidden" mode uses a default breakpoint of 767px. The widget.php
 * emits an inline <style> with the user-chosen breakpoint when it
 * differs, OR for background mode (which needs more rules).
 * ================================================================== */
@media (max-width: 767px) {
	.hk-mw--mobile-hidden {
		display: none !important;
	}
}

/* The mobile dim overlay is hidden by default (only shown in
 * background mode, where the inline style block flips it on). */
.hk-mw-mobile-overlay {
	display: none;
}

/* ==================================================================
 * REDUCED MOTION
 *
 * Stop the scroll entirely when the user prefers reduced motion.
 * Items remain visible (first strip stays in place); they just don't
 * loop. Adding `animation: none` is the right move — content is
 * still readable and accessible.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hk-mw-strip {
		animation: none !important;
	}
}