/*
 * Quartzline public site: subtle micro-interactions (SITE_MOTION_V2).
 * Loaded only when config('app.site_motion_v2') is on; with the flag off nothing here exists.
 *
 * Rules of thumb
 * - Smooth and calm: ~240 ms for buttons, ~450 ms for cards, ~700 ms for image zoom (ease-out-quint).
 * - Only transform and opacity move; colours and shadows change, nothing reflows.
 * - Hover effects only on devices that really hover (no sticky hover on touch).
 * - prefers-reduced-motion: no transforms, no transitions, no fades (colours still change).
 * - Hook classes (qlm-*) are added by public/js/motion.js; without JS the page looks exactly as before.
 */

:root {
	--qlm-green: #00a94f;
	--qlm-green-dark: #148347;      /* the darker green the site already uses for .readmore:hover */
	--qlm-ink: #292929;
	--qlm-ink-dark: #111111;
	--qlm-ease: cubic-bezier(.22, 1, .36, 1);    /* ease-out-quint: quick start, long soft landing */
	--qlm-fast: 240ms;
	--qlm-card: 550ms;
	--qlm-zoom: 700ms;
	--qlm-shadow-lift: 0 6px 16px -4px rgba(16, 32, 22, .22);
	--qlm-shadow-press: 0 2px 5px -1px rgba(16, 32, 22, .20);
	--qlm-shadow-card: 0 10px 24px -8px rgba(16, 32, 22, .24);
	--qlm-shadow-slide: 0 3px 8px -2px rgba(16, 32, 22, .26); /* fits inside the 8px slider gutter */
}

/* ------------------------------------------------------------------ */
/* 1. Buttons: darker green on hover, keyboard focus ring              */
/* ------------------------------------------------------------------ */

/* Colour change is not motion: it also applies with reduced motion. */
@media (hover: hover) {
	.btn.btn-primary:not(:disabled):not(.disabled):hover,
	.crooked2:hover,
	.readmore:hover,
	.submit:not(:disabled):hover,
	#colourchoice:hover,
	.shopping-cart:hover {
		background-color: var(--qlm-green-dark) !important;
	}
	.calculator .btn-cancel:hover {
		background-color: var(--qlm-ink-dark) !important;
	}
}

/* The stylesheet removes every focus outline (*:focus { outline: none !important }).
   Give keyboard users a clear ring back; mouse clicks do not show it. */
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid var(--qlm-green) !important;
	outline-offset: 2px;
}
.calculator .col-md-8 a:focus-visible,
.socials a:focus-visible,
#copyright a:focus-visible {
	outline-color: #ffffff !important;
}
.btn:focus-visible {
	box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 2. Images and cards                                                  */
/* ------------------------------------------------------------------ */

/* Frame that motion.js puts around a tile photo: same box and alignment, clips the zoom. */
.qlm-frame {
	display: inline-block;
	position: relative;
	max-width: 100%;
	overflow: hidden;
	vertical-align: middle;           /* same as Bootstrap's img { vertical-align: middle } */
	isolation: isolate;               /* Safari: keep the rounded clip while the image scales (no mask: it would clip the shadow) */
}
.qlm-frame > img {
	display: block;
}

/* Home slider cards: the photo is a background; a pseudo-element repeats it so it can zoom. */
.MultiCarousel .pad15 {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.MultiCarousel .pad15::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: inherit;
	border-radius: inherit;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 3. Menu and text links                                               */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) {
	.navbar-nav > .nav-item > .nav-link {
		position: relative;
	}
	.navbar-nav > .nav-item:not(.active) > .nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;                  /* same as the active item's border */
		background-color: var(--qlm-green);
		transform: scaleX(0);
		transform-origin: left center;
		pointer-events: none;
	}
}

#footer ul li a,
#copyright a,
main p a:not(.btn):not(.readmore):not(.crooked2),
.container_blocks .col-md-4 h3 a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
}

@media (hover: hover) {
	#footer ul li a:hover,
	#copyright a:hover,
	main p a:not(.btn):not(.readmore):not(.crooked2):hover,
	.container_blocks .col-md-4 h3 a:hover {
		background-size: 100% 1px;
	}
}
#footer ul li a:focus-visible,
#copyright a:focus-visible,
main p a:not(.btn):not(.readmore):not(.crooked2):focus-visible,
.container_blocks .col-md-4 h3 a:focus-visible {
	background-size: 100% 1px;
}

/* ------------------------------------------------------------------ */
/* 4. Loading: image fade-in (html.qlm is set by a two-line script in   */
/*    the head, only when motion is allowed) and home section reveal    */
/* ------------------------------------------------------------------ */

html.qlm main img {
	/* also carries the tile zoom: this rule outranks .qlm-frame > img */
	transition: opacity 350ms ease-out, transform var(--qlm-zoom) var(--qlm-ease);
}
html.qlm main img[src]:not([src=""]):not(.qlm-in) {
	opacity: 0;
	/* fail-safe: never keep an image hidden longer than 3 s */
	animation: qlm-failsafe 0s linear 3s forwards;
}
/* The first hero photo is the largest paint: never delay it. */
html.qlm main .carousel img,
html.qlm main .carousel img[src]:not(.qlm-in) {
	opacity: 1;
	animation: none;
	transition: none;
}
@keyframes qlm-failsafe {
	to { opacity: 1; }
}

.qlm-reveal {
	opacity: 0;
	transform: translateY(16px);
}
.qlm-reveal.qlm-shown {
	opacity: 1;
	transform: none;
	transition: opacity 600ms var(--qlm-ease), transform 600ms var(--qlm-ease);
}

/* ------------------------------------------------------------------ */
/* Movement: only when the visitor did not ask for reduced motion       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

	/* Buttons ------------------------------------------------------- */
	.btn.btn-primary,
	.btn.btn-success,
	.crooked2,
	.readmore,
	.submit,
	#colourchoice,
	.shopping-cart,
	.calculator .btn-cancel {
		transition: background-color var(--qlm-fast) var(--qlm-ease), color var(--qlm-fast) var(--qlm-ease),
			border-color var(--qlm-fast) var(--qlm-ease), box-shadow var(--qlm-fast) var(--qlm-ease),
			transform var(--qlm-fast) var(--qlm-ease);
	}
	.shopping-cart {
		display: inline-block;          /* inline elements cannot be transformed */
	}

	@media (hover: hover) {
		.btn.btn-primary:not(:disabled):not(.disabled):hover,
		.btn.btn-success:not(:disabled):not(.disabled):hover,
		.crooked2:hover,
		.readmore:hover,
		.submit:not(:disabled):hover,
		#colourchoice:hover,
		.shopping-cart:hover,
		.calculator .btn-cancel:hover {
			transform: translateY(-2px);
			box-shadow: var(--qlm-shadow-lift);
		}
		.btn.btn-primary:not(:disabled):not(.disabled):active,
		.btn.btn-success:not(:disabled):not(.disabled):active,
		.crooked2:active,
		.readmore:active,
		.submit:not(:disabled):active,
		#colourchoice:active,
		.shopping-cart:active,
		.calculator .btn-cancel:active {
			transform: translateY(0);
			box-shadow: var(--qlm-shadow-press);
			transition-duration: 90ms;
		}
	}

	/* Image tiles (applications, systems, product categories, downloads, vacancies, news) */
	.qlm-frame {
		transition: transform var(--qlm-card) var(--qlm-ease), box-shadow var(--qlm-card) var(--qlm-ease);
	}
	.qlm-frame > img {
		transition: opacity 350ms ease-out, transform var(--qlm-zoom) var(--qlm-ease);
	}
	.qlm-card,
	.shop_product {
		transition: transform var(--qlm-card) var(--qlm-ease), box-shadow var(--qlm-card) var(--qlm-ease);
	}
	.qlm-card.qlm-soft {
		transition: transform var(--qlm-zoom) var(--qlm-ease), filter var(--qlm-zoom) var(--qlm-ease);
	}
	.container_blocks .col-md-4 .h2header,
	.container_blocks .col-md-4 .h2headerr {
		transition: transform var(--qlm-card) var(--qlm-ease);
	}
	.shop_product img,
	.MultiCarousel .pad15::before {
		transition: opacity 350ms ease-out, transform var(--qlm-zoom) var(--qlm-ease);
	}
	.MultiCarousel .pad15 {
		transition: transform var(--qlm-card) var(--qlm-ease), box-shadow var(--qlm-card) var(--qlm-ease);
	}

	@media (hover: hover) {
		/* tile = image + text: the photo lifts and zooms inside its frame */
		.qlm-tile:hover .qlm-frame {
			transform: translateY(-2px);
			box-shadow: var(--qlm-shadow-card);
		}
		.qlm-tile:hover .h2header,
		.qlm-tile:hover .h2headerr {
			transform: translateY(-2px);
		}
		.qlm-tile:hover .qlm-frame > img,
		.qlm-card:hover .qlm-frame > img,
		.shop_product:hover img,
		.MultiCarousel .pad15:hover::before {
			transform: scale(1.03);
		}

		/* card = a visible box: the whole card lifts */
		.qlm-card:hover,
		.shop_product:hover {
			transform: translateY(-2px);
			box-shadow: var(--qlm-shadow-card);
		}
		.qlm-card.qlm-soft:hover {
			box-shadow: none;
			filter: drop-shadow(0 8px 12px rgba(16, 32, 22, .16));
		}
		.MultiCarousel .pad15:hover {
			transform: translateY(-2px);
			box-shadow: var(--qlm-shadow-slide);
		}

		/* While the systems slider is dragged or coasting, cards stay still. */
		.MultiCarousel-inner.is-dragging .pad15,
		.MultiCarousel-inner.is-free .pad15 {
			transform: none;
			box-shadow: none;
			transition: none;
		}
		.MultiCarousel-inner.is-dragging .pad15::before,
		.MultiCarousel-inner.is-free .pad15::before {
			transform: none;
			transition: none;
		}

		/* Menu: a green line grows under the hovered item */
		.navbar-nav > .nav-item:not(.active) > .nav-link::after {
			transition: transform 320ms var(--qlm-ease);
		}
		.navbar-nav > .nav-item:not(.active):hover > .nav-link::after {
			transform: scaleX(1);
		}
	}
	.navbar-nav > .nav-item:not(.active) > .nav-link:focus-visible::after {
		transform: scaleX(1);
	}

	/* Text links: underline eases in */
	#footer ul li a,
	#copyright a,
	main p a:not(.btn):not(.readmore):not(.crooked2),
	.container_blocks .col-md-4 h3 a {
		transition: background-size 320ms var(--qlm-ease), color var(--qlm-fast) var(--qlm-ease);
	}
}

/* Reduced motion: show everything at once, move nothing. */
@media (prefers-reduced-motion: reduce) {
	html.qlm main img[src]:not(.qlm-in) {
		opacity: 1;
		animation: none;
	}
	.qlm-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	html.qlm main img[src]:not(.qlm-in),
	.qlm-reveal {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}