/* =========================================================
   Bebea Site Kit — animations (mode « fun »)
   Toutes les animations sont désactivées si le visiteur a
   activé « réduire les animations » dans son système.
   ========================================================= */

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

	/* ---------- Apparition en cascade au défilement ---------- */
	html.bebea-js .bebea-reveal {
		opacity: 0;
		transform: translateY(28px) scale(0.985);
		transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--i, 0) * 110ms);
		will-change: opacity, transform;
	}
	html.bebea-js .bebea-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
	html.bebea-js .bebea-reveal.is-visible.bebea-reveal-done { will-change: auto; }

	/* ---------- Trait arc-en-ciel sous les grands titres ---------- */
	html.bebea-js .bebea-underline {
		position: relative;
		padding-bottom: 0.35em;
	}
	html.bebea-js .bebea-underline::after {
		content: "";
		display: block;
		height: 6px;
		width: 0;
		margin-top: 0.25em;
		border-radius: 999px;
		background: linear-gradient(90deg, var(--bebea-violet) 0 20%, var(--bebea-orange) 20% 40%, var(--bebea-rose) 40% 60%, var(--bebea-turquoise) 60% 80%, var(--bebea-vert) 80% 100%);
		transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
	}
	html.bebea-js .bebea-underline.has-text-align-center::after { margin-left: auto; margin-right: auto; }
	html.bebea-js .bebea-underline.is-visible::after { width: 96px; }

	/* ---------- Bulles de couleur (hero) ---------- */
	.bebea-hero { isolation: isolate; }
	.bebea-hero > * { position: relative; z-index: 1; }
	.bebea-blob {
		position: absolute !important;
		z-index: 0 !important;
		border-radius: 50%;
		filter: blur(64px);
		opacity: 0.24;
		pointer-events: none;
		width: 34vw; height: 34vw;
		max-width: 440px; max-height: 440px;
		animation: bebea-drift 14s ease-in-out infinite alternate;
	}
	.bebea-blob.b1 { background: var(--bebea-turquoise); top: -12%; left: -8%; animation-duration: 15s; }
	.bebea-blob.b2 { background: var(--bebea-rose); top: -10%; right: -10%; animation-duration: 18s; animation-delay: -4s; }
	.bebea-blob.b3 { background: var(--bebea-vert); bottom: -14%; right: 6%; animation-duration: 16s; animation-delay: -8s; }
	.bebea-blob.b4 { background: var(--bebea-orange); bottom: -12%; left: 4%; animation-duration: 20s; animation-delay: -12s; }
	@keyframes bebea-drift {
		0%   { transform: translate(0, 0) scale(1); }
		33%  { transform: translate(6vw, 4vh) scale(1.12); }
		66%  { transform: translate(-4vw, 7vh) scale(0.94); }
		100% { transform: translate(5vw, -3vh) scale(1.06); }
	}

	/* ---------- Mascottes flottantes (hero) ---------- */
	.bebea-mascot {
		position: absolute !important;
		z-index: 2 !important;
		width: 120px; height: 120px;
		object-fit: contain;
		pointer-events: none;
		filter: drop-shadow(0 10px 18px rgba(43, 43, 58, 0.14));
		animation: bebea-float 5s ease-in-out infinite;
		transition: transform 0.6s ease-out;
	}
	.bebea-mascot.m1 { top: 9%;  left: 4%;  animation-duration: 5.2s; }
	.bebea-mascot.m2 { top: 14%; right: 5%; animation-duration: 6.1s; animation-delay: -2s; }
	.bebea-mascot.m3 { bottom: 12%; left: 8%; animation-duration: 5.6s; animation-delay: -3.5s; width: 96px; height: 96px; }
	.bebea-mascot.m4 { bottom: 16%; right: 9%; animation-duration: 6.8s; animation-delay: -1s; width: 104px; height: 104px; }
	.bebea-hero-cols .bebea-mascot.m3, .bebea-hero-cols .bebea-mascot.m4 { display: none; }
	@keyframes bebea-float {
		0%   { translate: 0 0; rotate: -4deg; }
		50%  { translate: 0 -18px; rotate: 5deg; }
		100% { translate: 0 0; rotate: -4deg; }
	}

	/* ---------- Bébés (et détourés) qui flottent ---------- */
	.bebea-hero:not(.bebea-hero-home) .bebea-hero-image img,
	.bebea-marque-image img,
	.wp-block-image .wp-image-14,
	.wp-block-image .wp-image-11 {
		animation: bebea-hover 4.2s ease-in-out infinite;
	}
	.bebea-marque-image img { animation-delay: -1.3s; }
	@keyframes bebea-hover {
		0%, 100% { transform: translateY(0); }
		50%      { transform: translateY(-14px); }
	}

	/* ---------- Logo qui rebondit ---------- */
	.wp-block-site-logo a.bebea-logo,
	.bebea-logo { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end; gap: 0; line-height: 0; text-decoration: none; white-space: nowrap; }
	.wp-block-site-logo a.bebea-logo img,
	.bebea-logo img {
		height: 46px !important; width: auto !important; max-width: none !important; display: inline-block !important;
		transform-origin: 50% 100%;
	}
	.bebea-logo.is-bouncing img,
	.bebea-logo:hover img { animation: bebea-bounce 0.9s cubic-bezier(0.28, 0.84, 0.42, 1) both; }
	.bebea-logo img:nth-child(1) { animation-delay: 0s; }
	.bebea-logo img:nth-child(2) { animation-delay: 0.08s; }
	.bebea-logo img:nth-child(3) { animation-delay: 0.16s; }
	.bebea-logo img:nth-child(4) { animation-delay: 0.24s; }
	.bebea-logo img:nth-child(5) { animation-delay: 0.32s; }
	@keyframes bebea-bounce {
		0%   { transform: translateY(0) scaleY(1); }
		25%  { transform: translateY(-16px) scaleY(1.08) scaleX(0.94); }
		50%  { transform: translateY(0) scaleY(0.9) scaleX(1.08); }
		70%  { transform: translateY(-6px) scaleY(1.03); }
		100% { transform: translateY(0) scaleY(1); }
	}

	/* ---------- Vagues du bandeau qui ondulent ---------- */
	.bebea-bandeau::before,
	.bebea-bandeau::after {
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'><path d='M0 0H600V13C525 26 475 0 400 13C325 26 275 0 200 13C125 26 75 0 0 13Z'/></svg>");
		mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'><path d='M0 0H600V13C525 26 475 0 400 13C325 26 275 0 200 13C125 26 75 0 0 13Z'/></svg>");
		-webkit-mask-size: 600px 100%;
		mask-size: 600px 100%;
		-webkit-mask-repeat: repeat-x;
		mask-repeat: repeat-x;
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		animation: bebea-wave 7s linear infinite;
	}
	.bebea-bandeau::after { animation-direction: reverse; animation-duration: 9s; }
	@keyframes bebea-wave {
		from { -webkit-mask-position: 0 0; mask-position: 0 0; }
		to   { -webkit-mask-position: 600px 0; mask-position: 600px 0; }
	}

	/* ---------- Mascottes qui se dandinent (cartes tailles) ---------- */
	.bebea-size-card .wp-block-image img { transform-origin: 50% 85%; transition: transform 0.3s ease; }
	.bebea-size-card .bebea-size-letter { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
	.bebea-size-card:hover .wp-block-image img,
	.bebea-size-card.is-wiggling .wp-block-image img { animation: bebea-wiggle 0.9s ease-in-out; }
	.bebea-size-card:hover .bebea-size-letter,
	.bebea-size-card.is-wiggling .bebea-size-letter { transform: scale(1.25) rotate(-4deg); }
	@keyframes bebea-wiggle {
		0%   { transform: rotate(0deg) translateY(0); }
		20%  { transform: rotate(-12deg) translateY(-8px); }
		40%  { transform: rotate(10deg) translateY(-12px); }
		60%  { transform: rotate(-8deg) translateY(-6px); }
		80%  { transform: rotate(6deg) translateY(-2px); }
		100% { transform: rotate(0deg) translateY(0); }
	}

	/* ---------- Zoo : petit balancement permanent ---------- */
	.bebea-zoo img { animation: bebea-sway 4s ease-in-out infinite; }
	.bebea-zoo img:nth-child(2n) { animation-delay: -1.3s; }
	.bebea-zoo img:nth-child(3n) { animation-delay: -2.6s; }
	@keyframes bebea-sway {
		0%, 100% { transform: rotate(-5deg) translateY(0); }
		50%      { transform: rotate(5deg) translateY(-6px); }
	}

	/* ---------- Mobile : mêmes animations, plus petites ---------- */
	@media (max-width: 781px) {
		.bebea-mascot { width: 54px; height: 54px; }
		.bebea-mascot.m1 { top: 0.5rem; left: 0.5rem; }
		.bebea-mascot.m2 { top: 0.5rem; right: 0.5rem; }
		.bebea-hero .bebea-hero-text { padding-top: 1.6rem; }
		.bebea-mascot.m3 { display: none; }
		.bebea-mascot.m4 { bottom: auto; top: 52%; right: 0.4rem; width: 56px; height: 56px; }
		.bebea-hero-home .bebea-mascot.m4 { display: none; }
		.bebea-blob { width: 60vw; height: 60vw; filter: blur(46px); opacity: 0.26; }
		html.bebea-js .bebea-reveal { transform: translateY(18px); transition-delay: calc(var(--i, 0) * 70ms); }
		html.bebea-js .bebea-underline.is-visible::after { width: 72px; height: 5px; }
		.wp-block-site-logo a.bebea-logo img, .bebea-logo img { height: 34px !important; }
		@keyframes bebea-hover {
			0%, 100% { transform: translateY(0); }
			50%      { transform: translateY(-8px); }
		}
	}
}

/* Sans JS ou avec « réduire les animations » : tout reste visible */
html:not(.bebea-js) .bebea-reveal { opacity: 1; transform: none; }
.wp-block-site-logo a.bebea-logo { display: inline-flex !important; flex-direction: row !important; align-items: flex-end; white-space: nowrap; }
.wp-block-site-logo a.bebea-logo img { height: 46px !important; width: auto !important; max-width: none !important; display: inline-block !important; }
@media (max-width: 781px) { .wp-block-site-logo a.bebea-logo img { height: 34px !important; } }