/* Diwali 2026 — TEMPORARY festive layer (inc/psp-festive.php). Loads only 6–11 Nov 2026 IST. */

:root {
	--psp-dw-gold: #ffb020;
	--psp-dw-saffron: #ff6a2b;
	--psp-dw-rose: #ff3d8b;
	--psp-dw-jade: #2ee5c4;
	--psp-dw-sky: #4fc3ff;
	--psp-dw-night: #0b0a24;
	--psp-dw-plum: #2a0f3a;
	--psp-dw-ink: #fff7e6;
	--psp-dw-muted: rgba( 255, 240, 214, 0.78 );
	--psp-dw-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* ---------- Light string ---------- */
.psp-diwali-lights {
	position: relative;
	display: flex;
	height: 20px;
	overflow: hidden;
	pointer-events: none;
	background: linear-gradient( 180deg, rgba( 5, 14, 28, 0.85 ), rgba( 5, 14, 28, 0 ) );
}
.psp-diwali-lights i {
	position: relative;
	flex: 0 0 38px;
	height: 100%;
}
.psp-diwali-lights i::before { /* the wire */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -4px;
	height: 11px;
	border-bottom: 1.5px solid rgba( 255, 214, 140, 0.45 );
	border-radius: 0 0 50% 50%;
}
.psp-diwali-lights i::after { /* the bulb */
	--c: var( --psp-dw-gold );
	content: "";
	position: absolute;
	left: calc( 50% - 3px );
	top: 7px;
	width: 6px;
	height: 9px;
	border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
	background: var( --c );
	box-shadow: 0 0 6px 1px var( --c );
	box-shadow: 0 0 6px 1px var( --c ), 0 0 14px 2px color-mix( in srgb, var( --c ) 45%, transparent );
	animation: psp-dw-twinkle 2.4s ease-in-out infinite;
}
.psp-diwali-lights i:nth-child( 5n + 2 )::after { --c: var( --psp-dw-saffron ); animation-delay: -0.5s; }
.psp-diwali-lights i:nth-child( 5n + 3 )::after { --c: var( --psp-dw-rose ); animation-delay: -1.1s; }
.psp-diwali-lights i:nth-child( 5n + 4 )::after { --c: var( --psp-dw-jade ); animation-delay: -1.6s; }
.psp-diwali-lights i:nth-child( 5n + 5 )::after { --c: var( --psp-dw-sky ); animation-delay: -2s; }
.psp-diwali-lights i:nth-child( 3n )::after { animation-duration: 3.1s; }

.psp-diwali-lights--footer {
	background: none;
	margin-bottom: -6px;
}

@keyframes psp-dw-twinkle {
	0%, 100% { opacity: 1; filter: brightness( 1.1 ); }
	50% { opacity: 0.35; filter: brightness( 0.7 ); }
}

/* ---------- Homepage banner (slim; reworked 7 Nov after owner feedback) ---------- */
.psp-dw {
	flex: 0 0 100%; /* the homepage wrapper is a flex row */
	width: 100%;
	padding: 14px 0 0;
	transition: opacity 0.3s ease, transform 0.3s var( --psp-dw-ease );
}
.psp-dw.is-leaving { opacity: 0; transform: translateY( -6px ); }
.psp-dw[hidden] { display: none !important; }

.psp-dw__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 52px 12px 14px;
	border-radius: 14px;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient( 220px 120px at 40px 50%, rgba( 255, 160, 50, 0.22 ), transparent 70% ),
		linear-gradient( 100deg, #0d2140 0%, #0a1a33 55%, #1a1430 100% );
	border: 1px solid rgba( 255, 190, 90, 0.28 );
	box-shadow: 0 10px 28px -18px rgba( 255, 140, 30, 0.55 );
	animation: psp-dw-in 0.6s var( --psp-dw-ease ) both;
}
.psp-dw__bar::before { /* gold hairline along the top */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient( 90deg, transparent, #ffb020 20%, #ff6a2b 50%, #ffb020 80%, transparent );
	opacity: 0.85;
}
.psp-dw__bar::after { /* a few soft sparkles, no extra markup */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient( 1.5px 1.5px at 22% 30%, rgba( 255, 226, 160, 0.8 ), transparent ),
		radial-gradient( 1.5px 1.5px at 48% 78%, rgba( 255, 226, 160, 0.6 ), transparent ),
		radial-gradient( 1px 1px at 63% 22%, rgba( 255, 226, 160, 0.7 ), transparent ),
		radial-gradient( 1.5px 1.5px at 81% 70%, rgba( 255, 226, 160, 0.5 ), transparent );
	animation: psp-dw-twinkle 3.2s ease-in-out infinite;
}

.psp-dw__art { flex: 0 0 auto; width: 52px; height: 52px; }
.psp-dw__diya { display: block; width: 100%; height: 100%; overflow: visible; }
.psp-dw__flame { transform-origin: 32px 28px; transform-box: view-box; animation: psp-dw-flicker 1.6s ease-in-out infinite; }
.psp-dw__glow { transform-origin: 32px 24px; transform-box: view-box; animation: psp-dw-glow 2.2s ease-in-out infinite; }

.psp-dw__copy { flex: 1 1 auto; min-width: 0; }
.psp-dw__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	margin: 0;
	line-height: 1.2;
}
.psp-dw__hi {
	font: 700 19px/1.25 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', 'Mangal', sans-serif;
	color: #ffd27a;
}
.psp-dw__dot { color: rgba( 255, 210, 122, 0.5 ); font-weight: 700; }
.psp-dw__en {
	font: 800 20px/1.2 'Outfit', 'PT Sans', sans-serif;
	letter-spacing: -0.01em;
	color: transparent;
	background: linear-gradient( 92deg, #fff1c9, #ffc542 45%, #ff8a3d );
	-webkit-background-clip: text;
	background-clip: text;
}
.psp-dw__sub {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: rgba( 236, 242, 255, 0.72 );
}

.psp-dw__actions { flex: 0 0 auto; display: flex; gap: 8px; }
.psp-dw__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 10px;
	font: 700 14px/1 'Outfit', 'PT Sans', sans-serif;
	white-space: nowrap;
	text-decoration: none !important;
	transition: transform 0.18s var( --psp-dw-ease ), background 0.18s ease, border-color 0.18s ease;
}
.psp-dw__btn svg { width: 17px; height: 17px; }
.psp-dw__btn--primary {
	color: #2a1300 !important;
	background: linear-gradient( 135deg, #ffd25a, #ffb020 55%, #ff8a2b );
}
.psp-dw__btn--wa {
	color: #eaf5ee !important;
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
}
.psp-dw__btn--wa:hover { background: rgba( 37, 211, 102, 0.16 ); border-color: rgba( 37, 211, 102, 0.55 ); }
.psp-dw__btn:hover { transform: translateY( -1px ); }
.psp-dw__btn:active { transform: scale( 0.98 ); }

.psp-dw__close {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba( 236, 242, 255, 0.6 );
	font-size: 20px;
	line-height: 30px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
.psp-dw__close:hover { background: rgba( 255, 255, 255, 0.08 ); color: #fff; }
.psp-dw__close:focus-visible,
.psp-dw__btn:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }

@keyframes psp-dw-in { from { opacity: 0; transform: translateY( 8px ); } to { opacity: 1; transform: none; } }
@keyframes psp-dw-flicker {
	0%, 100% { transform: scale( 1, 1 ) rotate( 0deg ); }
	25% { transform: scale( 0.95, 1.06 ) rotate( -2deg ); }
	50% { transform: scale( 1.03, 0.97 ) rotate( 1.5deg ); }
	75% { transform: scale( 0.98, 1.04 ) rotate( -1deg ); }
}
@keyframes psp-dw-glow { 0%, 100% { opacity: 0.8; transform: scale( 1 ); } 50% { opacity: 1; transform: scale( 1.1 ); } }

/* Phones: two compact rows (text, then buttons). */
@media ( max-width: 767px ) {
	.psp-dw { padding-top: 10px; }
	.psp-dw__bar { flex-wrap: wrap; gap: 10px 12px; padding: 12px 40px 12px 12px; }
	.psp-dw__art { width: 42px; height: 42px; }
	.psp-dw__copy { flex-basis: calc( 100% - 54px ); }
	.psp-dw__hi { font-size: 16px; }
	.psp-dw__en { font-size: 17px; }
	.psp-dw__sub { font-size: 13px; }
	.psp-dw__actions { flex: 1 1 100%; }
	.psp-dw__btn--primary { flex: 1 1 auto; }
	.psp-dw__close { top: 8px; margin-top: 0; right: 6px; }
	.psp-diwali-lights i { flex-basis: 30px; }
}
@media ( max-width: 380px ) {
	.psp-dw__wa-label { display: none; }
}

/* Light mode: the banner stays a night scene; only the light string's backdrop changes. */
html[data-theme="light"] .psp-diwali-lights { background: linear-gradient( 180deg, rgba( 10, 30, 56, 0.9 ), rgba( 10, 30, 56, 0.55 ) ); }
html[data-theme="light"] .psp-diwali-lights--footer { background: none; }

@media ( prefers-reduced-motion: reduce ) {
	.psp-diwali-lights i::after,
	.psp-dw__bar,
	.psp-dw__bar::after,
	.psp-dw__flame,
	.psp-dw__glow { animation: none !important; }
}