/**
 * Qaiyo Motion – shared tokens and start states.
 *
 * Every hidden start state lives behind html.qaimo-js, which only the inline
 * head marker sets, and only when the visitor has not asked for reduced
 * motion. Without JavaScript (or if motion.js never reports in) nothing here
 * hides content.
 *
 * The transition is only present while an element animates
 * (.qaimo-animating), so an element's own Bricks transitions (hover etc.)
 * are untouched the rest of the time.
 */

/*
 * Tokens. The site defaults (Qaiyo Motion settings page) override these with
 * a :root rule printed after this file; element settings override both.
 */
:where(:root) {
	--qaimo-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
	--qaimo-ease-smooth: cubic-bezier(0.76, 0, 0.24, 1);
	--qaimo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--qaimo-ease: var(--qaimo-ease-soft);
	--qaimo-duration: 1.2s;
	--qaimo-duration-lines: 1.3s;
	--qaimo-distance: 28px;
	--qaimo-stagger: 80ms;
	--qaimo-offset: 12;
	--qaimo-load-opacity: 30;

	/* Glass: the surface colours and shadows of the two presets. */
	--qaimo-glass-blur: 18px;
	--qaimo-glass-at: 80;
	--qaimo-glass-light: rgba(255, 255, 255, 0.32);
	--qaimo-glass-dark: rgba(20, 20, 43, 0.42);
	--qaimo-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 12px 32px rgba(20, 20, 43, 0.2);
	--qaimo-glass-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 24px 48px rgba(20, 20, 43, 0.26);
}

/*
 * Glass safety nets, as tokens so they also reach the builder canvas: without
 * backdrop-filter, or when the visitor asks for less transparency, the
 * surface turns (almost) solid and the blur switches off.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:where(:root) {
		--qaimo-glass-light: rgba(255, 255, 255, 0.88);
		--qaimo-glass-dark: rgba(20, 20, 43, 0.9);
	}
}

@media (prefers-reduced-transparency: reduce) {
	:where(:root) {
		--qaimo-glass-on: 0;
		--qaimo-glass-saturate: 100%;
		--qaimo-glass-light: rgba(255, 255, 255, 0.94);
		--qaimo-glass-dark: rgba(20, 20, 43, 0.94);
	}
}

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

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	html.qaimo-js [data-qaimo-effect="reveal"]:not(.qaimo-in) {
		opacity: 0 !important;
		transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
	html.qaimo-js [data-qaimo-effect="reveal"]:not(.qaimo-in):not([data-qaimo-mobile="off"]) {
		opacity: 0 !important;
		transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
	}
}

/*
 * Effects that start when the page loads begin partly visible (the site
 * setting, 30 % by default) instead of fully transparent: the browser does not
 * count a fully transparent element as painted, so a hero that fades up from
 * nothing would count as loaded only when its animation ends (about 1.2 s
 * later for Largest Contentful Paint). Text lines and Clip reveal keep their
 * own start states, which do not delay it.
 */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	html.qaimo-js [data-qaimo-effect="reveal"][data-qaimo-trigger="load"]:not(.qaimo-in) {
		opacity: calc(var(--qaimo-load-opacity) / 100) !important;
	}

	html.qaimo-js [data-qaimo-effect="stagger"][data-qaimo-trigger="load"]:not(.qaimo-in) > :not([data-qaimo-effect]) {
		opacity: calc(var(--qaimo-load-opacity) / 100) !important;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
	html.qaimo-js [data-qaimo-effect="reveal"][data-qaimo-trigger="load"]:not(.qaimo-in):not([data-qaimo-mobile="off"]) {
		opacity: calc(var(--qaimo-load-opacity) / 100) !important;
	}

	html.qaimo-js [data-qaimo-effect="stagger"][data-qaimo-trigger="load"]:not(.qaimo-in):not([data-qaimo-mobile="off"]) > :not([data-qaimo-effect]) {
		opacity: calc(var(--qaimo-load-opacity) / 100) !important;
	}
}

html.qaimo-builder [data-qaimo-effect="reveal"][data-qaimo-preview]:not(.qaimo-in) {
	opacity: 0 !important;
	transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
}

[data-qaimo-effect="reveal"].qaimo-animating {
	transition:
		opacity var(--qaimo-dur, var(--qaimo-duration)) var(--qaimo-e, var(--qaimo-ease)) var(--qaimo-delay, 0ms),
		transform var(--qaimo-dur, var(--qaimo-duration)) var(--qaimo-e, var(--qaimo-ease)) var(--qaimo-delay, 0ms) !important;
	will-change: opacity, transform;
}

/* Text lines -------------------------------------------------------------- *
 * motion.js wraps each word: .qaimo-w (inline, the mask) > .qaimo-wi
 * (inline-block, moves). An inline-block without overflow keeps the text
 * baseline, so splitting causes no jump; the mask is a clip-path on the
 * inline wrapper, which does not affect layout either.
 */

.qaimo-w {
	clip-path: inset(-0.4em -0.3em 0 -0.3em);
}

.qaimo-wi {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	/* Until the words are wrapped, the text waits invisible (no flash). */
	html.qaimo-js [data-qaimo-effect="lines"]:not(.qaimo-split):not(.qaimo-in) {
		opacity: 0 !important;
	}

	html.qaimo-js [data-qaimo-effect="lines"]:not(.qaimo-in) .qaimo-wi {
		transform: translate3d(0, 115%, 0);
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
	html.qaimo-js [data-qaimo-effect="lines"]:not(.qaimo-split):not(.qaimo-in):not([data-qaimo-mobile="off"]) {
		opacity: 0 !important;
	}

	html.qaimo-js [data-qaimo-effect="lines"]:not(.qaimo-in):not([data-qaimo-mobile="off"]) .qaimo-wi {
		transform: translate3d(0, 115%, 0);
	}
}

html.qaimo-builder [data-qaimo-effect="lines"][data-qaimo-preview]:not(.qaimo-in) .qaimo-wi {
	transform: translate3d(0, 115%, 0);
}

[data-qaimo-effect="lines"].qaimo-animating .qaimo-wi {
	transition: transform var(--qaimo-dur, var(--qaimo-duration-lines)) var(--qaimo-e, var(--qaimo-ease)) calc(var(--qaimo-delay, 0ms) + var(--qaimo-line-delay, 0ms)) !important;
	will-change: transform;
}

/* Stagger ----------------------------------------------------------------- *
 * The container stays put; its direct children (those without motion of
 * their own) rise one after the other. --qaimo-x/-y inherit from the
 * container, --qaimo-i is each child's delay.
 */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	html.qaimo-js [data-qaimo-effect="stagger"]:not(.qaimo-in) > :not([data-qaimo-effect]) {
		opacity: 0 !important;
		transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
	html.qaimo-js [data-qaimo-effect="stagger"]:not(.qaimo-in):not([data-qaimo-mobile="off"]) > :not([data-qaimo-effect]) {
		opacity: 0 !important;
		transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
	}
}

html.qaimo-builder [data-qaimo-effect="stagger"][data-qaimo-preview]:not(.qaimo-in) > :not([data-qaimo-effect]) {
	opacity: 0 !important;
	transform: translate3d(var(--qaimo-x, 0px), var(--qaimo-y, var(--qaimo-distance)), 0) !important;
}

[data-qaimo-effect="stagger"].qaimo-animating > :not([data-qaimo-effect]) {
	transition:
		opacity var(--qaimo-dur, var(--qaimo-duration)) var(--qaimo-e, var(--qaimo-ease)) calc(var(--qaimo-delay, 0ms) + var(--qaimo-i, 0ms)),
		transform var(--qaimo-dur, var(--qaimo-duration)) var(--qaimo-e, var(--qaimo-ease)) calc(var(--qaimo-delay, 0ms) + var(--qaimo-i, 0ms)) !important;
	will-change: opacity, transform;
}

/* Glass -------------------------------------------------------------------- *
 * The surface itself comes from Bricks (the Glass controls' CSS). These rules
 * only hold the start states of "condenses" and "once the page is scrolled",
 * and the hover lift. The start states sit behind html.qaimo-js like every
 * other start state, so without JavaScript the glass simply shows.
 */

@media (prefers-reduced-motion: no-preference) {
	html.qaimo-js [data-qaimo-glass-show="condense"]:not(.qaimo-glass-in) {
		background-color: transparent !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		box-shadow: none !important;
		transform: translate3d(0, 16px, 0) scale(0.98) !important;
	}

	html.qaimo-js [data-qaimo-glass-show="condense"]:not(.qaimo-glass-in) > * {
		opacity: 0 !important;
	}
}

[data-qaimo-glass-show="condense"].qaimo-glass-animating {
	transition:
		background-color 1.1s ease,
		-webkit-backdrop-filter 1.1s ease,
		backdrop-filter 1.1s ease,
		box-shadow 1.1s ease,
		transform 1.1s var(--qaimo-ease-soft) !important;
}

[data-qaimo-glass-show="condense"].qaimo-glass-animating > * {
	transition: opacity 0.7s ease 0.35s !important;
}

html.qaimo-js [data-qaimo-glass-show="scroll"]:not(.qaimo-glass-on) {
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

[data-qaimo-glass-show="scroll"] {
	transition:
		background-color 0.45s ease,
		-webkit-backdrop-filter 0.45s ease,
		backdrop-filter 0.45s ease,
		box-shadow 0.45s ease;
}

[data-qaimo-glass-lift]:not(.qaimo-animating) {
	transition:
		transform 0.45s var(--qaimo-ease-soft),
		box-shadow 0.45s ease;
}

[data-qaimo-glass-lift]:hover,
[data-qaimo-glass-lift]:focus-within {
	box-shadow: var(--qaimo-glass-shadow-lift) !important;
}

@media (prefers-reduced-motion: no-preference) {
	[data-qaimo-glass-lift]:hover,
	[data-qaimo-glass-lift]:focus-within {
		transform: translate3d(0, -6px, 0) scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-qaimo-glass-show] {
		transition: none !important;
	}
}