/* ============================================================
   Macteck Divi Suite — ButtonFX CSS
   12 effets de boutons cinématiques
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700;800&display=swap');

/* ── Wrapper ──────────────────────────────────────────────── */
.mds-btn-fx-wrap { display: block; }
.mds-btn-align-center { text-align: center; }
.mds-btn-align-right  { text-align: right; }
.mds-btn-align-left   { text-align: left; }
.mds-btn-align-full .mds-btn-fx { width: 100%; justify-content: center; }

/* ── Base button ──────────────────────────────────────────── */
.mds-btn-fx {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	font-family: 'Rajdhani', 'DM Sans', sans-serif;
	font-weight: var(--mds-fx-fw, 700);
	letter-spacing: var(--mds-fx-ls, 0.08em);
	color: var(--mds-fx-text, #fff);
	border-radius: var(--mds-fx-radius, 6px);
	transition:
		transform var(--mds-fx-speed, 600ms) cubic-bezier(0.4,0,0.2,1),
		box-shadow var(--mds-fx-speed, 600ms) cubic-bezier(0.4,0,0.2,1);
	will-change: transform;
	isolation: isolate;
}

.mds-btn-upper { text-transform: uppercase; }

/* ── Sizes ────────────────────────────────────────────────── */
.mds-btn-size-xs   { padding: 7px 16px;  font-size: 11px; gap: 6px; }
.mds-btn-size-sm   { padding: 10px 22px; font-size: 13px; gap: 7px; }
.mds-btn-size-md   { padding: 14px 30px; font-size: 15px; gap: 9px; }
.mds-btn-size-lg   { padding: 18px 40px; font-size: 18px; gap: 10px; }
.mds-btn-size-xl   { padding: 22px 52px; font-size: 22px; gap: 12px; }
.mds-btn-size-hero { padding: 28px 68px; font-size: 28px; gap: 16px; letter-spacing: 0.12em; }

/* ── Styles ───────────────────────────────────────────────── */
.mds-btn-style-filled  { background: var(--mds-fx-c1); }
.mds-btn-style-outline { background: transparent; border: 2px solid var(--mds-fx-c1); color: var(--mds-fx-c1, #FF6B00); }
.mds-btn-style-ghost   { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px); }
.mds-btn-style-pill    { background: var(--mds-fx-c1); border-radius: 999px !important; }
.mds-btn-style-sharp   { background: var(--mds-fx-c1); border-radius: 0 !important; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); }
.mds-btn-style-3d      { background: var(--mds-fx-c1); box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.2); transform: translateY(-2px); }
.mds-btn-style-3d:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.2); }

/* ── Shadow ───────────────────────────────────────────────── */
.mds-btn-shadow { box-shadow: 0 4px 20px rgba(var(--mds-fx-shadow-rgb, 255,107,0), 0.3); }

/* ── Label & icons ────────────────────────────────────────── */
.mds-fx-label { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: inherit; }
.mds-fx-icon  { display: inline-block; line-height: 1; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.mds-fx-icon-r { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.mds-btn-fx:hover .mds-fx-icon-r { transform: translateX(5px); }
.mds-fx-text { display: inline-block; }
.mds-fx-subtitle { display: block; font-size: 0.65em; font-weight: 400; opacity: 0.7; letter-spacing: 0.04em; line-height: 1; margin-top: 2px; text-transform: none; }

/* ── Shared layers ────────────────────────────────────────── */
.mds-fx-canvas {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none; z-index: 1; border-radius: inherit;
}
.mds-fx-glow    { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s; }
.mds-fx-fill    { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; transform: translateY(101%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.mds-fx-shine   { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg,rgba(255,255,255,0.18) 0%,transparent 60%); opacity: 0; transition: opacity 0.3s; }
.mds-btn-fx:hover .mds-fx-shine { opacity: 1; }

.mds-fx-border-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }

/* ═══════════════════════════════════════════════════════════
   EFFECT 1: PLASMA
   Liquide organique qui déborde du bouton (canvas)
═══════════════════════════════════════════════════════════ */
.mds-fx-plasma { background: var(--mds-fx-c1); }
.mds-fx-plasma:hover { transform: scale(1.03); }
.mds-fx-plasma .mds-fx-glow {
	background: radial-gradient(ellipse at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.18) 0%, transparent 65%);
}
.mds-fx-plasma:hover .mds-fx-glow { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   EFFECT 2: NEON PULSE
   Halo néon qui respire en continu
═══════════════════════════════════════════════════════════ */
.mds-fx-neon_pulse {
	background: transparent;
	border: 2px solid var(--mds-fx-c1);
	color: var(--mds-fx-c1) !important;
	animation: mds-neon-breathe 2.5s ease-in-out infinite;
}

@keyframes mds-neon-breathe {
	0%,100% {
		box-shadow: 0 0 8px var(--mds-fx-c1), 0 0 20px var(--mds-fx-c1), inset 0 0 8px rgba(255,107,0,0.1);
		border-color: var(--mds-fx-c1);
	}
	50% {
		box-shadow: 0 0 20px var(--mds-fx-c1), 0 0 40px var(--mds-fx-c1), 0 0 80px var(--mds-fx-c1), inset 0 0 20px rgba(255,107,0,0.2);
		border-color: var(--mds-fx-c2, #FFB347);
	}
}

.mds-fx-neon_pulse::before {
	content: '';
	position: absolute; inset: -4px;
	border-radius: calc(var(--mds-fx-radius, 6px) + 4px);
	background: transparent;
	border: 1px solid rgba(255,107,0,0.3);
	animation: mds-neon-outer 2.5s ease-in-out infinite;
}

@keyframes mds-neon-outer {
	0%,100% { opacity: 0.4; transform: scale(1); }
	50%      { opacity: 0.8; transform: scale(1.04); }
}

.mds-fx-neon_pulse:hover {
	background: var(--mds-fx-c1) !important;
	color: #fff !important;
	animation: none;
	box-shadow: 0 0 30px var(--mds-fx-c1), 0 0 60px var(--mds-fx-c1);
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 3: MAGNETIC
   Le texte se déplace vers le curseur (JS requis)
═══════════════════════════════════════════════════════════ */
.mds-fx-magnetic { background: var(--mds-fx-c1); overflow: visible; }
.mds-fx-magnetic .mds-fx-label { transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); }
.mds-fx-magnetic .mds-fx-glow {
	background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.25) 0%, transparent 65%);
	opacity: 0;
	transition: opacity 0.2s;
}
.mds-fx-magnetic:hover .mds-fx-glow { opacity: 1; }
.mds-fx-magnetic:hover { transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════
   EFFECT 4: GLITCH BURST
   Explosion glitch au clic
═══════════════════════════════════════════════════════════ */
.mds-fx-glitch_burst { background: var(--mds-fx-c1); }

.mds-fx-glitch_burst::before,
.mds-fx-glitch_burst::after {
	content: attr(data-text);
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: inherit; font-size: inherit; font-weight: inherit;
	letter-spacing: inherit; text-transform: inherit;
	padding: inherit;
	pointer-events: none;
	opacity: 0;
	z-index: 6;
}

.mds-fx-glitch_burst::before { color: #0ff; }
.mds-fx-glitch_burst::after  { color: #f0f; }

.mds-fx-glitch_burst.mds-glitch-active::before {
	animation: mds-gb-a 0.4s forwards;
}
.mds-fx-glitch_burst.mds-glitch-active::after {
	animation: mds-gb-b 0.4s forwards;
}
.mds-fx-glitch_burst.mds-glitch-active .mds-fx-text {
	animation: mds-gb-text 0.4s forwards;
}

@keyframes mds-gb-a {
	0%   { clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%); transform:translate(-6px,0);  opacity:0.9; }
	40%  { clip-path:polygon(0 55%,100% 55%,100% 75%,0 75%); transform:translate(6px,0);   opacity:0.9; }
	70%  { clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%);   transform:translate(-4px,3px); opacity:0.7; }
	100% { clip-path:none; transform:none; opacity:0; }
}
@keyframes mds-gb-b {
	0%   { clip-path:polygon(0 45%,100% 45%,100% 65%,0 65%); transform:translate(7px,0);  opacity:0.8; }
	50%  { clip-path:polygon(0 10%,100% 10%,100% 28%,0 28%); transform:translate(-5px,0); opacity:0.8; }
	80%  { clip-path:polygon(0 70%,100% 70%,100% 90%,0 90%); transform:translate(4px,-2px); opacity:0.6; }
	100% { clip-path:none; transform:none; opacity:0; }
}
@keyframes mds-gb-text {
	0%,100% { transform:none; filter:none; }
	20%  { transform:skewX(-10deg) translateX(-3px); filter:brightness(1.5); }
	40%  { transform:skewX(5deg)  translateX(3px);  }
	60%  { transform:skewX(-3deg) translateX(-1px); }
	80%  { transform:none; filter:hue-rotate(180deg); }
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 5: LIQUID FILL
   Remplissage fluide de bas en haut au hover
═══════════════════════════════════════════════════════════ */
.mds-fx-liquid_fill {
	background: transparent;
	border: 2px solid var(--mds-fx-c1);
	color: var(--mds-fx-c1) !important;
}

.mds-fx-liquid_fill .mds-fx-fill {
	background: var(--mds-fx-c1);
	transform: translateY(100%);
	transition: transform calc(var(--mds-fx-speed, 600ms) * 0.6) cubic-bezier(0.4,0,0.2,1);
}

.mds-fx-liquid_fill:hover .mds-fx-fill { transform: translateY(0); }
.mds-fx-liquid_fill:hover { color: var(--mds-fx-text, #fff) !important; border-color: var(--mds-fx-c1); }

/* Liquid wave top */
.mds-fx-liquid_fill .mds-fx-fill::before {
	content: '';
	position: absolute;
	top: -12px; left: -10%;
	width: 120%; height: 24px;
	background: var(--mds-fx-c1);
	border-radius: 50% 50% 0 0;
	animation: mds-liquid-wave 1.2s linear infinite;
}

@keyframes mds-liquid-wave {
	0%   { transform: translateX(0) scaleY(1); }
	50%  { transform: translateX(-5%) scaleY(1.2); }
	100% { transform: translateX(0) scaleY(1); }
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 6: SPARK TRAIL (canvas)
   Étincelles canvas qui suivent le curseur
═══════════════════════════════════════════════════════════ */
.mds-fx-spark_trail { background: var(--mds-fx-c1); }
.mds-fx-spark_trail:hover { transform: scale(1.02); }
.mds-fx-spark_trail .mds-fx-canvas { z-index: 6; }

/* ═══════════════════════════════════════════════════════════
   EFFECT 7: SHATTER
   Fragmentation puis reformation
═══════════════════════════════════════════════════════════ */
.mds-fx-shatter { background: var(--mds-fx-c1); }

.mds-fx-shatter .mds-fx-shard {
	position: absolute;
	background: var(--mds-fx-c1);
	transform-origin: center;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
}

.mds-fx-shatter.mds-shatter-active .mds-fx-text {
	animation: mds-shatter-text 0.6s forwards;
}

@keyframes mds-shatter-text {
	0%,100% { opacity: 1; transform: none; }
	25%  { opacity: 0; transform: scale(1.15); }
	50%  { opacity: 0; }
	75%  { opacity: 0.5; transform: scale(0.9); }
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 8: VORTEX (canvas)
   Spirale qui aspire vers le centre
═══════════════════════════════════════════════════════════ */
.mds-fx-vortex { background: var(--mds-fx-c1); }
.mds-fx-vortex .mds-fx-canvas { z-index: 2; }
.mds-fx-vortex:hover .mds-fx-label { animation: mds-vortex-text 0.5s ease-in-out; }

@keyframes mds-vortex-text {
	0%   { transform: scale(1) rotate(0deg); opacity: 1; }
	40%  { transform: scale(0.8) rotate(-5deg); opacity: 0.7; }
	60%  { transform: scale(1.1) rotate(3deg); opacity: 0.9; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 9: AURORA
   Gradient vivant style aurore boréale
═══════════════════════════════════════════════════════════ */
.mds-fx-aurora {
	background: linear-gradient(
		270deg,
		var(--mds-fx-c1),
		var(--mds-fx-c2, #FF3D00),
		#ff00aa,
		#7700ff,
		var(--mds-fx-c1)
	);
	background-size: 400% 400%;
	animation: mds-aurora-shift 4s ease infinite;
	border: none;
}

@keyframes mds-aurora-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.mds-fx-aurora:hover { animation-duration: 1s; transform: scale(1.03); }

.mds-fx-aurora::before {
	content: '';
	position: absolute; inset: -2px;
	border-radius: calc(var(--mds-fx-radius,6px) + 2px);
	background: inherit;
	background-size: 400% 400%;
	animation: mds-aurora-shift 4s ease infinite;
	filter: blur(12px);
	opacity: 0;
	z-index: -1;
	transition: opacity 0.3s;
}

.mds-fx-aurora:hover::before { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════
   EFFECT 10: BINARY RAIN (canvas)
   Pluie de 0 et 1 dans le bouton
═══════════════════════════════════════════════════════════ */
.mds-fx-binary_rain { background: #0c1117; border: 1px solid rgba(255,107,0,0.3); }
.mds-fx-binary_rain .mds-fx-canvas { z-index: 2; opacity: 0; transition: opacity 0.3s; }
.mds-fx-binary_rain:hover .mds-fx-canvas { opacity: 1; }
.mds-fx-binary_rain .mds-fx-label { z-index: 10; }
.mds-fx-binary_rain:hover { border-color: var(--mds-fx-c1); }

/* ═══════════════════════════════════════════════════════════
   EFFECT 11: MORPH BORDER
   Bordure SVG qui se déforme organiquement
═══════════════════════════════════════════════════════════ */
.mds-fx-morph_border {
	background: transparent;
	color: var(--mds-fx-c1) !important;
}

.mds-fx-morph_border .mds-fx-border-rect {
	fill: none;
	stroke: var(--mds-fx-c1);
	stroke-width: 2;
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.6s ease;
	filter: drop-shadow(0 0 6px var(--mds-fx-c1));
}

.mds-fx-morph_border:hover .mds-fx-border-rect {
	animation: mds-morph-border 2s linear infinite;
}

@keyframes mds-morph-border {
	0%   { rx: 6px; ry: 6px; stroke-dashoffset: 0; }
	25%  { rx: 20px; ry: 6px; }
	50%  { rx: 6px; ry: 20px; stroke-dashoffset: -200; }
	75%  { rx: 14px; ry: 14px; }
	100% { rx: 6px; ry: 6px; stroke-dashoffset: -400; }
}

.mds-fx-morph_border:hover {
	background: rgba(255,107,0,0.08);
}

/* ═══════════════════════════════════════════════════════════
   EFFECT 12: ECHO
   Cercles concentriques expansifs
═══════════════════════════════════════════════════════════ */
.mds-fx-echo { background: var(--mds-fx-c1); overflow: visible; }

.mds-fx-echo-ring {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid var(--mds-fx-c1);
	opacity: 0;
	transform: scale(1);
	pointer-events: none;
	z-index: -1;
}

.mds-fx-echo:hover .mds-fx-echo-1 { animation: mds-echo 1.2s ease-out 0s infinite; }
.mds-fx-echo:hover .mds-fx-echo-2 { animation: mds-echo 1.2s ease-out 0.3s infinite; }
.mds-fx-echo:hover .mds-fx-echo-3 { animation: mds-echo 1.2s ease-out 0.6s infinite; }

@keyframes mds-echo {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(1.6); opacity: 0; }
}

.mds-fx-echo:hover { box-shadow: 0 0 0 2px rgba(255,107,0,0.5); }

/* ── Hover universal lift ─────────────────────────────────── */
.mds-btn-fx:not(.mds-btn-style-3d):hover { transform: translateY(-2px); }
.mds-btn-fx:active { transform: translateY(1px) scale(0.98) !important; }

/* ── Focus accessibility ──────────────────────────────────── */
.mds-btn-fx:focus-visible {
	outline: 2px solid var(--mds-fx-c1);
	outline-offset: 3px;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mds-fx-neon_pulse,
	.mds-fx-aurora,
	.mds-fx-morph_border .mds-fx-border-rect {
		animation: none !important;
	}
	.mds-btn-fx { transition: background 0.2s, color 0.2s; }
	.mds-fx-echo-ring { display: none; }
}