/* =========================================================================
 * The shared button response component — hover / focus-visible / active.
 *
 * One class, `.lmx-btn-fx`, for every button of the new site: the home CTAs
 * (.lmx-btn), the header and mobile menu buttons (.lmx-cta), the service page
 * buttons (.lmx-ms-btn) and the modal form submit (.lmx-form__submit). The
 * `.lmx-btn-fx--icon` modifier is for controls without text: carousel arrows,
 * modal close buttons, header icons and social icons. They keep their geometry
 * (circle, square) and get the same language: a teal glow, a light lift and a
 * response from the icon.
 *
 * The component is responsible for MOVEMENT and GLOW only. The resting colours
 * and the hover colours (fill / outline / dark) stay with the button variant in
 * its own file — that is the styling of the variant, not the effect. There are
 * no copies of transform/box-shadow in the blocks any more: they were removed
 * from block1-hero.css, block3-xdr.css, chrome.css, mxdr-service/page.css and
 * nav-arrows.css.
 *
 * What hover gives: a 2px lift, a stronger teal glow, a sheen running left to
 * right (::after) and a shift of the arrow or the label. The size of the button
 * does not change: only transform, box-shadow and an absolute pseudo-element —
 * layout shift is ruled out. Nothing is animated at rest.
 *
 * Markup: <button class="lmx-btn lmx-btn-primary lmx-btn-fx">
 *             <span class="lmx-fx-label">Text</span>
 *             <span class="lmx-fx-arrow">…</span>
 *           </button>
 * ====================================================================== */

:root {
	--lmx-fx-glow: 82, 199, 198;          /* #52C7C6 in rgb — for rgba() */
	--lmx-fx-ease: cubic-bezier(.2, .7, .2, 1);
	--lmx-fx-time: .28s;
}

.lmx-btn-fx {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	/* transform and box-shadow live here only; the variants keep their colours */
	transition:
		transform var(--lmx-fx-time) var(--lmx-fx-ease),
		box-shadow var(--lmx-fx-time) ease,
		background-color .22s ease,
		border-color .22s ease,
		color .22s ease;
}

/* The Phlox theme gives a <button> a 1em bottom margin. The text CTAs used to
   be links without one — without the reset the section measured taller and the
   scale fitting (--*-scale) squeezed everything inside it. Icon-only elements
   (arrows, header icons) were buttons before as well: their geometry is
   untouched. Only the bottom margin is reset: the top one is set by the
   variants themselves (for example .lmx-b3-cta keeps margin-top as the distance
   from the text). */
.lmx-btn-fx:not(.lmx-btn-fx--icon) {
	margin-bottom: 0;
}

/* The sheen: a narrow light band, skewed, running left to right. It stands
   outside the button until it is touched — nothing moves at rest. */
.lmx-btn-fx::after {
	content: '';
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: 0;
	width: 34%;
	z-index: 1;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-160%) skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

.lmx-btn-fx:hover::after,
.lmx-btn-fx:focus-visible::after {
	opacity: 1;
	animation: lmxBtnSheen .72s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes lmxBtnSheen {
	from { transform: translateX(-160%) skewX(-18deg); }
	to   { transform: translateX(420%) skewX(-18deg); }
}

.lmx-btn-fx:hover,
.lmx-btn-fx:focus-visible {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(var(--lmx-fx-glow), .28),
		0 12px 28px -6px rgba(var(--lmx-fx-glow), .48),
		0 0 22px rgba(var(--lmx-fx-glow), .22);
}

.lmx-btn-fx:active {
	transform: translateY(0) scale(.985);
	box-shadow:
		0 0 0 1px rgba(var(--lmx-fx-glow), .38),
		0 4px 12px -4px rgba(var(--lmx-fx-glow), .4);
	transition-duration: .08s;
}

/* Visible keyboard focus is a teal ring outside the button. The mouse does not
   get the ring (:focus-visible) but does get the same glow. */
.lmx-btn-fx:focus-visible {
	outline: 2px solid rgb(var(--lmx-fx-glow));
	outline-offset: 3px;
}

.lmx-btn-fx:focus:not(:focus-visible) {
	outline: 0;
}

/* The content responds: the arrow moves right, the label follows a little. */
.lmx-btn-fx .lmx-fx-arrow,
.lmx-btn-fx .lmx-fx-label {
	position: relative;
	z-index: 2;
	transition: transform var(--lmx-fx-time) var(--lmx-fx-ease);
}

.lmx-btn-fx:hover .lmx-fx-arrow,
.lmx-btn-fx:focus-visible .lmx-fx-arrow {
	transform: translateX(4px);
}

.lmx-btn-fx:hover .lmx-fx-label,
.lmx-btn-fx:focus-visible .lmx-fx-label {
	transform: translateX(1px);
}

/* A disabled button: no lift, no sheen, no glow. */
.lmx-btn-fx:disabled,
.lmx-btn-fx[aria-disabled="true"] {
	transform: none;
	box-shadow: none;
}

.lmx-btn-fx:disabled::after,
.lmx-btn-fx[aria-disabled="true"]::after {
	display: none;
}

/* --- icon-only: arrows, close buttons, header icons, social icons ---------
   The geometry is their own (a circle for .lmx-arrow, a square for
   .lmx-iconbtn / .lmx-social) and the sheen is not needed — a glow ring and a
   light scale-up of the icon take its place. */
.lmx-btn-fx--icon::after,
.lmx-btn-fx--icon:hover::after,
.lmx-btn-fx--icon:focus-visible::after {
	display: none;
	animation: none;
}

.lmx-btn-fx--icon:hover,
.lmx-btn-fx--icon:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px rgba(var(--lmx-fx-glow), .45),
		0 0 18px rgba(var(--lmx-fx-glow), .35);
}

.lmx-btn-fx--icon:active {
	transform: translateY(0) scale(.94);
	box-shadow: 0 0 0 1px rgba(var(--lmx-fx-glow), .5);
}

.lmx-btn-fx--icon svg {
	transition: transform var(--lmx-fx-time) var(--lmx-fx-ease);
}

.lmx-btn-fx--icon:hover svg,
.lmx-btn-fx--icon:focus-visible svg {
	transform: scale(1.1);
}

.lmx-btn-fx--icon:disabled:hover,
.lmx-btn-fx--icon:disabled:hover svg {
	transform: none;
	box-shadow: none;
}

/* --- touch devices ---------------------------------------------------------
   :hover “sticks” after a tap, so the lift and the sheen are not wanted there;
   a press gets a short response instead — a squeeze and a ring. */
@media (hover: none) {
	.lmx-btn-fx:hover {
		transform: none;
		box-shadow: none;
	}

	.lmx-btn-fx:hover::after {
		animation: none;
		opacity: 0;
	}

	.lmx-btn-fx:hover .lmx-fx-arrow,
	.lmx-btn-fx:hover .lmx-fx-label,
	.lmx-btn-fx--icon:hover svg {
		transform: none;
	}

	.lmx-btn-fx:active {
		transform: scale(.97);
		box-shadow:
			0 0 0 1px rgba(var(--lmx-fx-glow), .45),
			0 0 16px rgba(var(--lmx-fx-glow), .3);
	}
}

/* --- less motion -------------------------------------------------------------
   Movement is removed entirely: no lift, no sheen, no arrow shift. The glow and
   the focus ring stay — they are a state, not an animation. */
@media (prefers-reduced-motion: reduce) {
	.lmx-btn-fx,
	.lmx-btn-fx::after,
	.lmx-btn-fx .lmx-fx-arrow,
	.lmx-btn-fx .lmx-fx-label,
	.lmx-btn-fx--icon svg {
		transition: none;
		animation: none;
	}

	.lmx-btn-fx:hover,
	.lmx-btn-fx:focus-visible,
	.lmx-btn-fx:active,
	.lmx-btn-fx:hover .lmx-fx-arrow,
	.lmx-btn-fx:hover .lmx-fx-label,
	.lmx-btn-fx:focus-visible .lmx-fx-arrow,
	.lmx-btn-fx:focus-visible .lmx-fx-label,
	.lmx-btn-fx--icon:hover svg,
	.lmx-btn-fx--icon:focus-visible svg {
		transform: none;
	}

	.lmx-btn-fx:hover::after,
	.lmx-btn-fx:focus-visible::after {
		display: none;
		animation: none;
	}
}

/* =========================================================================
 * Indicator buttons: remove the parent theme's clipping.
 *
 * phlox-pro/css/base.css (line 553) gives EVERY <button> `overflow:hidden`.
 * For a button with text that is harmless, but for an indicator button it is a
 * trap: the round glow of the child dot and the pop-up hint are clipped by the
 * rectangular box of the button. Four corners of that box are left around the
 * glow — a SQUARE shows around the circle (most visible in the active state) —
 * and the hint is not visible at all.
 *
 * Only the buttons whose content has to extend past the box are listed. Buttons
 * with clipping of their own (.lmx-btn-fx — the sheen running left to right) are
 * left alone: they set overflow:hidden themselves and need it.
 * ====================================================================== */

.lmx-block-dot,          /* section indicator dots: glow plus hint */
.lmx-fd-ms-btn,          /* the “Carlo Minassian” milestones (Company, block 3) */
button.lmx-mh-nav-link,  /* selector chain: MDR, Active Defense, Our Story, Company */
.lmx-mb-ben-btn,         /* Key Benefits: the ring around the icon          */
.lmx-sol-tab {           /* Use Cases catalogue: the bar of the active category */
	overflow: visible;
}