/**
 * L'Aire Bête — Fontaine centrale (Phase 3.4)
 *
 * Vue d'en haut, bassin organique style Pixar :
 *   - bassin en pierre + eau gradient
 *   - jet central qui pulse
 *   - bulles qui montent du fond
 *   - reflets de lumière qui dérivent
 *   - ondulations concentriques
 *   - 4 poissons qui se promènent
 *   - 4 plantes décoratives autour
 */

/* === Container ======================================================== */

.lb-fountain {
	position: relative;
	width: 100%;
	max-width: 700px;
	aspect-ratio: 3 / 2;
}

/* === Bassin (SVG) ===================================================== */

.lb-fountain-basin {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	filter: drop-shadow(0 8px 16px rgba(26, 122, 110, 0.18));
}

/* === Effets aquatiques (clippés à l'aire d'eau approximative) ========= */

.lb-fountain-fx {
	position: absolute;
	inset: 14% 16% 11% 16%;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	pointer-events: none;
}

/* === Reflets de lumière =============================================== */

.lb-fountain-light {
	position: absolute;
	width: 36px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	filter: blur(4px);
	animation: lb-light-drift ease-in-out infinite;
	will-change: transform;
}

.lb-fountain-light--1 {
	top: 22%; left: 25%;
	animation-duration: 6s;
}

.lb-fountain-light--2 {
	top: 38%; left: 60%;
	width: 50px;
	animation-duration: 7.5s;
	animation-delay: -2s;
}

.lb-fountain-light--3 {
	top: 60%; left: 38%;
	width: 28px;
	animation-duration: 5.2s;
	animation-delay: -3s;
}

@keyframes lb-light-drift {
	0%, 100% { transform: translate(0, 0); opacity: 0.4; }
	50%      { transform: translate(15px, -8px); opacity: 0.75; }
}

/* === Bulles =========================================================== */

.lb-fountain-bubble {
	position: absolute;
	bottom: 5%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(200, 230, 250, 0.35) 70%,
		transparent 100%);
	box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.7);
	animation: lb-bubble-rise linear infinite;
	will-change: transform, opacity;
}

@keyframes lb-bubble-rise {
	0%   { bottom: 5%;  opacity: 0;   transform: scale(0.4); }
	10%  {              opacity: 0.85; }
	90%  {              opacity: 0.55; }
	100% { bottom: 95%; opacity: 0;   transform: scale(1.3); }
}

/* === Ondulations concentriques ======================================== */

.lb-fountain-ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: lb-ripple-expand 4s linear infinite;
}

.lb-fountain-ripple--1 { animation-delay: 0s; }
.lb-fountain-ripple--2 { animation-delay: -1.3s; }
.lb-fountain-ripple--3 { animation-delay: -2.6s; }

@keyframes lb-ripple-expand {
	0%   {
		width: 30px; height: 30px;
		opacity: 0.6;
		border-width: 2px;
	}
	100% {
		width: 360px; height: 240px;
		opacity: 0;
		border-width: 1px;
	}
}

/* === Jet central ====================================================== */

.lb-fountain-jet {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.4) 40%,
		transparent 75%);
	z-index: 3;
	pointer-events: none;
	animation: lb-jet-pulse 2.5s ease-in-out infinite;
}

@keyframes lb-jet-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
	50%      { transform: translate(-50%, -50%) scale(1.45); opacity: 1; }
}

/* === Poissons ========================================================= */

/* Architecture en couches pour combiner les transforms sans conflit :
 *   .lb-fountain-fish-path  → translate (trajectoire de nage)
 *   .lb-fountain-fish-flip  → scaleX avec step-end (flip discret au demi-tour)
 *   .lb-fountain-fish-idle  → rotate ±3° (Saphir uniquement, mvt nageoires)
 *   .lb-fountain-fish       → image/SVG, filter drop-shadow + shimmer Saphir
 */

.lb-fountain-fish-path {
	position: absolute;
	will-change: transform;
}

.lb-fountain-fish-flip {
	display: block;
	will-change: transform;
}

.lb-fountain-fish-idle {
	display: block;
}

.lb-fountain-fish {
	display: block;
	width: 60px;
	height: auto;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.lb-fountain-fish--saphir    { width: 75px; }
.lb-fountain-fish--orange    { width: 50px; }
.lb-fountain-fish--yellow    { width: 55px; }
.lb-fountain-fish--turquoise { width: 50px; }

/* Saphir image PNG — pas de déformation. Le fond blanc du PNG est neutralisé
   par un filtre SVG `#lb-remove-white` (cf. front-page.php) : feColorMatrix
   qui rend le canal alpha = -2.5(R+G+B)+7.5, donc les pixels blancs (≈1,1,1)
   tombent à 0 (transparent) et les pixels colorés restent opaques. mix-blend
   ne marche pas ici car .lb-fountain-fx forme son propre stacking context. */
.lb-fountain-fish--img {
	object-fit: contain;
	filter: url(#lb-remove-white) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

/* === Trajectoires (sur le wrapper .lb-fountain-fish-path) === */

.lb-fountain-fish-path--saphir {
	top: 30%; left: 12%;
	animation: lb-fish-path-saphir 24s ease-in-out infinite;
}

.lb-fountain-fish-path--orange {
	top: 58%; left: 22%;
	animation: lb-fish-path-2 18s ease-in-out infinite;
	animation-delay: -2s;
}

.lb-fountain-fish-path--yellow {
	top: 22%; left: 60%;
	animation: lb-fish-path-3 12s ease-in-out infinite;
	animation-delay: -4s;
}

.lb-fountain-fish-path--turquoise {
	top: 62%; left: 55%;
	animation: lb-fish-path-4 16s ease-in-out infinite;
	animation-delay: -6s;
}

/* Saphir : trajet en S très ondulé, lent et majestueux (24s contre 12-18s pour les autres) */
@keyframes lb-fish-path-saphir {
	0%   { transform: translate(0, 0); }
	12%  { transform: translate(40px, 15px); }
	25%  { transform: translate(80px, -10px); }
	37%  { transform: translate(120px, 15px); }
	50%  { transform: translate(160px, -5px); }
	62%  { transform: translate(120px, -20px); }
	75%  { transform: translate(70px, 10px); }
	87%  { transform: translate(30px, -10px); }
	100% { transform: translate(0, 0); }
}

@keyframes lb-fish-path-2 {
	0%, 100% { transform: translate(0, 0); }
	20%      { transform: translate(60px, -25px); }
	50%      { transform: translate(140px, 10px); }
	80%      { transform: translate(50px, 35px); }
}

@keyframes lb-fish-path-3 {
	0%, 100% { transform: translate(0, 0); }
	30%      { transform: translate(-50px, 25px); }
	60%      { transform: translate(-110px, -10px); }
	85%      { transform: translate(-30px, 30px); }
}

@keyframes lb-fish-path-4 {
	0%, 100% { transform: translate(0, 0); }
	25%      { transform: translate(-40px, -30px); }
	50%      { transform: translate(-95px, -10px); }
	75%      { transform: translate(-50px, 25px); }
}

/* === Flip directionnel (sur .lb-fountain-fish-flip)
 * step-end : la valeur saute discrètement à chaque keyframe, pas d'écrasement scaleX(0). */

.lb-fountain-fish-flip--saphir {
	animation: lb-fish-flip-mid 24s step-end infinite;
}

.lb-fountain-fish-flip--orange {
	animation: lb-fish-flip-mid 18s step-end infinite;
	animation-delay: -2s;
}

.lb-fountain-fish-flip--yellow {
	animation: lb-fish-flip-late 12s step-end infinite;
	animation-delay: -4s;
}

.lb-fountain-fish-flip--turquoise {
	animation: lb-fish-flip-mid-rev 16s step-end infinite;
	animation-delay: -6s;
}

/* Saphir + Orange : trajet va d'abord à droite → flip à 50% au demi-tour */
@keyframes lb-fish-flip-mid {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(-1); }
	100% { transform: scaleX(1); }
}

/* Yellow : trajet va à gauche, x atteint son apex à 60% → unflip à 60% */
@keyframes lb-fish-flip-late {
	0%   { transform: scaleX(-1); }
	60%  { transform: scaleX(1); }
	100% { transform: scaleX(-1); }
}

/* Turquoise : trajet va à gauche, apex à 50% → unflip à 50% */
@keyframes lb-fish-flip-mid-rev {
	0%   { transform: scaleX(-1); }
	50%  { transform: scaleX(1); }
	100% { transform: scaleX(-1); }
}

/* === Saphir (betta) : oscillation des nageoires + shimmer eau =========
 * Rotation ±3° sur l'idle wrapper (suggère le voile des nageoires),
 * et un blur léger qui pulse sur l'image (simule la déformation par l'eau). */

.lb-fountain-fish-path--saphir .lb-fountain-fish-idle {
	animation: lb-saphir-idle 3.5s ease-in-out infinite;
}

@keyframes lb-saphir-idle {
	0%, 100% { transform: rotate(-3deg); }
	50%      { transform: rotate(3deg); }
}

.lb-fountain-fish-path--saphir .lb-fountain-fish--saphir {
	animation: lb-saphir-shimmer 4s ease-in-out infinite;
}

/* Le filtre `#lb-remove-white` doit rester en tête de la chaîne, sinon
   l'animation écrase la suppression de fond et le carré blanc réapparaît. */
@keyframes lb-saphir-shimmer {
	0%, 100% { filter: url(#lb-remove-white) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
	50%      { filter: url(#lb-remove-white) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) blur(0.5px); }
}

/* === Plantes décoratives autour du bassin ============================= */

.lb-fountain-plant {
	position: absolute;
	width: clamp(50px, 13%, 90px);
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
	z-index: 4;
}

.lb-fountain-plant--tl { top: -8%;    left: -6%;  transform: rotate(-18deg); }
.lb-fountain-plant--tr { top: -8%;    right: -6%; transform: rotate(18deg)  scaleX(-1); }
.lb-fountain-plant--bl { bottom: -6%; left: -4%;  transform: rotate(-12deg); }
.lb-fountain-plant--br { bottom: -6%; right: -4%; transform: rotate(12deg)  scaleX(-1); }

/* === Reduced motion =================================================== */

@media (prefers-reduced-motion: reduce) {
	.lb-fountain-bubble,
	.lb-fountain-ripple,
	.lb-fountain-jet,
	.lb-fountain-light,
	.lb-fountain-fish-path,
	.lb-fountain-fish-flip,
	.lb-fountain-fish-idle,
	.lb-fountain-fish--saphir {
		animation: none;
	}
}