/* Viewport: clips overflow */
.wp-block-wpminty-pro-marquee {
	overflow: hidden;
	contain: layout style paint;
}

/* Track: static flex container holding the two content sets.
 * The track gap provides the seam spacing between the two copies. */
.wpminty-marquee__track {
	display: flex;
	gap: var(--wp--style--block-gap, 0px);
}

/* Content set: one loop period. Sets keep their natural content
 * width (no stretching); view.js clones additional sets so the track
 * always covers the visible area plus one full period, which keeps the
 * scroll seamless with a constant item gap. */
.wpminty-marquee__set {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--style--block-gap, 0px);
}

/* Theme defaults give inner blocks their own margins (e.g. core image
 * gets top/bottom spacing from theme.json), which breaks the marquee
 * rhythm. The doubled class keeps specificity (0-2-0) above the
 * `:root :where(...)` global styles regardless of load order. */
.wpminty-marquee__set.wpminty-marquee__set > * {
	margin: 0;
}

/* Animation runs on the track while the block is in the viewport
 * (the is-inview class is toggled by view.js). The travel distance is
 * exactly one period (set size + gap) via --wpminty-marquee-shift, so
 * the loop point is invisible. */
.wp-block-wpminty-pro-marquee.is-inview .wpminty-marquee__track {
	animation: wpmintyMarqueeX var(--wpminty-marquee-duration, 20s) linear infinite;
	will-change: transform;
}

/* Vertical mode */
[data-direction="vertical"] .wpminty-marquee__track {
	flex-direction: column;
}

[data-direction="vertical"] .wpminty-marquee__set {
	flex-direction: column;
}

.wp-block-wpminty-pro-marquee.is-inview[data-direction="vertical"] .wpminty-marquee__track {
	animation-name: wpmintyMarqueeY;
}

/* Reverse scroll */
.wp-block-wpminty-pro-marquee.is-inview[data-scroll-direction="reverse"] .wpminty-marquee__track {
	animation-direction: reverse;
}

/* Pause on hover */
.wp-block-wpminty-pro-marquee.is-inview[data-pause-on-hover="1"]:hover .wpminty-marquee__track {
	animation-play-state: paused;
}

/* Fade edges: mask the scrolling content near the block borders.
 * The fade color CSS variable controls the opaque color at the
 * transition zone (defaults to white). */
.wp-block-wpminty-pro-marquee[data-fade-edges="1"] {
	-webkit-mask-image: linear-gradient(to right, transparent, var(--wpminty-marquee-fade-color, #ffffff) var(--wpminty-marquee-fade, 40px), var(--wpminty-marquee-fade-color, #ffffff) calc(100% - var(--wpminty-marquee-fade, 40px)), transparent);
	mask-image: linear-gradient(to right, transparent, var(--wpminty-marquee-fade-color, #ffffff) var(--wpminty-marquee-fade, 40px), var(--wpminty-marquee-fade-color, #ffffff) calc(100% - var(--wpminty-marquee-fade, 40px)), transparent);
}

.wp-block-wpminty-pro-marquee[data-direction="vertical"][data-fade-edges="1"] {
	-webkit-mask-image: linear-gradient(to bottom, transparent, var(--wpminty-marquee-fade-color, #ffffff) var(--wpminty-marquee-fade, 40px), var(--wpminty-marquee-fade-color, #ffffff) calc(100% - var(--wpminty-marquee-fade, 40px)), transparent);
	mask-image: linear-gradient(to bottom, transparent, var(--wpminty-marquee-fade-color, #ffffff) var(--wpminty-marquee-fade, 40px), var(--wpminty-marquee-fade-color, #ffffff) calc(100% - var(--wpminty-marquee-fade, 40px)), transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wpminty-marquee__track {
		animation: none;
	}
}

/* Keyframes: travel exactly one period (set size + one gap). The shift
 * variable is set by view.js from measured sizes; the -50% fallback only
 * applies before the script ran (no animation runs in that state). */
@keyframes wpmintyMarqueeX {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--wpminty-marquee-shift, -50%), 0, 0); }
}
@keyframes wpmintyMarqueeY {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, var(--wpminty-marquee-shift, -50%), 0); }
}

/* Max-size constraint on the block wrapper. True max-* semantics:
 * smaller content keeps its natural size (adaptive), larger content is
 * capped. In vertical mode --wpminty-marquee-max-height is the visible
 * scrolling window and must stay a definite height. */
.wp-block-wpminty-pro-marquee[data-direction="horizontal"] {
	max-height: var(--wpminty-marquee-max-size, none);
	margin-inline: auto;
}
.wp-block-wpminty-pro-marquee[data-direction="vertical"] {
	max-width: var(--wpminty-marquee-max-size, none);
	height: var(--wpminty-marquee-max-height, auto);
	margin-inline: auto;
}

/* Horizontal mode: images shrink proportionally up to the limit.
 * The cap is applied directly via the CSS variable (inherited from the
 * block wrapper) so no definite-height chain is required. */
.wpminty-marquee__set > figure {
	width: auto;
	flex-shrink: 0;
}
.wpminty-marquee__set > figure img {
	max-height: var(--wpminty-marquee-max-size, none);
	width: auto;
	object-fit: contain;
}

/* Vertical mode: images are capped to the block width */
[data-direction="vertical"] .wpminty-marquee__set > figure img {
	max-width: var(--wpminty-marquee-max-size, none);
	max-height: none;
	height: auto;
}

/* Inner image blocks: on the front-end the core image block renders
 * as <figure class="wp-block-image">; the editor nests the figure in
 * an extra block wrapper. Cover both shapes. */
.wpminty-marquee__set > .wp-block-image {
	width: auto;
	flex-shrink: 0;
}
.wpminty-marquee__set > .wp-block-image > figure {
	margin: 0;
}
.wpminty-marquee__set > .wp-block-image img {
	max-height: var(--wpminty-marquee-max-size, none);
	width: auto;
	max-width: none;
	object-fit: contain;
}

[data-direction="vertical"] .wpminty-marquee__set > .wp-block-image img {
	max-height: none;
	max-width: var(--wpminty-marquee-max-size, none);
	height: auto;
}