/* El Paseo Logo Crawl — front-end
   Matches the TSOEP design-system "Logo crawl" component.
   Brand tokens fall back to design-system hex if the theme :root is absent. */

.eplc-crawl{
	position:relative;
	overflow:hidden;
	height:var(--eplc-band-h,106px);
	display:flex;
	align-items:center;
	background:var(--white,#FFFFFF);
	--eplc-gap:clamp(46px,5.6vw,96px);
	--eplc-logo-w:80px;
	--eplc-logo-h:39px;
	/* Ground + content dissolve at both edges: 0–14% / 86–100% */
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
	        mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}

.eplc-track{
	display:flex;
	width:max-content;
	animation:eplc-crawl var(--eplc-speed,78s) linear infinite;
	will-change:transform;
}

/* Pause the marquee while the pointer is over the track. */
.eplc-crawl:hover .eplc-track{ animation-play-state:paused; }

/* Trailing padding on each group makes -50% land exactly one group over,
   with the inter-group gap equal to the internal gap — no seam. */
.eplc-group{
	display:flex;
	align-items:center;
	gap:var(--eplc-gap);
	padding-right:var(--eplc-gap);
}

.eplc-item{
	display:flex;
	align-items:center;
	text-decoration:none;
	flex:0 0 auto;
}

/* Masked logo: silhouette recolored Shadow → Dusk on hover/focus. */
.eplc-logo{
	display:block;
	width:var(--eplc-logo-w,140px);
	height:var(--eplc-logo-h,39px);
	background-color:var(--shadow,#393A3A);
	-webkit-mask:var(--_m) center / contain no-repeat;
	        mask:var(--_m) center / contain no-repeat;
	transition:background-color .4s cubic-bezier(.2,.7,.2,1);
}
.eplc-item:hover .eplc-logo,
.eplc-item:focus-visible .eplc-logo{ background-color:var(--dusk,#643A54); }

/* Wordmark fallback (no featured image): 700 uppercase, green underline on hover. */
.eplc-word{
	font-family:var(--body,'basic-sans','Hanken Grotesk',system-ui,sans-serif);
	font-weight:700;
	text-transform:uppercase;
	font-size:var(--fs-100,clamp(11px,0.72vw,13px));
	letter-spacing:.16em;
	white-space:nowrap;
	color:var(--shadow,#393A3A);
	border-bottom:1px solid transparent;
	padding-bottom:2px;
	transition:color .4s cubic-bezier(.2,.7,.2,1),border-color .4s cubic-bezier(.2,.7,.2,1);
}
.eplc-item:hover .eplc-word,
.eplc-item:focus-visible .eplc-word{
	color:var(--dusk,#643A54);
}

/* Global focus ring parity with the design system. */
.eplc-item:focus-visible{ outline:2px solid var(--dusk,#643A54); outline-offset:4px; }

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

@keyframes eplc-crawl{
	from{ transform:translate3d(0,0,0); }
	to{ transform:translate3d(-50%,0,0); }
}