/* Real Image Lanterns */
.rft-real-lantern {
	position: absolute;
	top: 0;
	width: 120px; 
	height: auto;
	z-index: 999998;
	transform-origin: top center;
	animation: rft-smooth-swing 6s ease-in-out infinite alternate;
	filter: drop-shadow(0px 15px 15px rgba(0,0,0,0.5));
	cursor: grab; /* Shows it can be interacted with */
	transition: filter 0.3s;
}

.rft-lantern-left { left: 5%; }
.rft-lantern-right { right: 5%; animation-delay: -3s; }

/* Interactive Hover State: Swings faster and glows brighter when touched */
.rft-real-lantern:hover {
	animation: rft-wild-swing 1.5s ease-in-out infinite alternate;
	filter: drop-shadow(0px 15px 25px rgba(255, 215, 0, 0.8));
}

@keyframes rft-smooth-swing {
	0% { transform: rotate(4deg); }
	100% { transform: rotate(-4deg); }
}

@keyframes rft-wild-swing {
	0% { transform: rotate(12deg); }
	100% { transform: rotate(-12deg); }
}

/* The Pulsing Glow Behind the Lanterns */
.rft-lantern-glow {
	position: absolute;
	top: -50px;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0) 60%);
	z-index: 999997;
	pointer-events: none;
	animation: rft-pulse 4s ease-in-out infinite alternate;
}

.rft-glow-left { left: 1%; }
.rft-glow-right { right: 1%; animation-delay: -2s; }

@keyframes rft-pulse {
	0% { opacity: 0.5; transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1.1); }
}

/* Dynamic Particle Canvas */
#rft-starfield {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999996;
	pointer-events: none; /* Let clicks pass through */
}

@media (max-width: 768px) {
	.rft-real-lantern { width: 70px; }
	.rft-lantern-glow { width: 150px; height: 150px; }
}