/**
 * Module: Marquee — vsk-marquee.css
 *
 * CSS custom properties (ustawiane przez JS / shortcode jako inline style):
 *   --vsk-marquee-gap       Odstęp między kopiami.              Domyślnie: 2rem
 *   --vsk-marquee-height    Wysokość wrappera (tryb wertykalny). Domyślnie: 300px
 *   --vsk-marquee-shift     Odległość jednego cyklu w px.       Ustawiane przez JS.
 *   --vsk-marquee-duration  Czas animacji w sekundach.          Ustawiane przez JS.
 *
 * Kierunki:
 *   left / right — jeden keyframe (translateX) + animation-direction: reverse
 *   up   / down  — jeden keyframe (translateY) + animation-direction: reverse
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.vsk-marquee {
	--vsk-marquee-gap:      2rem;
	--vsk-marquee-height:   300px;
	--vsk-marquee-shift:    0px;
	--vsk-marquee-duration: 10s;

	display:     block;
	overflow:    hidden;
	width:       100%;
	user-select: none;
}

/* Tryb wertykalny: jawna wysokość wymagana dla overflow: hidden */
.vsk-marquee--up,
.vsk-marquee--down {
	width:  auto;
	height: var(--vsk-marquee-height);
}

/* ── Track ───────────────────────────────────────────────────────────────── */

.vsk-marquee__track {
	display:     flex;
	flex-wrap:   nowrap;
	align-items: center;
	width:       max-content;
	gap:         var(--vsk-marquee-gap);
	will-change: transform;
}

/* Tryb wertykalny: oś główna → kolumna */
.vsk-marquee--up .vsk-marquee__track,
.vsk-marquee--down .vsk-marquee__track {
	flex-direction: column;
	align-items:    stretch;
	width:          100%;
	height:         max-content;
}

/* ── Każda kopia ─────────────────────────────────────────────────────────── */

.vsk-marquee__copy {
	display:     flex;
	flex-wrap:   nowrap;
	align-items: center;
	gap:         var(--vsk-marquee-gap);
	flex-shrink: 0;
}

.vsk-marquee--up .vsk-marquee__copy,
.vsk-marquee--down .vsk-marquee__copy {
	flex-direction: column;
	align-items:    stretch;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

/* Poziomy */
@keyframes vsk-marquee-scroll-x {
	to {
		transform: translateX(calc(-1 * var(--vsk-marquee-shift)));
	}
}

/* Wertykalny */
@keyframes vsk-marquee-scroll-y {
	to {
		transform: translateY(calc(-1 * var(--vsk-marquee-shift)));
	}
}

/* ── Kierunki ────────────────────────────────────────────────────────────── */

.vsk-marquee--left .vsk-marquee__track {
	animation: vsk-marquee-scroll-x var(--vsk-marquee-duration) linear infinite;
}

.vsk-marquee--right .vsk-marquee__track {
	animation: vsk-marquee-scroll-x var(--vsk-marquee-duration) linear infinite reverse;
}

.vsk-marquee--up .vsk-marquee__track {
	animation: vsk-marquee-scroll-y var(--vsk-marquee-duration) linear infinite;
}

.vsk-marquee--down .vsk-marquee__track {
	animation: vsk-marquee-scroll-y var(--vsk-marquee-duration) linear infinite reverse;
}

/* ── Pauza na hover ──────────────────────────────────────────────────────── */

.vsk-marquee[data-vsk-pause-on-hover="true"]:hover .vsk-marquee__track {
	animation-play-state: paused;
}

/* ── Prefers-reduced-motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vsk-marquee__track {
		animation: none !important;
	}
}