/* ===============================================
   SEASONAL EFFECTS CSS
   - Christmas (Dec 1 - Dec 29)
   - New Year (Dec 30 - Jan 4)
   - Kings Day (Jan 5 - Jan 6)
   - Valentine's Day (Feb 1 - Feb 14)
   - Fourth of July (Jul 1 - Jul 4)
=============================================== */

/* ===============================================
   BASE LIGHTROPE STYLES (shared)
=============================================== */
.lightrope {
	text-align: center;
	white-space: nowrap;
	position: fixed;
	z-index: 1000;
	margin: 0;
	padding: 0;
	pointer-events: none;
	width: 100%;
	top: 0;
	left: 0;
}

	.lightrope li {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
		display: inline-block;
	}

		.lightrope li:first-child {
			margin-left: -40px;
		}

/* ===============================================
   CHRISTMAS LIGHTS
=============================================== */
body.christmas-theme .lightrope {
	margin-top: -15px;
}

	body.christmas-theme .lightrope li {
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		width: 12px;
		height: 28px;
		border-radius: 50%;
		margin: 20px;
		background: #00f7a5;
		box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
		-webkit-animation-name: flash-1;
		animation-name: flash-1;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
	}

		body.christmas-theme .lightrope li:nth-child(2n+1) {
			background: aqua;
			box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
			-webkit-animation-name: flash-2;
			animation-name: flash-2;
			-webkit-animation-duration: 0.4s;
			animation-duration: 0.4s;
		}

		body.christmas-theme .lightrope li:nth-child(4n+2) {
			background: #f70094;
			box-shadow: 0px 4.6666666667px 24px 3px #f70094;
			-webkit-animation-name: flash-3;
			animation-name: flash-3;
			-webkit-animation-duration: 1.1s;
			animation-duration: 1.1s;
		}

		body.christmas-theme .lightrope li:nth-child(odd) {
			-webkit-animation-duration: 1.8s;
			animation-duration: 1.8s;
		}

		body.christmas-theme .lightrope li:nth-child(3n+1) {
			-webkit-animation-duration: 1.4s;
			animation-duration: 1.4s;
		}

		body.christmas-theme .lightrope li:before {
			content: "";
			position: absolute;
			background: #222;
			width: 10px;
			height: 9.3333333333px;
			border-radius: 3px;
			top: -4.6666666667px;
			left: 1px;
		}

		body.christmas-theme .lightrope li:after {
			content: "";
			top: -14px;
			left: 9px;
			position: absolute;
			width: 52px;
			height: 18.6666666667px;
			border-bottom: solid #222 2px;
			border-radius: 50%;
		}

		body.christmas-theme .lightrope li:last-child:after {
			content: none;
		}

/* Christmas flash animations */
@-webkit-keyframes flash-1 {
	0%, 100% {
		background: #00f7a5;
		box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
	}

	50% {
		background: rgba(0, 247, 165, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
	}
}

@keyframes flash-1 {
	0%, 100% {
		background: #00f7a5;
		box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
	}

	50% {
		background: rgba(0, 247, 165, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
	}
}

@-webkit-keyframes flash-2 {
	0%, 100% {
		background: aqua;
		box-shadow: 0px 4.6666666667px 24px 3px aqua;
	}

	50% {
		background: rgba(0, 255, 255, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
	}
}

@keyframes flash-2 {
	0%, 100% {
		background: aqua;
		box-shadow: 0px 4.6666666667px 24px 3px aqua;
	}

	50% {
		background: rgba(0, 255, 255, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
	}
}

@-webkit-keyframes flash-3 {
	0%, 100% {
		background: #f70094;
		box-shadow: 0px 4.6666666667px 24px 3px #f70094;
	}

	50% {
		background: rgba(247, 0, 148, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
	}
}

@keyframes flash-3 {
	0%, 100% {
		background: #f70094;
		box-shadow: 0px 4.6666666667px 24px 3px #f70094;
	}

	50% {
		background: rgba(247, 0, 148, 0.4);
		box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
	}
}

/* ===============================================
   VALENTINE'S DAY HEARTS
=============================================== */
body.valentine-theme .lightrope {
	margin-top: -30px;
}

	body.valentine-theme .lightrope li {
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		margin: 0 20px;
		-webkit-animation-name: sway;
		animation-name: sway;
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
		transform-origin: top center;
	}

		/* String/thread - only goes to the top of the heart */
		body.valentine-theme .lightrope li:before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 1px;
			background: rgba(255, 192, 203, 0.3);
			transform: translateX(-50%);
			pointer-events: none;
		}

		/* Heart shape */
		body.valentine-theme .lightrope li:after {
			content: "";
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 10px;
			height: 10px;
			aspect-ratio: 1;
			background: radial-gradient(circle at 60% 62%, var(--heart-color) 62%, transparent 63%) top left/50% 50%, radial-gradient(circle at 40% 62%, var(--heart-color) 62%, transparent 63%) top right/50% 50%, conic-gradient(from -45deg at 50% 87%, var(--heart-color) 90deg, transparent 0) bottom/100% 50%;
			background-repeat: no-repeat;
			filter: drop-shadow(0 0 6px rgba(255, 23, 68, 0.5));
			-webkit-animation-name: heartbeat;
			animation-name: heartbeat;
			-webkit-animation-duration: 1.5s;
			animation-duration: 1.5s;
			-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
		}

		/* Varying string lengths with alternating top margins */
		body.valentine-theme .lightrope li:nth-child(6n+1) {
			margin-top: -25px;
		}

			body.valentine-theme .lightrope li:nth-child(6n+1):before {
				height: 45px;
			}

			body.valentine-theme .lightrope li:nth-child(6n+1):after {
				top: 47px;
				width: 12px;
				height: 12px;
			}

		body.valentine-theme .lightrope li:nth-child(6n+2) {
			margin-top: -15px;
		}

			body.valentine-theme .lightrope li:nth-child(6n+2):before {
				height: 50px;
			}

			body.valentine-theme .lightrope li:nth-child(6n+2):after {
				top: 52px;
				width: 14px;
				height: 14px;
			}

		body.valentine-theme .lightrope li:nth-child(6n+3) {
			margin-top: -25px;
		}

			body.valentine-theme .lightrope li:nth-child(6n+3):before {
				height: 60px;
			}

			body.valentine-theme .lightrope li:nth-child(6n+3):after {
				top: 62px;
				width: 16px;
				height: 16px;
			}

		body.valentine-theme .lightrope li:nth-child(6n+4) {
			margin-top: -15px;
		}

			body.valentine-theme .lightrope li:nth-child(6n+4):before {
				height: 45px;
			}

			body.valentine-theme .lightrope li:nth-child(6n+4):after {
				top: 47px;
				width: 20px;
				height: 20px;
			}

		body.valentine-theme .lightrope li:nth-child(6n+5) {
			margin-top: -25px;
		}

			body.valentine-theme .lightrope li:nth-child(6n+5):before {
				height: 55px;
			}

			body.valentine-theme .lightrope li:nth-child(6n+5):after {
				top: 57px;
				width: 13px;
				height: 13px;
			}

		body.valentine-theme .lightrope li:nth-child(6n) {
			margin-top: -15px;
		}

			body.valentine-theme .lightrope li:nth-child(6n):before {
				height: 40px;
			}

			body.valentine-theme .lightrope li:nth-child(6n):after {
				top: 42px;
				width: 15px;
				height: 15px;
			}

		/* Heart color variations */
		body.valentine-theme .lightrope li:nth-child(3n+1):after {
			--heart-color: #ff1744;
			filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.6));
		}

		body.valentine-theme .lightrope li:nth-child(3n+2):after {
			--heart-color: #ff4081;
			filter: drop-shadow(0 0 8px rgba(255, 64, 129, 0.6));
		}

		body.valentine-theme .lightrope li:nth-child(3n):after {
			--heart-color: #f50057;
			filter: drop-shadow(0 0 8px rgba(245, 0, 87, 0.6));
		}

/* Valentine sway animation */
@-webkit-keyframes sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(2deg);
	}

	75% {
		transform: rotate(-2deg);
	}
}

@keyframes sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(2deg);
	}

	75% {
		transform: rotate(-2deg);
	}
}

/* Heartbeat animation */
@-webkit-keyframes heartbeat {
	0%, 100% {
		transform: translateX(-50%) scale(1);
	}

	10%, 30% {
		transform: translateX(-50%) scale(1.15);
	}

	20%, 40% {
		transform: translateX(-50%) scale(1);
	}
}

@keyframes heartbeat {
	0%, 100% {
		transform: translateX(-50%) scale(1);
	}

	10%, 30% {
		transform: translateX(-50%) scale(1.15);
	}

	20%, 40% {
		transform: translateX(-50%) scale(1);
	}
}

/* Stagger the sway animation timing */
body.valentine-theme .lightrope li:nth-child(2n) {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

body.valentine-theme .lightrope li:nth-child(3n) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

/* Stagger the heartbeat */
body.valentine-theme .lightrope li:nth-child(2n):after {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

body.valentine-theme .lightrope li:nth-child(3n):after {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

/* ===============================================
   NEW YEAR'S SPARKLERS
=============================================== */
body.newyear-theme .lightrope {
	margin-top: -40px;
}

	body.newyear-theme .lightrope li {
		margin: 0 22px;
		animation: newyear-sway 3s ease-in-out infinite;
		transform-origin: top center;
	}

		/* Sparkler wire */
		body.newyear-theme .lightrope li::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 2px;
			height: 58px;
			border-radius: 32%;
			background: linear-gradient(to bottom, #a0a0a0, #aaa, #bfbfbf);
			transform: translateX(-50%);
		}

		/* Sparkler explosion core */
		body.newyear-theme .lightrope li::after {
			content: "";
			position: absolute;
			top: 56px;
			left: 50%;
			width: 22px;
			height: 22px;
			transform: translateX(-50%);
			pointer-events: none;
			background: radial-gradient(circle at center, transparent 0 30%, #fff 30% 32%, transparent 32% 100% ), conic-gradient( #fff 0deg 6deg, transparent 6deg 18deg, #ffd700 18deg 24deg, transparent 24deg 40deg, #ffae00 40deg 48deg, transparent 48deg 66deg, #fff 66deg 72deg, transparent 72deg 90deg, #ffd700 90deg 98deg, transparent 98deg 140deg, #fff 140deg 146deg, transparent 146deg 180deg, #ffae00 180deg 188deg, transparent 188deg 230deg, #fff 230deg 236deg, transparent 250deg 270deg, #ffd700 270deg 276deg, transparent 276deg 296deg, #fff 300deg 306deg, transparent 306deg 330deg, #ffd700 330deg 336deg, transparent 336deg 360deg );
			filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) drop-shadow(0 0 5px rgba(255,200,0,0.8));
			animation: sparkPulse 0.12s infinite;
		}

		/* Height variance */
		body.newyear-theme .lightrope li:nth-child(3n+1)::before {
			height: 50px;
		}

		body.newyear-theme .lightrope li:nth-child(3n+2)::before {
			height: 62px;
		}

		body.newyear-theme .lightrope li:nth-child(3n)::before {
			height: 54px;
		}

		body.newyear-theme .lightrope li:nth-child(3n+1)::after {
			top: 48px;
		}

		body.newyear-theme .lightrope li:nth-child(3n+2)::after {
			top: 60px;
		}

		body.newyear-theme .lightrope li:nth-child(3n)::after {
			top: 52px;
		}

		/* Phase staggering */
		body.newyear-theme .lightrope li:nth-child(2n)::after {
			animation-delay: 0.05s;
		}

		body.newyear-theme .lightrope li:nth-child(3n)::after {
			animation-delay: 0.09s;
		}

@keyframes sparkPulse {
	0% {
		opacity: 1;
		transform: translateX(-50%) scale(0.7);
	}

	40% {
		opacity: 0.9;
		transform: translateX(-50%) scale(1);
	}

	70% {
		opacity: 0.6;
		transform: translateX(-50%) scale(0.85);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) scale(0.7);
	}
}

@keyframes newyear-sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(1.5deg);
	}

	75% {
		transform: rotate(-1.5deg);
	}
}

/* ===============================================
   KINGS DAY (uses New Year sparklers style)
=============================================== */
body.kings-theme .lightrope {
	margin-top: -40px;
}

	body.kings-theme .lightrope li {
		margin: 0 22px;
		animation: newyear-sway 3s ease-in-out infinite;
		transform-origin: top center;
	}

		body.kings-theme .lightrope li::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 2px;
			height: 58px;
			border-radius: 32%;
			background: linear-gradient(to bottom, #DAA520, #FFD700, #FFC200);
			transform: translateX(-50%);
		}

		body.kings-theme .lightrope li::after {
			content: "";
			position: absolute;
			top: 56px;
			left: 50%;
			width: 22px;
			height: 22px;
			transform: translateX(-50%);
			pointer-events: none;
			background: radial-gradient(circle at center, transparent 0 30%, #FFD700 30% 32%, transparent 32% 100% ), conic-gradient( #FFD700 0deg 6deg, transparent 6deg 18deg, #DAA520 18deg 24deg, transparent 24deg 40deg, #FFC200 40deg 48deg, transparent 48deg 66deg, #FFD700 66deg 72deg, transparent 72deg 90deg, #DAA520 90deg 98deg, transparent 98deg 140deg, #FFD700 140deg 146deg, transparent 146deg 180deg, #FFC200 180deg 188deg, transparent 188deg 230deg, #FFD700 230deg 236deg, transparent 250deg 270deg, #DAA520 270deg 276deg, transparent 276deg 296deg, #FFD700 300deg 306deg, transparent 306deg 330deg, #DAA520 330deg 336deg, transparent 336deg 360deg );
			filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 5px rgba(218, 165, 32, 0.8));
			animation: sparkPulse 0.12s infinite;
		}

		body.kings-theme .lightrope li:nth-child(3n+1)::before {
			height: 50px;
		}

		body.kings-theme .lightrope li:nth-child(3n+2)::before {
			height: 62px;
		}

		body.kings-theme .lightrope li:nth-child(3n)::before {
			height: 54px;
		}

		body.kings-theme .lightrope li:nth-child(3n+1)::after {
			top: 48px;
		}

		body.kings-theme .lightrope li:nth-child(3n+2)::after {
			top: 60px;
		}

		body.kings-theme .lightrope li:nth-child(3n)::after {
			top: 52px;
		}

		body.kings-theme .lightrope li:nth-child(2n)::after {
			animation-delay: 0.05s;
		}

		body.kings-theme .lightrope li:nth-child(3n)::after {
			animation-delay: 0.09s;
		}

/* ===============================================
   FOURTH OF JULY SPARKLERS (Red, White, Blue)
=============================================== */
body.july4th-theme .lightrope {
	margin-top: -40px;
}

	body.july4th-theme .lightrope li {
		margin: 0 22px;
		animation: july4th-sway 3s ease-in-out infinite;
		transform-origin: top center;
	}

		/* Sparkler wire - silver/gray metallic */
		body.july4th-theme .lightrope li::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 2px;
			height: 58px;
			border-radius: 32%;
			background: linear-gradient(to bottom, #a0a0a0, #c0c0c0, #a0a0a0);
			transform: translateX(-50%);
		}

		/* Sparkler explosion core - RED sparkles */
		body.july4th-theme .lightrope li:nth-child(3n+1)::after {
			content: "";
			position: absolute;
			top: 56px;
			left: 50%;
			width: 22px;
			height: 22px;
			transform: translateX(-50%);
			pointer-events: none;
			background: radial-gradient(circle at center, transparent 0 30%, #fff 30% 32%, transparent 32% 100% ), 
				conic-gradient( 
					#ff0000 0deg 6deg, transparent 6deg 18deg, 
					#ff3333 18deg 24deg, transparent 24deg 40deg, 
					#ff0000 40deg 48deg, transparent 48deg 66deg, 
					#fff 66deg 72deg, transparent 72deg 90deg, 
					#ff0000 90deg 98deg, transparent 98deg 140deg, 
					#ff3333 140deg 146deg, transparent 146deg 180deg, 
					#ff0000 180deg 188deg, transparent 188deg 230deg, 
					#fff 230deg 236deg, transparent 250deg 270deg, 
					#ff0000 270deg 276deg, transparent 276deg 296deg, 
					#ff3333 300deg 306deg, transparent 306deg 330deg, 
					#ff0000 330deg 336deg, transparent 336deg 360deg 
				);
			filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
			animation: sparkPulseJuly4th 0.12s infinite;
		}

		/* WHITE sparkles */
		body.july4th-theme .lightrope li:nth-child(3n+2)::after {
			content: "";
			position: absolute;
			top: 56px;
			left: 50%;
			width: 22px;
			height: 22px;
			transform: translateX(-50%);
			pointer-events: none;
			background: radial-gradient(circle at center, transparent 0 30%, #fff 30% 32%, transparent 32% 100% ), 
				conic-gradient( 
					#ffffff 0deg 6deg, transparent 6deg 18deg, 
					#f0f0f0 18deg 24deg, transparent 24deg 40deg, 
					#ffffff 40deg 48deg, transparent 48deg 66deg, 
					#f8f8f8 66deg 72deg, transparent 72deg 90deg, 
					#ffffff 90deg 98deg, transparent 98deg 140deg, 
					#f0f0f0 140deg 146deg, transparent 146deg 180deg, 
					#ffffff 180deg 188deg, transparent 188deg 230deg, 
					#f8f8f8 230deg 236deg, transparent 250deg 270deg, 
					#ffffff 270deg 276deg, transparent 276deg 296deg, 
					#f0f0f0 300deg 306deg, transparent 306deg 330deg, 
					#ffffff 330deg 336deg, transparent 336deg 360deg 
				);
			filter: drop-shadow(0 0 4px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
			animation: sparkPulseJuly4th 0.12s infinite;
		}

		/* BLUE sparkles */
		body.july4th-theme .lightrope li:nth-child(3n)::after {
			content: "";
			position: absolute;
			top: 56px;
			left: 50%;
			width: 22px;
			height: 22px;
			transform: translateX(-50%);
			pointer-events: none;
			background: radial-gradient(circle at center, transparent 0 30%, #fff 30% 32%, transparent 32% 100% ), 
				conic-gradient( 
					#0033a0 0deg 6deg, transparent 6deg 18deg, 
					#0052cc 18deg 24deg, transparent 24deg 40deg, 
					#0033a0 40deg 48deg, transparent 48deg 66deg, 
					#fff 66deg 72deg, transparent 72deg 90deg, 
					#0033a0 90deg 98deg, transparent 98deg 140deg, 
					#0052cc 140deg 146deg, transparent 146deg 180deg, 
					#0033a0 180deg 188deg, transparent 188deg 230deg, 
					#fff 230deg 236deg, transparent 250deg 270deg, 
					#0033a0 270deg 276deg, transparent 276deg 296deg, 
					#0052cc 300deg 306deg, transparent 306deg 330deg, 
					#0033a0 330deg 336deg, transparent 336deg 360deg 
				);
			filter: drop-shadow(0 0 4px rgba(0, 51, 160, 0.9)) drop-shadow(0 0 8px rgba(0, 51, 160, 0.6));
			animation: sparkPulseJuly4th 0.12s infinite;
		}

		/* Height variance */
		body.july4th-theme .lightrope li:nth-child(3n+1)::before {
			height: 50px;
		}

		body.july4th-theme .lightrope li:nth-child(3n+2)::before {
			height: 62px;
		}

		body.july4th-theme .lightrope li:nth-child(3n)::before {
			height: 54px;
		}

		body.july4th-theme .lightrope li:nth-child(3n+1)::after {
			top: 48px;
		}

		body.july4th-theme .lightrope li:nth-child(3n+2)::after {
			top: 60px;
		}

		body.july4th-theme .lightrope li:nth-child(3n)::after {
			top: 52px;
		}

		/* Phase staggering */
		body.july4th-theme .lightrope li:nth-child(2n)::after {
			animation-delay: 0.05s;
		}

		body.july4th-theme .lightrope li:nth-child(3n)::after {
			animation-delay: 0.09s;
		}

@keyframes sparkPulseJuly4th {
	0% {
		opacity: 1;
		transform: translateX(-50%) scale(0.7);
	}

	40% {
		opacity: 0.9;
		transform: translateX(-50%) scale(1);
	}

	70% {
		opacity: 0.6;
		transform: translateX(-50%) scale(0.85);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) scale(0.7);
	}
}

@keyframes july4th-sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(1.5deg);
	}

	75% {
		transform: rotate(-1.5deg);
	}
}

/* ===============================================
   AUTUMN FALLING LEAVES
=============================================== */
body.autumn-theme .lightrope {
	margin-top: -30px;
}

	body.autumn-theme .lightrope li {
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		margin: 0 18px;
		-webkit-animation-name: leaf-sway;
		animation-name: leaf-sway;
		-webkit-animation-duration: 4s;
		animation-duration: 4s;
		transform-origin: top center;
	}

		/* Stem/thread for leaves */
		body.autumn-theme .lightrope li:before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 1px;
			background: rgba(139, 90, 43, 0.5);
			transform: translateX(-50%);
			pointer-events: none;
		}

		/* Leaf shape using SVG - pointed top, curved sides, rounded bottom */
		body.autumn-theme .lightrope li:after {
			content: "";
			position: absolute;
			left: 50%;
			transform: translateX(-50%) rotate(var(--leaf-rotation, 0deg));
			width: 18px;
			height: 24px;
			background-color: var(--leaf-color, #D2691E);
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 0 C20 30, 5 60, 20 90 Q35 115, 50 120 Q65 115, 80 90 C95 60, 80 30, 50 0 Z M50 10 L50 100' fill='black'/%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 0 C20 30, 5 60, 20 90 Q35 115, 50 120 Q65 115, 80 90 C95 60, 80 30, 50 0 Z M50 10 L50 100' fill='black'/%3E%3C/svg%3E");
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			-webkit-mask-position: center;
			mask-position: center;
			filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
		}

		/* Varying stem lengths and leaf positions */
		body.autumn-theme .lightrope li:nth-child(6n+1) {
			margin-top: -20px;
		}

			body.autumn-theme .lightrope li:nth-child(6n+1):before {
				height: 40px;
			}

			body.autumn-theme .lightrope li:nth-child(6n+1):after {
				top: 38px;
				width: 16px;
				height: 22px;
				--leaf-rotation: 15deg;
			}

		body.autumn-theme .lightrope li:nth-child(6n+2) {
			margin-top: -15px;
		}

			body.autumn-theme .lightrope li:nth-child(6n+2):before {
				height: 50px;
			}

			body.autumn-theme .lightrope li:nth-child(6n+2):after {
				top: 48px;
				width: 20px;
				height: 26px;
				--leaf-rotation: -12deg;
			}

		body.autumn-theme .lightrope li:nth-child(6n+3) {
			margin-top: -25px;
		}

			body.autumn-theme .lightrope li:nth-child(6n+3):before {
				height: 55px;
			}

			body.autumn-theme .lightrope li:nth-child(6n+3):after {
				top: 53px;
				width: 22px;
				height: 28px;
				--leaf-rotation: 20deg;
			}

		body.autumn-theme .lightrope li:nth-child(6n+4) {
			margin-top: -10px;
		}

			body.autumn-theme .lightrope li:nth-child(6n+4):before {
				height: 45px;
			}

			body.autumn-theme .lightrope li:nth-child(6n+4):after {
				top: 43px;
				width: 18px;
				height: 24px;
				--leaf-rotation: -18deg;
			}

		body.autumn-theme .lightrope li:nth-child(6n+5) {
			margin-top: -20px;
		}

			body.autumn-theme .lightrope li:nth-child(6n+5):before {
				height: 60px;
			}

			body.autumn-theme .lightrope li:nth-child(6n+5):after {
				top: 58px;
				width: 15px;
				height: 20px;
				--leaf-rotation: 8deg;
			}

		body.autumn-theme .lightrope li:nth-child(6n) {
			margin-top: -15px;
		}

			body.autumn-theme .lightrope li:nth-child(6n):before {
				height: 48px;
			}

			body.autumn-theme .lightrope li:nth-child(6n):after {
				top: 46px;
				width: 19px;
				height: 25px;
				--leaf-rotation: -10deg;
			}

		/* Autumn leaf color variations - oranges, reds, yellows, browns */
		body.autumn-theme .lightrope li:nth-child(7n+1):after {
			--leaf-color: #D2691E; /* Chocolate/Orange */
		}

		body.autumn-theme .lightrope li:nth-child(7n+2):after {
			--leaf-color: #CD5C5C; /* Indian Red */
		}

		body.autumn-theme .lightrope li:nth-child(7n+3):after {
			--leaf-color: #DAA520; /* Goldenrod */
		}

		body.autumn-theme .lightrope li:nth-child(7n+4):after {
			--leaf-color: #B22222; /* Firebrick */
		}

		body.autumn-theme .lightrope li:nth-child(7n+5):after {
			--leaf-color: #FF8C00; /* Dark Orange */
		}

		body.autumn-theme .lightrope li:nth-child(7n+6):after {
			--leaf-color: #8B4513; /* Saddle Brown */
		}

		body.autumn-theme .lightrope li:nth-child(7n):after {
			--leaf-color: #F4A460; /* Sandy Brown */
		}

/* Leaf sway animation */
@-webkit-keyframes leaf-sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	20% {
		transform: rotate(3deg);
	}

	40% {
		transform: rotate(-2deg);
	}

	60% {
		transform: rotate(4deg);
	}

	80% {
		transform: rotate(-3deg);
	}
}

@keyframes leaf-sway {
	0%, 100% {
		transform: rotate(0deg);
	}

	20% {
		transform: rotate(3deg);
	}

	40% {
		transform: rotate(-2deg);
	}

	60% {
		transform: rotate(4deg);
	}

	80% {
		transform: rotate(-3deg);
	}
}

/* Stagger the sway animation timing */
body.autumn-theme .lightrope li:nth-child(2n) {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

body.autumn-theme .lightrope li:nth-child(3n) {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

body.autumn-theme .lightrope li:nth-child(5n) {
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
}

/* Falling leaves canvas container */
#autumn-leaves-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 999;
}

/* ===============================================
   RESPONSIVE ADJUSTMENTS
=============================================== */
@media (max-width: 767.98px) {
	.lightrope li {
		margin: 0 10px !important;
	}

	body.christmas-theme .lightrope li {
		width: 8px;
		height: 20px;
		margin: 15px 10px !important;
	}

	body.valentine-theme .lightrope li:after {
		width: 8px !important;
		height: 8px !important;
	}

	body.newyear-theme .lightrope li::after,
	body.kings-theme .lightrope li::after,
	body.july4th-theme .lightrope li::after {
		width: 16px;
		height: 16px;
	}

	body.autumn-theme .lightrope li:after {
		width: 12px !important;
		height: 15px !important;
	}
}

/* ===============================================
   REDUCED MOTION SUPPORT
=============================================== */
@media (prefers-reduced-motion: reduce) {
	.lightrope li,
	.lightrope li:before,
	.lightrope li:after {
		animation: none !important;
	}
}