/**
 * Scroll motion system (assets/js/reveal.js).
 *
 * One coherent language: a gentle fade with a small rise, staggered for card
 * groups, a softer rise for section headings, and a purple wipe across the
 * highlighted words. Sections reveal once as they enter the viewport.
 *
 * Content is NEVER hidden without JavaScript or with reduced motion: the
 * hidden state needs html.gm-motion-on, which reveal.js sets only when
 * IntersectionObserver exists and motion is allowed. `translate` (not
 * `transform`) carries the rise so card hover transforms stay independent.
 *
 * @package GagaMuller
 */

:root {
	--gm-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gm-reveal-distance: 22px;
	--gm-reveal-duration: 800ms;
	--gm-reveal-stagger: 90ms;
}

/* ---- Card hover: a small lift and a soft purple glow ------------------ */

.gm-stat,
.gm-loc,
.gm-sector,
.gm-box {
	transition:
		transform 300ms var(--gm-ease),
		box-shadow 300ms var(--gm-ease),
		background-color 300ms var(--gm-ease);
}

.gm-stat:hover,
.gm-loc:hover,
.gm-loc:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -18px rgb(114 21 244 / 0.45);
}

@media (hover: hover) {
	.gm-sector:hover,
	.gm-box--linked:hover {
		box-shadow: 0 18px 40px -20px rgb(114 21 244 / 0.6);
	}
}

/* ---- Reveal: hidden state (only while JS runs and motion is allowed) --- */

html.gm-motion-on :is(.gm-section, .gm-four-boxes):not(.is-in) :is(
	.gm-eyebrow,
	.gm-section-header__intro,
	.gm-why__body,
	.gm-why__cta,
	.gm-why__media,
	.gm-sectors__body,
	.gm-sectors__cta,
	.gm-contact__intro,
	.gm-contact__form,
	.gm-contact__media,
	.gm-loc,
	.gm-where__map,
	.gm-stat,
	.gm-pcard,
	.gm-sector,
	.gm-projects__cta,
	.gm-marquee,
	.gm-rv,
	.gm-rv-item
) {
	opacity: 0;
	translate: 0 var(--gm-reveal-distance);
}

html.gm-motion-on :is(.gm-section, .gm-four-boxes):not(.is-in) :is(
	.gm-section-header__title,
	.gm-why__title,
	.gm-contact__title,
	.gm-sectors__title
) {
	opacity: 0;
	translate: 0 calc(var(--gm-reveal-distance) * 0.8);
}

/* Revealing elements (the four boxes keep their own entrance). */
html.gm-motion-on :is(.gm-section, .gm-four-boxes) :is(
	.gm-eyebrow,
	.gm-section-header__intro,
	.gm-section-header__title,
	.gm-why__title,
	.gm-why__body,
	.gm-why__cta,
	.gm-why__media,
	.gm-sectors__title,
	.gm-sectors__body,
	.gm-sectors__cta,
	.gm-contact__title,
	.gm-contact__intro,
	.gm-contact__form,
	.gm-contact__media,
	.gm-loc,
	.gm-where__map,
	.gm-stat,
	.gm-pcard,
	.gm-sector,
	.gm-projects__cta,
	.gm-marquee,
	.gm-rv,
	.gm-rv-item
) {
	transition-property: opacity, translate, transform, box-shadow, background-color;
	transition-duration: var(--gm-reveal-duration), var(--gm-reveal-duration), 300ms, 300ms, 300ms;
	transition-timing-function: var(--gm-reveal-ease), var(--gm-reveal-ease), var(--gm-ease), var(--gm-ease), var(--gm-ease);
	transition-delay: calc(var(--gm-d, 0ms) + var(--gm-i, 0) * var(--gm-reveal-stagger)), calc(var(--gm-d, 0ms) + var(--gm-i, 0) * var(--gm-reveal-stagger)), 0ms, 0ms, 0ms;
}

/* Header parts arrive in sequence, content a beat later. */
html.gm-motion-on .gm-section-header__title,
html.gm-motion-on .gm-why__title,
html.gm-motion-on .gm-contact__title,
html.gm-motion-on .gm-sectors__title {
	--gm-d: 90ms;
}

html.gm-motion-on :is(.gm-section-header__intro, .gm-why__body, .gm-sectors__body, .gm-contact__intro) {
	--gm-d: 180ms;
}

html.gm-motion-on :is(.gm-loc, .gm-where__map, .gm-stat, .gm-pcard, .gm-sector, .gm-why__media, .gm-contact__form, .gm-contact__media, .gm-marquee, .gm-rv, .gm-rv-item) {
	--gm-d: 220ms;
}

/* After the entrance, hover and focus must answer immediately. */
html.gm-motion-on :is(.gm-section, .gm-four-boxes).is-settled * {
	transition-delay: 0ms;
}

/* ---- Highlighted words: a purple wipe ---------------------------------- */

:is(.gm-section, .gm-four-boxes) {
	--gm-hl-base: var(--gm-text);
}

.gm-surface--inverse {
	--gm-hl-base: var(--gm-color-white);
}

html.gm-motion-on :is(.gm-section, .gm-four-boxes) .gm-highlight {
	background-image: linear-gradient(90deg, var(--gm-highlight) 0 50%, var(--gm-hl-base) 50% 100%);
	background-position: 100% 0;
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-position 1000ms var(--gm-reveal-ease) 500ms;
}

html.gm-motion-on :is(.gm-section, .gm-four-boxes).is-in .gm-highlight {
	background-position: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.gm-stat:hover,
	.gm-loc:hover,
	.gm-loc:focus-within {
		transform: none;
	}
}