/**
 * L'Aire Bête — Effets atmosphériques
 *
 * Nuages, oiseaux, étoiles, étoiles filantes, pluie tropicale +
 * classes météo (`.lb-sky--rain`, `.lb-sky--lightning`).
 * Le rendu est CSS-only ; sky-engine.js orchestre les apparitions
 * aléatoires et synchronise les deux scènes (intérieur + extérieur).
 */

/* === NUAGES ============================================================== */

.lb-clouds {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 2s ease;
}

.lb-cloud {
	position: absolute;
	display: block;
	filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.35));
	animation: lb-cloud-drift linear infinite;
	will-change: transform;
}

.lb-cloud--1 {
	top: 8%;
	width: 200px;
	opacity: 0.85;
	animation-duration: 60s;
}

.lb-cloud--2 {
	top: 22%;
	width: 160px;
	opacity: 0.7;
	animation-duration: 90s;
	animation-delay: -25s;
}

.lb-cloud--3 {
	top: 38%;
	width: 240px;
	opacity: 0.9;
	animation-duration: 120s;
	animation-delay: -65s;
}

@keyframes lb-cloud-drift {
	from { transform: translateX(-260px); }
	to   { transform: translateX(calc(100vw + 260px)); }
}

/* Pas de nuages la nuit */
.lb-sky.sky-night .lb-clouds {
	opacity: 0;
}

/* === OISEAUX ============================================================= */

.lb-birds {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.lb-bird {
	position: absolute;
	left: -60px;
	width: 40px;
	height: 20px;
	animation: lb-bird-fly linear forwards;
	will-change: transform;
}

.lb-bird-shape {
	display: block;
	width: 100%;
	height: 100%;
	animation: lb-bird-bob 1.4s ease-in-out infinite;
}

@keyframes lb-bird-fly {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(100vw + 120px)); }
}

@keyframes lb-bird-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* Oiseaux visibles seulement le jour : morning, noon, afternoon, dusk */
.lb-sky.sky-night .lb-birds,
.lb-sky.sky-dawn .lb-birds,
.lb-sky.sky-evening .lb-birds {
	display: none;
}

/* === ÉTOILES (statiques + scintillement) ================================= */

.lb-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 2s ease;
}

.lb-sky.sky-night .lb-stars,
.lb-sky.sky-evening .lb-stars {
	opacity: 1;
}

.lb-star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
	animation: lb-star-twinkle ease-in-out infinite;
	will-change: opacity;
}

.lb-star--bright {
	width: 3px;
	height: 3px;
	background: #fffbe8;
	box-shadow:
		0 0 6px rgba(255, 255, 255, 0.9),
		0 0 14px rgba(255, 245, 200, 0.5);
	animation: lb-star-pulse 2.2s ease-in-out infinite;
}

@keyframes lb-star-twinkle {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}

@keyframes lb-star-pulse {
	0%, 100% {
		opacity: 0.5;
		transform: scale(1);
	}
	50% {
		opacity: 1;
		transform: scale(1.4);
	}
}

/* === ÉTOILES FILANTES ==================================================== */

.lb-shooting-star {
	position: absolute;
	width: 120px;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.85) 70%,
		#fff 100%);
	border-radius: 1px;
	filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
	pointer-events: none;
	transform-origin: center;
	animation: lb-shooting-star-fly ease-out forwards;
}

@keyframes lb-shooting-star-fly {
	0% {
		opacity: 0;
		transform: translate(-15vw, -10vh) rotate(20deg);
	}
	15%  { opacity: 1; }
	85%  { opacity: 1; }
	100% {
		opacity: 0;
		transform: translate(70vw, 45vh) rotate(20deg);
	}
}

/* === PLUIE TROPICALE ===================================================== */

.lb-rain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
	overflow: hidden;
}

/* Overlay sombre pendant la pluie */
.lb-rain::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(20, 35, 60, 0.18);
}

.lb-rain.is-active {
	opacity: 1;
}

.lb-raindrop {
	position: absolute;
	top: -30px;
	width: 1.5px;
	height: 16px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(220, 235, 250, 0.6) 100%);
	border-radius: 1px;
	animation: lb-rain-fall linear infinite;
	will-change: transform;
}

@keyframes lb-rain-fall {
	from { transform: translateY(0); }
	to   { transform: translateY(110vh); }
}

/* === MÉTÉO — pluie & éclairs (sky-engine) ================================
 *
 * Sky-engine.js ajoute deux classes sur TOUS les éléments `.lb-sky`
 * (extérieur + plafond intérieur) pour synchroniser visuellement la météo :
 *
 *   .lb-sky--rain      pendant un épisode de pluie (30-60 s)
 *   .lb-sky--lightning ~800 ms par flash, ponctuel pendant la pluie
 *
 * Les deux scènes (extérieur + plafond mall) reçoivent les mêmes classes
 * en même temps. Seul l'extérieur a un conteneur `.lb-rain` qui se
 * remplit de gouttes — à l'intérieur du mall on est à l'abri sous le toit. */

/* Assombrissement + désaturation pendant la pluie. `filter` agit sur
   tout le contenu de `.lb-sky` (étoiles, nuages, oiseaux), donc tout
   passe en grisaille pendant l'orage. */
.lb-sky--rain {
	filter: brightness(0.65) saturate(0.7);
	transition: filter 1.5s ease;
}

/* Éclair : flash blanc bref qui surcharge le filter de --rain. Le
   keyframe se termine sur le filter de --rain pour éviter un saut visuel
   entre la fin de l'animation et l'état "pluie sans flash". */
.lb-sky--lightning {
	animation: lb-sky-lightning 800ms ease-out;
}

@keyframes lb-sky-lightning {
	0%   { filter: brightness(0.65) saturate(0.7); }
	8%   { filter: brightness(2.8)  saturate(0.4); }
	16%  { filter: brightness(0.7)  saturate(0.7); }
	24%  { filter: brightness(2.0)  saturate(0.5); }   /* second flash plus court */
	32%  { filter: brightness(0.7)  saturate(0.7); }
	100% { filter: brightness(0.65) saturate(0.7); }
}

/* === Reduced motion ====================================================== */
@media (prefers-reduced-motion: reduce) {
	.lb-cloud,
	.lb-bird,
	.lb-bird-shape,
	.lb-star,
	.lb-shooting-star,
	.lb-raindrop,
	.lb-sky--lightning {
		animation: none !important;
	}
	.lb-shooting-star,
	.lb-rain {
		display: none;
	}
	.lb-sky--rain {
		filter: brightness(0.7);  /* statique : juste un peu plus sombre */
	}
}