/* =========================================================
   Twins — Testimonial Marquee
   Horizontal auto-scrolling testimonials with TRUE alpha
   edge fade (mask-image) — works over any background image.
   ========================================================= */

.twins-tm {
	width: 100%;
}

/* Viewport = the visible window. This is where the alpha mask lives. */
.twins-tm__viewport {
	--twins-tm-fade: 10%;
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 var(--twins-tm-fade),
		#000 calc(100% - var(--twins-tm-fade)),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0%,
		#000 var(--twins-tm-fade),
		#000 calc(100% - var(--twins-tm-fade)),
		transparent 100%
	);
}

/* Track = the scrolling lane. */
.twins-tm__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 28px;
	width: max-content;
	will-change: transform;
	animation-name: twins-tm-scroll-left;
	animation-duration: 40s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Direction: right → reverses the animation. */
.twins-tm--dir-right .twins-tm__track {
	animation-direction: reverse;
}

/* Pause on hover. */
.twins-tm--pause-yes .twins-tm__viewport:hover .twins-tm__track {
	animation-play-state: paused;
}

@keyframes twins-tm-scroll-left {
	from { transform: translateX(0); }
	/* We render the set twice, so translating -50% gives a seamless loop. */
	to   { transform: translateX(-50%); }
}

/* ---------- Card ---------- */

.twins-tm__card {
	flex: 0 0 520px;
	width: 520px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 32px;
	background: #13102A;
	border: 1px solid #3A2F5C;
	border-radius: 14px;
	box-sizing: border-box;
}

/* ---------- Image (square, replaces circle avatar) ---------- */

.twins-tm__img-wrap {
	display: inline-flex;
}

.twins-tm__img {
	width: 52px;
	height: 52px;
	aspect-ratio: 1 / 1;       /* force perfect square box even if source isn't */
	object-fit: cover;         /* crop non-square images to fill the circle */
	object-position: center;
	display: block;
	border-radius: 50%;        /* full circle by default, overridable from widget */
	overflow: hidden;
}

/* ---------- Stars ---------- */

.twins-tm__stars {
	font-size: 16px;
	line-height: 1;
	color: #C6A15B;
	letter-spacing: 3px;
	user-select: none;
}

.twins-tm__stars--empty {
	opacity: 0.25;
	margin-left: 3px;
}

/* ---------- Quote ---------- */

.twins-tm__quote {
	margin: 0;
	font-style: italic;
	line-height: 1.55;
}

/* ---------- Author ---------- */

.twins-tm__author {
	font-variant: small-caps;
	letter-spacing: 0.06em;
}

/* ---------- Accessibility: respect reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.twins-tm__track {
		animation: none;
	}
}