/* Interaction effects driven by assets/js/site.js: client-name marquee, cursor glow on cards and
   dark sections. Both are off with reduced motion (the script does not set them up). */

/* ---------- Client-name marquee (home) ---------- */
.pe-marquee {
	/* Full-bleed band inside the wide container, fading out at both screen edges. */
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pe-marquee__row + .pe-marquee__row { margin-top: clamp(6px, 1vw, 14px); }
.pe-marquee__track {
	display: flex; width: max-content;
	animation: pe-marquee var(--pe-marquee-duration, 48s) linear infinite;
}
.pe-marquee__row.is-reverse .pe-marquee__track { animation-direction: reverse; }
.pe-marquee:hover .pe-marquee__track { animation-play-state: paused; }
.pe-marquee__group { display: flex; list-style: none; margin: 0; padding: 0; }
.pe-marquee__group li {
	white-space: nowrap; padding-inline: 0.55em;
	font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.35;
	color: var(--wp--preset--color--color-text-secondary);
	transition: color var(--wp--custom--motion--duration-short) var(--wp--custom--motion--easing-out);
}
.pe-marquee__group li::after { content: "/"; margin-left: 1.1em; color: var(--wp--preset--color--color-line); font-weight: 300; }
.pe-marquee__group li:hover { color: var(--wp--preset--color--color-text-primary); }
.pe-marquee + .pe-link-arrow { margin-block-start: 36px; }
@keyframes pe-marquee { to { transform: translateX(-50%); } }

/* ---------- Cursor glow ---------- */
/* Cards: a soft light under the content and a brighter rim where the pointer is. */
.pe-glow { position: relative; isolation: isolate; }
.pe-glow::before, .pe-glow::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	opacity: 0; transition: opacity var(--wp--custom--motion--duration-medium) var(--wp--custom--motion--easing-out);
}
.pe-glow::before {
	z-index: -1;
	background: radial-gradient(circle 420px at var(--pe-mx, 50%) var(--pe-my, 50%), rgba(48, 112, 168, 0.12), transparent 65%);
}
.pe-glow::after {
	z-index: 2; padding: 1px;
	background: radial-gradient(circle 220px at var(--pe-mx, 50%) var(--pe-my, 50%), rgba(26, 179, 245, 0.55), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.pe-glow:hover::before, .pe-glow:hover::after { opacity: 1; }
.pe-dark .pe-glow::before, .pe-compare__col--us.pe-glow::before { background: radial-gradient(circle 420px at var(--pe-mx, 50%) var(--pe-my, 50%), rgba(26, 179, 245, 0.12), transparent 65%); }

/* Dark sections: a wide, faint light across the section. */
.pe-glow-section { position: relative; isolation: isolate; }
.pe-glow-section::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(circle 620px at var(--pe-mx, 50%) var(--pe-my, 50%), rgba(26, 179, 245, 0.11), transparent 70%);
	opacity: 0; transition: opacity 600ms var(--wp--custom--motion--easing-out);
}
.pe-glow-section:hover::before { opacity: 1; }