/* ============================================================
   Mama Khoudia — Animations fluides (design Lovable)
   ============================================================ */

/* Respect des préférences utilisateur (accessibilité) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.mk-item {
		opacity: 1 !important;
		transform: none !important;
	}
}

html {
	scroll-behavior: smooth;
}

/* ------------------------------------------------------------
   1. Apparition de la page au chargement
   ------------------------------------------------------------ */
@keyframes mkPageIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

body {
	animation: mkPageIn 0.35s ease-out both;
}

/* ------------------------------------------------------------
   2. Reveal au scroll — cascade élément par élément
   Classes ajoutées par js/animations.js (.mk-item + .mk-in)
   Le délai de chaque élément est calculé en JS (transition-delay inline).
   ------------------------------------------------------------ */
.mk-item {
	opacity: 0;
	translate: 0 24px;
	transition:
		opacity 0.7s ease-out,
		translate 0.7s ease-out;
	will-change: opacity, translate;
}

.mk-item.mk-in {
	opacity: 1;
	translate: 0 0;
}

/* ------------------------------------------------------------
   3. Transitions globales sur les éléments interactifs
   ------------------------------------------------------------ */
a,
button,
.button,
input,
select,
textarea,
[role="button"] {
	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.25s ease,
		opacity 0.25s ease;
}

/* Boutons : léger soulèvement + ombre au survol */
.mama-khoudia-page a.inline-flex,
button[type="submit"],
.button,
.single_add_to_cart_button,
.checkout-button,
#mk-place-order,
.mk-zone-btn,
.mk-type-btn {
	transition:
		transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.25s ease,
		background-color 0.25s ease,
		opacity 0.25s ease;
}

button:not(:disabled):hover,
.button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#mk-place-order:not(:disabled):hover {
	transform: translateY(-2px);
}

button:not(:disabled):active,
.button:active,
.single_add_to_cart_button:active,
#mk-place-order:not(:disabled):active {
	transform: translateY(0) scale(0.98);
}

/* Liens "Voir tout / Lire la suite" : flèche qui glisse (déjà géré par Tailwind hover:gap-3) */

/* ------------------------------------------------------------
   Cards : reveal au scroll + élévation/zoom au survol
   Classe unifiée .mk-card appliquée à toutes les cards du site
   (produits, revendeurs, engagements, recettes, étapes, événements).
   On utilise la propriété individuelle `scale` pour le survol afin
   de ne PAS entrer en conflit avec le `transform: translateY` du reveal.
   ------------------------------------------------------------ */
.mk-card {
	transition:
		opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1s cubic-bezier(0.22, 1, 0.36, 1),
		scale 0.3s ease,
		box-shadow 0.3s ease;
	will-change: opacity, transform, scale, box-shadow;
}

.mk-card:hover {
	scale: 1.025;
	box-shadow: 0 20px 45px -15px color-mix(in srgb, var(--foreground) 30%, transparent);
}

/* ------------------------------------------------------------
   4. Animations utilitaires (keyframes réutilisables)
   ------------------------------------------------------------ */
@keyframes mkFadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes mkFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mkFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
@keyframes mkPulseSoft {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}
@keyframes mkSpin {
	to { transform: rotate(360deg); }
}

.mk-animate-float {
	animation: mkFloat 4s ease-in-out infinite;
}

/* Badge / pastille du panier qui "pop" à la mise à jour */
@keyframes mkBadgePop {
	0%   { transform: scale(0.6); opacity: 0; }
	60%  { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}
.cart-count-badge span {
	animation: mkBadgePop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   5. Menu mobile (slide + fade)
   ------------------------------------------------------------ */
.mobile-menu,
#mobile-menu {
	transition:
		opacity 0.3s ease,
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   6. Spinner de chargement (formulaires / AJAX)
   ------------------------------------------------------------ */
.mk-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.75;
}
.mk-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mkSpin 0.6s linear infinite;
}