/*
 * Magik — button animations.
 * buttons.js tags every button with data-mk-anim="<name>" (site choice from the style sheet,
 * or a per-button class mk-btn-<name> added in Elementor › Advanced › CSS classes).
 * Rules: only transform and opacity move (M2), 150–320 ms (M3), four states (M4),
 * the label is never hidden (M5), nothing loops (M7), reduced motion respected (A5).
 */

[data-mk-anim] {
	--mk-btn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--mk-btn-dur: 260ms;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transform: translate3d(var(--mk-mx, 0px), var(--mk-my, 0px), 0);
	transition: transform var(--mk-btn-dur) var(--mk-btn-ease), background-color var(--mk-btn-dur) var(--mk-btn-ease), color var(--mk-btn-dur) var(--mk-btn-ease);
	-webkit-tap-highlight-color: transparent;
}

/* Press: a slight push (all animations). */
[data-mk-anim]:active {
	transform: translate3d(var(--mk-mx, 0px), var(--mk-my, 0px), 0) scale(0.97);
	transition-duration: 90ms;
}

/* Focus: always visible (A3). */
[data-mk-anim]:focus-visible {
	outline: 2px solid var(--mk-color-accent, currentColor);
	outline-offset: 3px;
}

[data-mk-anim] .mk-label {
	display: inline-block;
	transition: transform var(--mk-btn-dur) var(--mk-btn-ease);
}

/* 1. Remplissage — a deeper tint sweeps in from the left. */
[data-mk-anim="fill"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: currentColor;
	opacity: 0.14;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms var(--mk-btn-ease);
}
[data-mk-anim="fill"]:hover::before,
[data-mk-anim="fill"]:focus-visible::before {
	transform: scaleX(1);
}

/* 2. Défilement du texte — the label rolls up and comes back from below. */
[data-mk-anim="roll"] .mk-roll {
	display: inline-grid;
	overflow: hidden;
	vertical-align: top;
}
[data-mk-anim="roll"] .mk-roll > span {
	grid-area: 1 / 1;
	transition: transform 320ms var(--mk-btn-ease);
}
[data-mk-anim="roll"] .mk-roll > span + span {
	transform: translateY(105%);
}
[data-mk-anim="roll"]:hover .mk-roll > span:first-child,
[data-mk-anim="roll"]:focus-visible .mk-roll > span:first-child {
	transform: translateY(-105%);
}
[data-mk-anim="roll"]:hover .mk-roll > span + span,
[data-mk-anim="roll"]:focus-visible .mk-roll > span + span {
	transform: translateY(0);
}

/* 3. Flèche — an arrow slides in and nudges the label. */
[data-mk-anim="arrow"]::after {
	content: "\2192";
	position: absolute;
	right: 0.9em;
	top: 50%;
	opacity: 0;
	transform: translate(-0.6em, -50%);
	transition: transform var(--mk-btn-dur) var(--mk-btn-ease), opacity var(--mk-btn-dur) var(--mk-btn-ease);
	pointer-events: none;
}
[data-mk-anim="arrow"]:hover::after,
[data-mk-anim="arrow"]:focus-visible::after {
	opacity: 1;
	transform: translate(0, -50%);
}
[data-mk-anim="arrow"]:hover .mk-label,
[data-mk-anim="arrow"]:focus-visible .mk-label {
	transform: translateX(-0.55em);
}

/* 4. Brillance — one reflection crosses the button. */
[data-mk-anim="shine"]::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -45%;
	width: 35%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
	opacity: 0;
	transform: translateX(0) skewX(-20deg);
	pointer-events: none;
}
[data-mk-anim="shine"]:hover::after,
[data-mk-anim="shine"]:focus-visible::after {
	opacity: 1;
	transform: translateX(480%) skewX(-20deg);
	transition: transform 700ms var(--mk-btn-ease), opacity 120ms linear;
}

/* 5. Élévation — the button rises, its shadow lengthens. */
[data-mk-anim="lift"] {
	overflow: visible;
}
[data-mk-anim="lift"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity var(--mk-btn-dur) var(--mk-btn-ease);
	pointer-events: none;
}
[data-mk-anim="lift"]:hover,
[data-mk-anim="lift"]:focus-visible {
	transform: translate3d(0, -2px, 0);
}
[data-mk-anim="lift"]:hover::after,
[data-mk-anim="lift"]:focus-visible::after {
	opacity: 1;
}
[data-mk-anim="lift"]:active {
	transform: translate3d(0, 0, 0) scale(0.98);
}

/* 6. Magnétique — follows the pointer slightly (buttons.js sets --mk-mx / --mk-my). */
[data-mk-anim="magnetic"] {
	transition: transform 300ms var(--mk-btn-ease), background-color var(--mk-btn-dur), color var(--mk-btn-dur);
}
[data-mk-anim="magnetic"] .mk-label {
	transform: translate3d(calc(var(--mk-mx, 0px) * 0.4), calc(var(--mk-my, 0px) * 0.4), 0);
}

/* 7. Contour — a ring draws itself around the button (secondary buttons). */
[data-mk-anim="outline"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
	opacity: 0;
	transform: scale(1.12);
	transition: transform var(--mk-btn-dur) var(--mk-btn-ease), opacity var(--mk-btn-dur) var(--mk-btn-ease);
	pointer-events: none;
}
[data-mk-anim="outline"]:hover::before,
[data-mk-anim="outline"]:focus-visible::before {
	opacity: 1;
	transform: scale(1);
}

/* Loading state (used by forms and the checkout). */
[data-mk-anim].mk-loading {
	pointer-events: none;
}
[data-mk-anim].mk-loading .mk-label,
[data-mk-anim].mk-loading .elementor-button-content-wrapper {
	opacity: 0.35;
}
[data-mk-anim].mk-loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1em;
	height: 1.1em;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 1;
	background: none;
	box-shadow: none;
	transform: none;
	animation: mk-btn-spin 0.7s linear infinite;
}
@keyframes mk-btn-spin {
	to { transform: rotate(360deg); }
}

/* Reduced motion: only a change of tint remains. */
@media (prefers-reduced-motion: reduce) {
	[data-mk-anim],
	[data-mk-anim]::before,
	[data-mk-anim]::after,
	[data-mk-anim] .mk-label,
	[data-mk-anim] .mk-roll > span {
		transition: none !important;
		transform: none !important;
	}
	[data-mk-anim="roll"] .mk-roll > span + span,
	[data-mk-anim="arrow"]::after,
	[data-mk-anim="shine"]::after {
		display: none;
	}
	[data-mk-anim]:hover {
		filter: brightness(1.08);
	}
	[data-mk-anim].mk-loading::before {
		animation-duration: 1.6s;
	}
}