/**
 * Solomon motion layer.
 *
 * Every rule that hides content is scoped to `.solomon-js`, so a visitor
 * without JavaScript sees the finished page rather than an empty one.
 * Everything is disabled under `prefers-reduced-motion: reduce`.
 */

:root {
	--solomon-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--solomon-duration: 760ms;
	--solomon-delay: 0ms;
	--solomon-parallax: 0px;
}

/* ---------------------------------------------------------------------------
 * Reveal primitives
 * ------------------------------------------------------------------------ */

.solomon-js .is-style-solomon-reveal,
.solomon-js .is-style-solomon-reveal-left,
.solomon-js .is-style-solomon-reveal-right {
	opacity: 0;
	transition:
		opacity var(--solomon-duration) var(--solomon-ease) var(--solomon-delay),
		transform var(--solomon-duration) var(--solomon-ease) var(--solomon-delay);
	will-change: opacity, transform;
}

.solomon-js .is-style-solomon-reveal {
	transform: translate3d( 0, 28px, 0 );
}

.solomon-js .is-style-solomon-reveal-left {
	transform: translate3d( -36px, 0, 0 );
}

.solomon-js .is-style-solomon-reveal-right {
	transform: translate3d( 36px, 0, 0 );
}

.solomon-js .is-style-solomon-reveal.is-revealed,
.solomon-js .is-style-solomon-reveal-left.is-revealed,
.solomon-js .is-style-solomon-reveal-right.is-revealed {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

/* Mask reveal — the display headings wipe up from a clipped baseline. */
.solomon-js .is-style-solomon-mask-up {
	clip-path: inset( 0 0 100% 0 );
	transform: translate3d( 0, 0.35em, 0 );
	opacity: 0;
	transition:
		clip-path 900ms var(--solomon-ease) var(--solomon-delay),
		transform 900ms var(--solomon-ease) var(--solomon-delay),
		opacity 500ms linear var(--solomon-delay);
}

.solomon-js .is-style-solomon-mask-up.is-revealed {
	clip-path: inset( 0 0 -10% 0 );
	transform: translate3d( 0, 0, 0 );
	opacity: 1;
}

/* Stagger — children animate in sequence; --solomon-delay is set by motion.js */
.solomon-js .is-style-solomon-stagger > * {
	opacity: 0;
	transform: translate3d( 0, 24px, 0 );
	transition:
		opacity 680ms var(--solomon-ease) var(--solomon-delay),
		transform 680ms var(--solomon-ease) var(--solomon-delay);
}

.solomon-js .is-style-solomon-stagger.is-revealed > * {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
}

/* ---------------------------------------------------------------------------
 * Parallax
 * ------------------------------------------------------------------------ */

.is-style-solomon-parallax .wp-block-cover__image-background,
.is-style-solomon-parallax .wp-block-cover__video-background,
.is-style-solomon-parallax > img {
	transform: translate3d( 0, var(--solomon-parallax), 0 ) scale( 1.08 );
	transition: transform 120ms linear;
	will-change: transform;
}

/* ---------------------------------------------------------------------------
 * Logo marquee — the "Trusted by leading brands" row
 * ------------------------------------------------------------------------ */

.is-style-solomon-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
}

/* Without JS the logos simply wrap and centre — still a usable trust bar. */
.is-style-solomon-marquee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 2rem, 5vw, 4.5rem );
}

/* motion.js wraps the logos in this track once it takes over. */
.solomon-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp( 2rem, 5vw, 4.5rem );
	width: max-content;
}

.is-style-solomon-marquee:has( > .solomon-marquee__track ) {
	display: block;
}

.is-style-solomon-marquee.is-running > .solomon-marquee__track {
	animation: solomon-marquee 38s linear infinite;
}

.is-style-solomon-marquee.is-running:hover > .solomon-marquee__track,
.is-style-solomon-marquee.is-running:focus-within > .solomon-marquee__track {
	animation-play-state: paused;
}

.is-style-solomon-marquee.is-static > .solomon-marquee__track {
	flex-wrap: wrap;
	width: auto;
	justify-content: center;
}

.is-style-solomon-marquee figure,
.is-style-solomon-marquee .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
}

/*
 * One rule governs every logo, so the row scales uniformly whatever the source
 * file is. Height is fixed and width follows the aspect ratio, with a max-width
 * so a very wide wordmark cannot dominate the row; `object-fit: contain` keeps
 * the artwork undistorted if that cap is what binds. The `!important` flags are
 * deliberate: the block editor writes a per-image inline width whenever someone
 * drags an image handle, and those inline widths would otherwise win and leave
 * the row at a dozen different sizes.
 */
.is-style-solomon-marquee img {
	height: clamp( 20px, 3vw, 28px ) !important;
	width: auto !important;
	max-width: 150px;
	object-fit: contain;
	object-position: center;
	opacity: 0.72;
	filter: grayscale( 1 );
	transition: opacity 300ms ease, filter 300ms ease;
}

.is-style-solomon-marquee img:hover {
	opacity: 1;
	filter: grayscale( 0 );
}

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

/* ---------------------------------------------------------------------------
 * Counters — reserve the width so the layout does not jitter while counting
 * ------------------------------------------------------------------------ */

.is-style-solomon-counter {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------------------
 * Header behaviour
 * ------------------------------------------------------------------------ */

.solomon-header {
	position: sticky;
	top: 0;
	z-index: 90;
	transition: transform 420ms var(--solomon-ease), background-color 300ms ease, box-shadow 300ms ease;
}

.solomon-header.is-condensed {
	background-color: var(--wp--preset--color--paper);
	box-shadow: 0 1px 0 rgba( 26, 43, 59, 0.08 );
}

.solomon-header.is-hidden {
	transform: translate3d( 0, -100%, 0 );
}

/* Keep the header visible whenever the overlay menu is open or focus is in it */
.solomon-header:focus-within {
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Link and card micro-interactions
 * ------------------------------------------------------------------------ */

.solomon-underline-link a,
a.solomon-underline-link {
	position: relative;
	text-decoration: none;
	padding-bottom: 2px;
	background-image: linear-gradient( currentColor, currentColor );
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 420ms var(--solomon-ease);
}

.solomon-underline-link a:hover,
a.solomon-underline-link:hover {
	background-size: 0% 1px;
	background-position: 100% 100%;
}

.is-style-solomon-card {
	transition: transform 420ms var(--solomon-ease), box-shadow 420ms var(--solomon-ease);
}

.is-style-solomon-card:hover {
	transform: translate3d( 0, -4px, 0 );
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Case study and insight cards lift their image on hover */
.solomon-media-hover img {
	transition: transform 900ms var(--solomon-ease);
	will-change: transform;
}

.solomon-media-hover:hover img {
	transform: scale( 1.045 );
}

/* ---------------------------------------------------------------------------
 * Respect the visitor's motion preference
 * ------------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	.solomon-js .is-style-solomon-reveal,
	.solomon-js .is-style-solomon-reveal-left,
	.solomon-js .is-style-solomon-reveal-right,
	.solomon-js .is-style-solomon-mask-up,
	.solomon-js .is-style-solomon-stagger > * {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}

	.is-style-solomon-marquee > .solomon-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}

	.is-style-solomon-parallax .wp-block-cover__image-background,
	.is-style-solomon-parallax .wp-block-cover__video-background,
	.is-style-solomon-parallax > img {
		transform: none;
	}

	.solomon-header,
	.is-style-solomon-card,
	.solomon-media-hover img,
	.solomon-underline-link a {
		transition: none;
	}

	.solomon-header.is-hidden {
		transform: none;
	}
}