/*
	Scrolling announcement strip — the Scentury Marquee widget.

	Structure only. Every colour, size, gap, padding, border and speed is a
	control in the widget, so nothing here can quietly override what the shop
	owner sets in Elementor. What remains is the mechanism: how the strip
	clips, how the loop joins, and how it holds still for anyone who has asked
	for less movement.
*/

.hc-marquee {
	/* The track is wider than the strip; this is what hides the overflow. */
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
}

/*
	The track holds the message set twice and travels exactly half its own
	width, so the second copy lands where the first started. That is what makes
	the loop seamless: at the moment the animation restarts, the pixels are
	already identical, and nothing jumps.
*/
.hc-marquee__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	will-change: transform;
	animation-name: hc-marquee-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* Duration and direction are controls; these are only fallbacks. */
	animation-duration: 28s;
	animation-direction: normal;
}

.hc-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hc-marquee__text {
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
}

/* The parent theme underlines links inside .page-content. */
.page-content a.hc-marquee__text,
.page-content a.hc-marquee__text:hover {
	text-decoration: none;
}

.hc-marquee__sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 1;
}

.hc-marquee__sep svg {
	display: block;
}

@keyframes hc-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/*
			Half, not all: the track is two copies wide, so half a track is one
			full set of messages — the distance after which the strip looks
			exactly as it did when it started.
		*/
		transform: translateX(-50%);
	}
}

/* Pause on hover, when the control asks for it. */
.hc-marquee--pausable:hover .hc-marquee__track,
.hc-marquee--pausable:focus-within .hc-marquee__track {
	animation-play-state: paused;
}

/*
	Fading edges. Applied as a mask rather than an overlay so it works against
	whatever background the strip is given — a gradient overlay would have to
	guess at that colour and would be wrong the moment it changed.
*/
.hc-marquee--faded {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		#000 var(--hc-marquee-fade, 60px),
		#000 calc(100% - var(--hc-marquee-fade, 60px)),
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 var(--hc-marquee-fade, 60px),
		#000 calc(100% - var(--hc-marquee-fade, 60px)),
		transparent
	);
}

/*
	Movement across the full width of a screen is a common trigger for
	vestibular symptoms, so a visitor whose system asks for less of it gets a
	strip that holds still. The messages stay readable — only the travel stops.
	Opt out per widget with the Respect reduced motion control.
*/
@media (prefers-reduced-motion: reduce) {
	.hc-marquee--respects-motion .hc-marquee__track {
		animation: none;
		/* Without the animation the doubled track would simply be too wide. */
		flex-wrap: wrap;
		white-space: normal;
	}

	.hc-marquee--respects-motion .hc-marquee__group:nth-child(2) {
		display: none;
	}
}

/* Shown in the editor when the widget has no messages yet. */
.hc-marquee-empty {
	padding: 18px 24px;
	border: 1px dashed rgba(27, 35, 83, 0.15);
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	color: rgba(27, 35, 83, 0.5);
}