/**
 * Contact Us page — "Marquee" section.
 *
 * Same infinite, seamless right-to-left scroll, typography, speed
 * handling, and responsive breakpoints as the Pricing page's marquee (see
 * template-parts/pricing/marquee.php's inline <style>) — this file is a
 * deliberate near-duplicate of those rules, minus the blue nav pill and
 * green pulsing circle/dot (this section has no circle_color field). The
 * track's own markup renders marquee_items twice (see the template part)
 * and this file's keyframe animates to exactly -50% so the loop resets
 * invisibly — see template-parts/pricing/marquee.php's docblock for the
 * full rationale.
 *
 * .contact-marquee-section__image is a normal flex item in the SAME
 * .contact-marquee-section__track as the text — it travels with the
 * scroll exactly like the Pricing marquee's circle does. It carries no
 * animation of its own (no pulse/scale/stretch), it just rides along.
 *
 * @package Greenova
 */

.contact-marquee-section {
	overflow:   hidden;
	background: #FFFFFF;
	padding-block: 64px;
}

.contact-marquee-section__viewport {
	overflow:      hidden;
	min-height:    190px;
	display:       flex;
	align-items:   center;
}

.contact-marquee-section__track {
	display:     flex;
	align-items: center;
	gap:         80px;
	width:       max-content;
	animation-name:            contact-marquee-scroll;
	animation-timing-function: linear;   /* Constant speed — required for a seamless loop. */
	animation-iteration-count: infinite; /* Loops forever — see docblock. */
	animation-play-state:      paused;
	will-change:      transform;
	backface-visibility: hidden;
}

.contact-marquee-section.is-in-view .contact-marquee-section__track {
	animation-play-state: running;
}

.contact-marquee-section__viewport:hover .contact-marquee-section__track {
	animation-play-state: paused;
}

/*
 * 0 -> -50% moves the track exactly one full (single-copy) width, since
 * the track now contains TWO back-to-back copies of marquee_items (see
 * the template part's markup) — landing the second copy exactly where the
 * first started, so the infinite loop resets invisibly.
 */
@keyframes contact-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.contact-marquee-section__text {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      100px;
	font-weight:    400;
	line-height:    1;
	letter-spacing: -2px;
	color:          #000000;
	white-space:    nowrap;
	margin:         0;
}

/*
 * Fixed height matching the Pricing marquee's circle diameter at each
 * breakpoint; width is auto so the source image's own aspect ratio (e.g.
 * a pre-composited row of circular avatars) is preserved rather than
 * stretched or cropped.
 */
.contact-marquee-section__image {
	flex-shrink: 0;
	display:     block;
	height:      150px;
	width:       auto;
	max-width:   none; /* Overrides the theme's global img{max-width:100%} — that percentage
	                       constraint, left in place, makes this flex track's own
	                       width:max-content under-measure itself (excluding the image
	                       entirely), which throws off the section's -100% scroll keyframe
	                       and clips the last item. */
	object-fit:  contain;
}

@media ( prefers-reduced-motion: reduce ) {
	.contact-marquee-section__track {
		animation: none;
	}
}

@media ( max-width: 991.98px ) {
	.contact-marquee-section__track {
		gap: 48px;
	}

	.contact-marquee-section__text {
		font-size: 56px;
	}

	.contact-marquee-section__image {
		height: 90px;
	}

	.contact-marquee-section__viewport {
		min-height: 120px;
	}
}

@media ( max-width: 575.98px ) {
	.contact-marquee-section {
		padding-block: 40px;
	}

	.contact-marquee-section__track {
		gap: 28px;
	}

	.contact-marquee-section__text {
		font-size: 32px;
	}

	.contact-marquee-section__image {
		height: 56px;
	}

	.contact-marquee-section__viewport {
		min-height: 76px;
	}
}