/* pixid_powered_by animated logo. */

.pixid-powered-by {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

/* Variant colors. currentColor cascades to the SVG fill/stroke.
   Selectors chain BOTH wrapper classes (`pixid-powered-by` and
   `pixid-powered-by--<variant>`) plus the `a` element to push
   specificity to (0,2,1). That beats Elementor kits' rule
   `.elementor-kit-N a { color: var(--e-global-color-primary); }`
   (specificity 0,1,1) outright, instead of just tying it and relying
   on source order - Elementor's kit CSS loads after the theme's, so
   the tie would otherwise hand the cascade to the kit. */
a.pixid-powered-by.pixid-powered-by--dark  { color: #fff; }
a.pixid-powered-by.pixid-powered-by--light { color: #000; }
a.pixid-powered-by.pixid-powered-by--auto  { color: #fff; } /* default until JS detects bg */
a.pixid-powered-by.pixid-powered-by--auto.is-bg-light { color: #000; }

.pixid-logo {
	display: inline-block;
	height: 1em;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	line-height: 1;
}

.pixid-logo-svg {
	height: 1em;
	width: auto;
	overflow: visible;
	vertical-align: middle;
}

/* Chevrons + clipPath rects share the same transition. */
.pixid-logo .pixid-chev-gt,
.pixid-logo .pixid-chev-lt,
.pixid-logo .pixid-rect-out,
.pixid-logo .pixid-rect-lsl,
.pixid-logo .pixid-rect-rsl {
	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step 0: resting × parked right, all wipes closed. */
.pixid-logo.s0 .pixid-chev-gt   { transform: translateX(310px); }
.pixid-logo.s0 .pixid-chev-lt   { transform: translateX(310px); }
.pixid-logo.s0 .pixid-rect-out  { transform: translateX(310px); }
.pixid-logo.s0 .pixid-rect-lsl  { transform: translateX(-330px); }
.pixid-logo.s0 .pixid-rect-rsl  { transform: translateX(310px); }

/* Step 1: < drags the outline wipe leftward. */
.pixid-logo.s1 .pixid-chev-gt   { transform: translateX(310px); }
.pixid-logo.s1 .pixid-chev-lt   { transform: translateX(-330px); }
.pixid-logo.s1 .pixid-rect-out  { transform: translateX(-330px); }
.pixid-logo.s1 .pixid-rect-lsl  { transform: translateX(-330px); }
.pixid-logo.s1 .pixid-rect-rsl  { transform: translateX(310px); }

/* Step 2: chevrons collapse to center ×, solid wipes open. */
.pixid-logo.s2 .pixid-chev-gt   { transform: translateX(0); }
.pixid-logo.s2 .pixid-chev-lt   { transform: translateX(0); }
.pixid-logo.s2 .pixid-rect-out  { transform: translateX(0); }
.pixid-logo.s2 .pixid-rect-lsl  { transform: translateX(0); }
.pixid-logo.s2 .pixid-rect-rsl  { transform: translateX(0); }

/* Reveal variants: only the s0 chev resting position changes. The wipe
   rects and s1/s2 chev targets are unchanged, so > and < still arrive
   at the same s2 × in the center of the word. */

/* reveal="left": × parked on the left; > slides right across the word. */
.pixid-logo--reveal-left.s0 .pixid-chev-gt   { transform: translateX(-330px); }
.pixid-logo--reveal-left.s0 .pixid-chev-lt   { transform: translateX(-330px); }

/* reveal="center": × parked dead center; chevrons split outward then return. */
.pixid-logo--reveal-center.s0 .pixid-chev-gt { transform: translateX(0); }
.pixid-logo--reveal-center.s0 .pixid-chev-lt { transform: translateX(0); }

/* Respect reduced motion: skip the animation, just show the final word. */
@media (prefers-reduced-motion: reduce) {
	.pixid-logo .pixid-chev-gt,
	.pixid-logo .pixid-chev-lt,
	.pixid-logo .pixid-rect-out,
	.pixid-logo .pixid-rect-lsl,
	.pixid-logo .pixid-rect-rsl {
		transition: none;
	}
}