/*
 * Diwali 2026 overlay. Scoped to #dj-diwali and #dj-diwali-greeting.
 * z-index 40 sits under the sticky header (999), back-to-top (999),
 * Bootstrap modals (~1050) and #whatsapp (9999).
 * Homepage fireworks are the original canvas in home.php, not this file.
 */

#dj-diwali {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 40;
	background: transparent;
}

#dj-diwali .dj-lights,
#dj-diwali-greeting,
#dj-diwali-greeting img {
	pointer-events: none;
}

#dj-diwali .dj-lights {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--dj-header-h, 74px);
	height: 36px;
	background-image: url("../images/diwali/fairy-bulb.svg");
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 52px 36px;
	filter: drop-shadow(0 3px 5px rgba(248, 206, 97, 0.45));
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	animation: dj-diwali-twinkle 2.6s ease-in-out infinite;
}

#dj-diwali.dj-inner .dj-lights {
	opacity: 0.72;
	height: 30px;
	background-size: 56px 30px;
	filter: drop-shadow(0 2px 3px rgba(248, 206, 97, 0.28));
}

/*
 * Fixed to the viewport, below the WhatsApp/Call stack (bottom: 35%).
 * Right inset stays clear of the screen edge.
 */
#dj-diwali-greeting {
	position: fixed;
	right: 10px;
	bottom: -4px;
	z-index: 40;
	width: 220px;
	height: auto;
	background: transparent;
	line-height: 0;
	animation: dj-diwali-in 0.8s ease both, dj-diwali-float 5s ease-in-out infinite;
}

#dj-diwali-greeting img {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
	animation: dj-diwali-glow 3.4s ease-in-out infinite;
}

@keyframes dj-diwali-twinkle {
	0%,
	100% { opacity: 0.72; }
	50% { opacity: 1; }
}

@keyframes dj-diwali-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dj-diwali-float {
	0%,
	100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

@keyframes dj-diwali-glow {
	0%,
	100% { filter: drop-shadow(0 4px 8px rgba(248, 206, 97, 0.28)); }
	50% { filter: drop-shadow(0 8px 16px rgba(248, 206, 97, 0.62)); }
}

@media screen and (max-width: 767px) {
	#dj-diwali .dj-lights,
	#dj-diwali.dj-inner .dj-lights {
		height: 26px;
		background-size: 42px 26px;
	}

	#dj-diwali-greeting {
		width: 136px;
		right: 8px;
		bottom: -8px;
	}
}

@media screen and (max-height: 680px) {
	#dj-diwali-greeting {
		width: 180px;
		bottom: -8px;
	}
}

@media screen and (max-width: 767px) and (max-height: 680px) {
	#dj-diwali-greeting {
		width: 118px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dj-diwali .dj-lights,
	#dj-diwali-greeting,
	#dj-diwali-greeting img {
		animation: none;
	}

	#dj-diwali .dj-lights {
		opacity: 0.9;
	}

	#dj-diwali-greeting {
		opacity: 1;
	}
}