#mslh-root {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 99990;
}

/* Éléments qui tombent */
.mslh-fall {
	position: absolute;
	top: 0;
	line-height: 1;
	will-change: transform;
	animation-name: mslh-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	user-select: none;
}

@keyframes mslh-fall {
	from {
		transform: translate3d(0, -12vh, 0) rotate(0deg);
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	to {
		transform: translate3d(var(--sway, 0px), 112vh, 0) rotate(var(--rot, 360deg));
		opacity: 1;
	}
}

/* Chauves-souris */
.mslh-bat {
	position: absolute;
	left: 0;
	line-height: 1;
	will-change: transform;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	user-select: none;
}

.mslh-bat-ltr {
	animation-name: mslh-bat-ltr;
}

.mslh-bat-rtl {
	animation-name: mslh-bat-rtl;
}

@keyframes mslh-bat-ltr {
	0%   { transform: translate3d(-12vw, 0, 0) scaleX(-1); }
	20%  { transform: translate3d(18vw, -4vh, 0) scaleX(-1) rotate(-8deg); }
	40%  { transform: translate3d(40vw, 5vh, 0) scaleX(-1) rotate(6deg); }
	60%  { transform: translate3d(62vw, -5vh, 0) scaleX(-1) rotate(-6deg); }
	80%  { transform: translate3d(84vw, 4vh, 0) scaleX(-1) rotate(8deg); }
	100% { transform: translate3d(112vw, -2vh, 0) scaleX(-1); }
}

@keyframes mslh-bat-rtl {
	0%   { transform: translate3d(112vw, 0, 0); }
	20%  { transform: translate3d(84vw, 5vh, 0) rotate(8deg); }
	40%  { transform: translate3d(62vw, -4vh, 0) rotate(-6deg); }
	60%  { transform: translate3d(40vw, 5vh, 0) rotate(6deg); }
	80%  { transform: translate3d(18vw, -5vh, 0) rotate(-8deg); }
	100% { transform: translate3d(-12vw, 0, 0); }
}

/* Araignée */
.mslh-spider {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.mslh-thread {
	width: 1px;
	height: 0;
	background: rgba(120, 120, 120, 0.75);
	animation: mslh-thread var(--dur, 12s) ease-in-out infinite;
}

.mslh-spider-body {
	font-size: 34px;
	transform: rotate(180deg);
}

@keyframes mslh-thread {
	0%   { height: 0; }
	35%  { height: 22vh; }
	65%  { height: 22vh; }
	100% { height: 0; }
}

/* Brouillard */
.mslh-fog {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 28vh;
	opacity: 0.55;
	background-repeat: repeat-x;
	background-size: 60% 100%;
	background-image:
		radial-gradient(ellipse at 20% 100%, rgba(235, 235, 245, 0.85) 0%, rgba(235, 235, 245, 0) 62%),
		radial-gradient(ellipse at 70% 100%, rgba(235, 235, 245, 0.7) 0%, rgba(235, 235, 245, 0) 58%);
	animation: mslh-fog var(--dur, 60s) linear infinite;
}

.mslh-fog-2 {
	opacity: 0.35;
	height: 20vh;
	background-size: 45% 100%;
	animation-direction: reverse;
}

@keyframes mslh-fog {
	from { background-position: 0 100%; }
	to   { background-position: 120vw 100%; }
}

/* Ambiance sombre */
.mslh-vignette {
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 160px 30px rgba(40, 0, 60, 0.55);
	animation: mslh-flicker 7s ease-in-out infinite;
}

@keyframes mslh-flicker {
	0%, 100% { opacity: 1; }
	45%      { opacity: 0.85; }
	50%      { opacity: 1; }
	55%      { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
	#mslh-root {
		display: none;
	}
}