/* ==========================================================================
   Diwali hero decorations (loaded only on the homepage during the festival)
   ========================================================================== */

body.er-diwali .er-hero {
	background:
		radial-gradient(900px 300px at 50% 115%, rgba(255, 170, 60, .38), transparent 70%),
		radial-gradient(700px 380px at 102% -8%, rgba(242, 107, 29, .34), transparent 60%),
		radial-gradient(600px 400px at -8% 30%, rgba(255, 196, 87, .14), transparent 60%),
		linear-gradient(180deg, #0b1f4b 0%, #10204a 55%, #2a1a3e 100%);
}

/* Content stays above the decoration layer */
body.er-diwali .er-hero__grid { position: relative; z-index: 2; padding-top: 92px; padding-bottom: 118px; }
@media (max-width: 600px) {
	body.er-diwali .er-hero__grid { padding-top: 70px; padding-bottom: 92px; }
}

.er-dw { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.er-dw__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Marigold toran (garland) ---------- */
.er-dw__toran {
	position: absolute; left: 0; right: 0; top: 0;
	display: flex; justify-content: space-around;
	padding: 0 2%;
}
.er-dw__toran::before { /* top rope of flowers */
	content: "";
	position: absolute; left: 0; right: 0; top: -4px; height: 20px;
	background:
		radial-gradient(circle at 10px 10px, #ffd23f 0 4px, #ff9f1c 4.5px 7px, #d9620b 7.5px 8.5px, transparent 9px) 0 0 / 18px 20px repeat-x;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}
.er-dw__strand {
	position: relative;
	width: 14px;
	height: calc(var(--n) * 13px + 6px);
	margin-top: 12px;
	background: radial-gradient(circle, #ffb703 0 4px, #f47c00 4.5px 6px, rgba(0, 0, 0, 0) 6.5px) 0 0 / 14px 13px repeat-y;
	transform-origin: 50% -12px;
	animation: er-dw-sway 3.6s ease-in-out var(--s) infinite alternate;
	will-change: transform;
}
.er-dw__strand:nth-child(even) {
	background-image: radial-gradient(circle, #ffe14d 0 4px, #ffb000 4.5px 6px, rgba(0, 0, 0, 0) 6.5px);
}
.er-dw__strand::after { /* mango leaf */
	content: "";
	position: absolute; left: 50%; bottom: -14px;
	width: 10px; height: 16px;
	margin-left: -5px;
	background: linear-gradient(160deg, #4caf50, #1f6b2a);
	border-radius: 0 100% 0 100%;
	transform: rotate(45deg);
}
@keyframes er-dw-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media (max-width: 760px) {
	.er-dw__strand:nth-child(n+8) { display: none; }
}

/* ---------- Diya row ---------- */
.er-dw__diyas {
	position: absolute; left: 0; right: 0; bottom: 8px;
	display: flex; justify-content: space-evenly; align-items: flex-end;
	padding: 0 3%;
}
.er-diya { width: clamp(46px, 6vw, 80px); height: auto; overflow: visible; }
.er-diya:nth-child(odd) { transform: translateY(-6px); }
.er-diya__flame {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: er-dw-flicker 1.4s ease-in-out infinite;
	animation-delay: calc(var(--d) * -1);
}
.er-diya__glow {
	animation: er-dw-glow 2.2s ease-in-out infinite;
	animation-delay: calc(var(--d) * -1);
}
@keyframes er-dw-flicker {
	0%, 100% { transform: scale(1, 1) skewX(0deg); }
	20% { transform: scale(.94, 1.06) skewX(-3deg); }
	40% { transform: scale(1.04, .95) skewX(2deg); }
	60% { transform: scale(.97, 1.08) skewX(-1deg); }
	80% { transform: scale(1.02, .97) skewX(3deg); }
}
@keyframes er-dw-glow {
	0%, 100% { opacity: .35; }
	50% { opacity: .6; }
}
@media (max-width: 760px) {
	.er-diya:nth-child(n+6) { display: none; }
}

/* ---------- Greeting ---------- */
.er-dw__greet {
	display: flex; flex-direction: column; gap: 2px;
	margin: 0 0 14px;
}
.er-dw__greet .er-script {
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 400;
	line-height: 1.5;
	background: linear-gradient(90deg, #ffd27a, #ffb347 45%, #ff8a3d);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 12px rgba(255, 170, 60, .35));
}
.er-dw__greet small { font-size: 15px; color: #ffd9a8; }

/* Results board gets a warm edge for the occasion */
body.er-diwali .er-board { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 190, 90, .35), 0 0 40px -10px rgba(255, 160, 60, .45); }

@media (prefers-reduced-motion: reduce) {
	.er-dw__strand, .er-diya__flame, .er-diya__glow { animation: none; }
}