/*
 * Motion: hover and transition rules for the pieces an editor touches
 * most, cards, buttons, gallery tiles, FAQ questions and inline links.
 * Everything reads the motion tokens in style.css, which the card
 * presets (inc/look.php) restate, so hover is part of the page's look
 * rather than a global sprinkle. Loaded on every page and in the canvas.
 * Reduced motion keeps the colour changes and drops the movement.
 */

/* Cards: every shell the card presets style, the steps cards included
(2026-09-29). */
.lp-quote__card,
.lp-multi-column__card,
.lp-multi-column__team-card,
.lp-multi-column__pain-card,
.lp-multi-column--grid .lp-multi-column__numbered-card,
.lp-multi-column.is-dark .lp-multi-column__icon-card {
	transition: transform var(--motion-fast, 0.2s) ease, box-shadow var(--motion-fast, 0.2s) ease, border-color var(--motion-fast, 0.2s) ease, background-color var(--motion-fast, 0.2s) ease;
}

.lp-quote__card:hover,
.lp-multi-column__card:hover,
.lp-multi-column__team-card:hover,
.lp-multi-column__pain-card:hover,
.lp-multi-column--grid .lp-multi-column__numbered-card:hover {
	transform: var(--card-hover-transform, translateY(-3px));
	box-shadow: var(--card-hover-shadow, rgba(0, 0, 0, 0.18) 0px 10px 28px);
	border-color: var(--card-hover-border-color, transparent);
	background-color: var(--card-hover-bg, var(--surface-card, #fff));
}

/* Cards on a dark band (2026-09-29): the hover shifts the panel's own
colour a few steps in HSL, lighter and a little more opaque, instead of
taking the light card colour, which turned the panel white under light
text. Noticeable, never a contrast flip. The plain values first for a
browser without relative colours. */
.lp-multi-column.is-dark .lp-multi-column__icon-card:hover,
.lp-multi-column.is-dark.lp-multi-column--grid .lp-multi-column__numbered-card:hover {
	transform: var(--card-hover-transform, translateY(-3px));
	box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 28px;
	background-color: rgba(255, 255, 255, 0.11);
	background-color: hsl(from var(--lp-card-bg-dark, hsl(0 0% 100% / 0.06)) h s l / calc(alpha + 0.05));
	/* Sides and bottom only: the flat preset's accent top bar keeps its colour. */
	border-inline-color: rgba(255, 255, 255, 0.26);
	border-bottom-color: rgba(255, 255, 255, 0.26);
	border-inline-color: hsl(from var(--lp-card-border-dark, hsl(0 0% 100% / 0.14)) h s l / calc(alpha + 0.12));
	border-bottom-color: hsl(from var(--lp-card-border-dark, hsl(0 0% 100% / 0.14)) h s l / calc(alpha + 0.12));
}

/* The single large quote and the carousel slides do not lift. */
.lp-quote--single .lp-quote__card:hover,
.lp-carousel__slide:hover {
	transform: none;
	box-shadow: none;
}

.lp-quote--single .lp-quote__card:hover {
	background-color: transparent;
}

/* Buttons: colour already swaps in style.css; add the lift and shadow. */
a.btn {
	transition: background-color var(--motion-fast, 0.2s) ease, color var(--motion-fast, 0.2s) ease, transform var(--motion-fast, 0.2s) ease, box-shadow var(--motion-fast, 0.2s) ease;
}

a.btn:hover {
	transform: var(--btn-hover-transform, translateY(-1px));
	box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 16px;
}

a.btn:active {
	transform: none;
}

/* Gallery tiles and card photos: a slow zoom inside a clipped frame. */
.lp-gallery__img-wrapper,
.lp-multi-column__card-img-wrapper,
.lp-multi-column__team-img-wrapper {
	overflow: hidden;
}

.lp-gallery__img-wrapper img,
.lp-multi-column__card-img,
.lp-multi-column__team-img {
	transition: transform var(--motion-slow, 0.45s) ease;
}

.lp-gallery__img-wrapper:hover img,
.lp-multi-column__card:hover .lp-multi-column__card-img,
.lp-multi-column__team-card:hover .lp-multi-column__team-img {
	transform: scale(var(--tile-hover-scale, 1.04));
}

/* FAQ questions and nav links: the accent on hover, no movement. */
.lp-faq--accordion .lp-faq__question:hover .lp-faq__question-text {
	color: var(--text-accent, #615ff8);
}

.lp-faq__question-text {
	transition: color var(--motion-fast, 0.2s) ease;
}

.lp-page-header__nav a,
.lp-page-footer a {
	transition: color var(--motion-fast, 0.2s) ease, opacity var(--motion-fast, 0.2s) ease;
}

.lp-page-header__nav a:hover {
	color: var(--text-accent, #615ff8);
}

/* Inline links in body copy. */
.lp-block p a:not(.btn) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: text-decoration-color var(--motion-fast, 0.2s) ease;
}

.lp-block p a:not(.btn):hover {
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lp-quote__card,
	.lp-multi-column__card,
	.lp-multi-column__team-card,
	.lp-multi-column__pain-card,
	.lp-multi-column--grid .lp-multi-column__numbered-card,
	.lp-multi-column.is-dark .lp-multi-column__icon-card,
	a.btn,
	.lp-gallery__img-wrapper img,
	.lp-multi-column__card-img,
	.lp-multi-column__team-img {
		transition: none;
	}

	.lp-quote__card:hover,
	.lp-multi-column__card:hover,
	.lp-multi-column__team-card:hover,
	.lp-multi-column__pain-card:hover,
	.lp-multi-column--grid .lp-multi-column__numbered-card:hover,
	.lp-multi-column.is-dark .lp-multi-column__icon-card:hover,
	.lp-multi-column.is-dark.lp-multi-column--grid .lp-multi-column__numbered-card:hover,
	a.btn:hover,
	.lp-gallery__img-wrapper:hover img,
	.lp-multi-column__card:hover .lp-multi-column__card-img,
	.lp-multi-column__team-card:hover .lp-multi-column__team-img {
		transform: none;
	}
}

/*
 * Parallax (2026-09-28): a block's background photo, and a two column
 * block's image, move slower than the page as it scrolls. On with the
 * Parallax switch beside the midground (launchpad_parallax()). The photo is
 * scaled up 16% so the 7% travel either way never shows an edge, and the
 * block clips it. CSS scroll driven animations where the browser has them;
 * elsewhere js/parallax.js sets --lp-parallax and the same transform
 * follows it. Reduced motion: nothing moves.
 */
.lp-parallax {
	overflow: hidden;
	overflow: clip;
	view-timeline: --lp-parallax block;
}

.lp-parallax__frame {
	overflow: hidden;
}

.lp-parallax__frame > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-two-column__frame {
	border-radius: 12px;
}

@media (prefers-reduced-motion: no-preference) {
	.lp-parallax :is(.lp-hero__cover, .lp-hero__slideshow, .lp-callout__cover, .lp-quote__cover, .lp-multi-column__cover, .lp-two-column__cover, .lp-gallery__cover, .lp-form__cover, .lp-faq__cover, .lp-before-after__cover, .lp-menu__cover),
	.lp-parallax .lp-parallax__frame > img {
		transform: translateY(calc(var(--lp-parallax, 0) * 7%)) scale(1.16);
		will-change: transform;
	}

	@supports (animation-timeline: view()) {
		.lp-parallax :is(.lp-hero__cover, .lp-hero__slideshow, .lp-callout__cover, .lp-quote__cover, .lp-multi-column__cover, .lp-two-column__cover, .lp-gallery__cover, .lp-form__cover, .lp-faq__cover, .lp-before-after__cover, .lp-menu__cover),
		.lp-parallax .lp-parallax__frame > img {
			animation: lp-parallax linear both;
			animation-timeline: --lp-parallax;
		}
	}
}

@keyframes lp-parallax {
	from {
		transform: translateY(-7%) scale(1.16);
	}

	to {
		transform: translateY(7%) scale(1.16);
	}
}