/* ═══════════════════════════════════════════════════════════
   Free Eye Theme — Motion
   Hero atmosphere, card lift, and the partner marquee.

   Every rule here is decoration over content that is already visible and
   already laid out. Nothing in this file may hide an element, reserve its
   space, or delay its paint — the homepage once rendered blank because its
   copy waited on a scroll observer, and that is not repeated.

   The whole file goes quiet under prefers-reduced-motion (bottom of file).
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Hero atmosphere ─────────────────────────────────────
   A very slow drift across the hero's existing gradient. 28 seconds is long
   enough that it reads as depth rather than movement — a visitor who looks
   straight at it barely catches it, which is the intent behind a corporate
   hero. Only background-position animates, so it never triggers layout. */
.fe-hero {
	background-size: 160% 160%;
	animation: fe-hero-drift 28s ease-in-out infinite alternate;
}

@keyframes fe-hero-drift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* ── 2. Card lift ───────────────────────────────────────────
   One shared hover treatment so every card in the theme responds the same
   way. Previously each page stylesheet invented its own lift distance and
   shadow, and the inconsistency was visible when moving between pages.
   Transform and box-shadow only: both composite, neither reflows. */
.fe-service-card,
.fe-card,
.fe-partner-card,
.fe-project-card {
	transition:
		transform var(--fe-transition, 220ms) ease,
		box-shadow var(--fe-transition, 220ms) ease;
}

@media (hover: hover) {
	.fe-service-card:hover,
	.fe-card:hover,
	.fe-partner-card:hover,
	.fe-project-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px rgba(0, 38, 154, .14);
	}
}

/* Keyboard users get the same affordance as the mouse. */
.fe-service-card:focus-within,
.fe-card:focus-within,
.fe-partner-card:focus-within,
.fe-project-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 38, 154, .14);
}

/* ── 3. Partner marquee ─────────────────────────────────────
   The logo row scrolls continuously. Accessibility requirements that come
   with any auto-moving content, all implemented:
     · a real pause button (added by fe-motion.js, styled below)
     · pause on hover and on keyboard focus
     · a static, complete set of logos under reduced motion
   The track holds the logo set twice; translating by exactly -50% puts the
   second copy where the first started, so the loop has no visible seam. */
.fe-marquee {
	position: relative;
	overflow: hidden;
	/* Fade the two edges so logos enter and leave instead of being chopped. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.fe-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--fe-space-10, 40px);
	width: max-content;
	animation: fe-marquee-scroll 45s linear infinite;
}

/* RTL reads right to left, so the logos travel the other way. */
[dir="rtl"] .fe-marquee__track {
	animation-name: fe-marquee-scroll-rtl;
}

.fe-marquee.is-paused .fe-marquee__track,
.fe-marquee.is-hovered .fe-marquee__track {
	animation-play-state: paused;
}

@keyframes fe-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes fe-marquee-scroll-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

.fe-marquee__toggle {
	position: absolute;
	inset-block-end: var(--fe-space-2, 8px);
	inset-inline-end: var(--fe-space-2, 8px);
	z-index: 2;
	min-width: 32px;
	min-height: 32px;
	padding: 0;
	font-size: 11px;
	line-height: 1;
	color: var(--fe-text-muted);
	background: var(--fe-white);
	border: 1px solid var(--fe-border);
	border-radius: 50%;
	cursor: pointer;
	opacity: .55;
	transition: opacity 160ms ease, color 160ms ease;
}

.fe-marquee__toggle:hover,
.fe-marquee__toggle:focus-visible {
	opacity: 1;
	color: var(--fe-primary);
}

/* ── 4. Reduced motion ──────────────────────────────────────
   Not "shorter" — off. The hero stops drifting, cards stop lifting, and the
   marquee becomes a plain wrapping row showing every logo at once, which is
   the accessible equivalent of the scrolling set rather than a truncated
   version of it. */
@media (prefers-reduced-motion: reduce) {
	.fe-hero {
		animation: none;
		background-size: cover;
	}

	.fe-service-card,
	.fe-card,
	.fe-partner-card,
	.fe-project-card {
		transition: none;
	}

	.fe-service-card:hover,
	.fe-card:hover,
	.fe-partner-card:hover,
	.fe-project-card:hover,
	.fe-service-card:focus-within,
	.fe-card:focus-within,
	.fe-partner-card:focus-within,
	.fe-project-card:focus-within {
		transform: none;
	}

	.fe-marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}

	.fe-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
}

/* The duplicated logo set is a plain span, so it must lay out like the row
   it sits inside rather than as one inline block. */
.fe-marquee__clone {
	display: contents;
}

/* Inside the marquee the partner grid is a single row, not a wrapping grid. */
.fe-marquee .fe-partners-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--fe-space-10, 40px);
}

.fe-partner-logo__name {
	font-size: var(--fe-text-sm);
	font-weight: var(--fe-weight-semibold);
	color: var(--fe-text-muted);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.fe-marquee .fe-partners-grid {
		flex-wrap: wrap;
		justify-content: center;
	}
}