.hwd-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 99998;
}

/* Éléments qui tombent */
.hwd-item {
	position: absolute;
	top: -60px;
	line-height: 1;
	user-select: none;
	will-change: transform;
	animation-name: hwd-fall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	filter: drop-shadow(0 0 6px rgba(255, 120, 0, .5));
}

@keyframes hwd-fall {
	0%   { transform: translate3d(0, -60px, 0) rotate(0deg); opacity: 0; }
	8%   { opacity: .9; }
	50%  { transform: translate3d(var(--hwd-sway, 30px), 50vh, 0) rotate(180deg); }
	92%  { opacity: .9; }
	100% { transform: translate3d(calc(var(--hwd-sway, 30px) * -1), 110vh, 0) rotate(360deg); opacity: 0; }
}

/* Toiles d'araignée */
.hwd-web {
	position: absolute;
	width: 180px;
	height: 180px;
	opacity: .55;
	color: #e8e8e8;
}
.hwd-web svg { width: 100%; height: 100%; display: block; }
.hwd-web.tl { top: 0; left: 0; }
.hwd-web.tr { top: 0; right: 0; transform: scaleX(-1); }

/* Brouillard */
.hwd-fog {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 22vh;
	background:
		radial-gradient(ellipse at 20% 100%, rgba(200,200,220,.28), transparent 60%),
		radial-gradient(ellipse at 70% 100%, rgba(200,200,220,.22), transparent 55%);
	animation: hwd-fog 14s ease-in-out infinite alternate;
}
@keyframes hwd-fog {
	from { transform: translateX(-3%); opacity: .7; }
	to   { transform: translateX(3%);  opacity: 1; }
}

/* Lueur orange */
.hwd-glow {
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 120px 10px rgba(255, 110, 0, .28);
	animation: hwd-flicker 4s ease-in-out infinite;
}
@keyframes hwd-flicker {
	0%, 100% { opacity: .85; }
	45% { opacity: 1; }
	50% { opacity: .7; }
	55% { opacity: 1; }
}

@media (max-width: 600px) {
	.hwd-web { width: 110px; height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.hwd-item, .hwd-fog, .hwd-glow { animation: none !important; }
	.hwd-item { display: none; }
}