/* ==========================================================================
   Scrolling marquee and tools
   The scrolling text strip and the "tools we use" chips. HTML: pages/home/sections/scrolling-marquee.php, template-parts/components/tools-we-use.php
   ========================================================================== */

.marquee {
	position: relative;
	overflow: hidden;
	padding: 22px 0;
	border-block: 1px solid var(--border);
	background: linear-gradient(90deg, rgba(124, 58, 237, .14), rgba(34, 211, 238, .06), rgba(245, 158, 11, .1));
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); white-space: nowrap; color: #fff; }
.marquee__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
.marquee__item .std-icon { color: var(--c-accent); }
/* Tools & platforms: two marquee rows of chips */
.tools { display: grid; gap: 14px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tools__track { display: flex; gap: 14px; width: max-content; animation: marquee 45s linear infinite; }
.tools__row--reverse .tools__track { animation-direction: reverse; animation-duration: 52s; }
.tools:hover .tools__track { animation-play-state: paused; }
.tool-chip {
	--c: #a78bfa;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 14px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 5%, transparent));
	border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
	color: #f1eefc;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
	transition: border-color .3s, background .3s, box-shadow .3s, color .3s, transform .3s var(--ease);
}
.tool-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 2px var(--c); flex-shrink: 0; }
.tool-chip:hover {
	transform: translateY(-2px);
	color: var(--c);
	border-color: var(--c);
	background: color-mix(in srgb, var(--c) 22%, transparent);
	box-shadow: 0 10px 28px -12px var(--c);
}