/*
 * ntw_project_reel — port of `.a-marquee`. Pure CSS.
 *
 * The prototype laid each set out with an inline `style="display:flex;gap:64px"`;
 * that is a class here, so the gap is one declaration and cannot drift between the
 * two copies. The loop slides the track by -50% — exactly one copy of the list —
 * and the animation exists only under `.ntw-anim`.
 */

.ntw-marquee {
	overflow: hidden; border-block: 1px solid var(--line); padding-block: 30px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ntw-marquee__track { display: flex; width: max-content; gap: 64px; }
.ntw-anim .ntw-marquee__track { animation: ntw-marq var(--ntw-speed, 46s) linear infinite; }
.ntw-marquee:hover .ntw-marquee__track { animation-play-state: paused; }
@keyframes ntw-marq { to { transform: translateX(-50%); } }

.ntw-marquee__set { display: flex; align-items: center; gap: 64px; margin: 0; padding: 0; list-style: none; }
.ntw-marquee__item {
	display: inline-flex; align-items: center; gap: 64px;
	font: 400 clamp(1.3rem, 2.4vw, 2rem)/1.3 var(--f-display); white-space: nowrap;
}
.ntw-marquee__item::after { content: '✦'; font-size: .5em; color: var(--ntw-w-accent, var(--green)); }
.ntw-marquee__item a:hover { color: var(--ntw-w-accent, var(--green)); }
/* Two classes: a one-class cap on an <img> loses to Elementor's `.elementor img` reset. */
.ntw-marquee .ntw-marquee__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; }

.ntw-prj .ntw-note { margin: 18px 0 0; font-size: 12.5px; }