/* Shared Event Logo lockup
   ------------------------------------------------------------------
   The animated TRANSFORM event lockup, shared by the hero's transform
   variant and the standalone "Animated Transform Logo" widget. Both emit the
   `.zededa-hero-event-logo` markup (see traits/trait-event-logo-lockup.php), so
   these rules are scoped to that class — NOT to `.zededa-hero--transform` — so
   the lockup styles itself identically wherever it is dropped.

   --tl-logo-w is the single source of truth for the lockup width; sized up so
   the wordmark reads at roughly the hero heading's visual width. Tune this one
   value to scale the whole lockup. */
.zededa-hero-event-logo {
	--tl-logo-w: clamp(240px, 32vw, 424px);
}

.zededa-hero-event-logo img {
	display: block;
	width: var(--tl-logo-w);
	height: auto;
}

/* Animated lockup: the static <img> (fallback / reduced-motion) defines the
   box; the inline SVG overlays it once the animation engine reveals it. The
   SVG's viewBox is widened to the left (-60..315) for the dissolving tail, so
   it is scaled up and shifted so the wordmark (x 0..315) sits exactly over the
   fallback and the tail overflows into the whitespace to its left.
   The container is pinned to the lockup width so the SVG's percentage-based
   offsets anchor to the wordmark, not the full copy column. */
.zededa-hero-event-logo--animated {
	position: relative;
	width: var(--tl-logo-w);
}

.zededa-hero-event-logo--animated.is-animating .zededa-hero-event-logo__fallback {
	/* Keep the layout box (width/height) but hand the pixels to the SVG. */
	visibility: hidden;
}

.zededa-hero-event-logo__svg {
	position: absolute;
	top: 0;
	left: -19.0476%;  /* -60 / 315 */
	width: 119.0476%; /* 375 / 315 */
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Standalone widget wrapper — optional horizontal alignment of the lockup
   inside its container. The inner `.zededa-hero-event-logo` keeps its own
   width (--tl-logo-w), so the wrapper just controls where that box sits. */
.zededa-event-logo-widget {
	display: flex;
}

.zededa-event-logo-widget--align-left {
	justify-content: flex-start;
}

.zededa-event-logo-widget--align-center {
	justify-content: center;
}

.zededa-event-logo-widget--align-right {
	justify-content: flex-end;
}