/* Dev Diwali 2026 sub-pages: scene variants + small layout helpers.
   Loaded after ddb-fx.css. Additive only; all motion off under prefers-reduced-motion. */

/* ---------- Stats band: 3 or 4 tiles instead of 5 ---------- */
.ddbfx-stats--n3 { grid-template-columns: repeat(3, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }
.ddbfx-stats--n4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
	.ddbfx-stats--n3, .ddbfx-stats--n4 { grid-template-columns: repeat(2, 1fr); }
	.ddbfx-stats--n3 .ddbfx-stat:last-child { grid-column: 1 / -1; }
	.ddbfx-stats--n4 .ddbfx-stat:last-child { grid-column: auto; }
}

/* ---------- Fire show: flames along the ghat ---------- */
.ddbfx-flames { position: absolute; left: 0; right: 0; bottom: 70px; height: 150px; }
.ddbfx-flames i { position: absolute; bottom: 0; width: 34px; height: 90px; margin-left: -17px; transform-origin: 50% 100%;
	background: radial-gradient(ellipse at 50% 85%, #fff6c8 0, #ffd36a 28%, #ff9933 55%, rgba(232,69,60,.0) 74%);
	border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; filter: blur(.4px);
	box-shadow: 0 0 36px 12px rgba(255,140,40,.45); animation: ddbfx-fire 1.1s ease-in-out infinite alternate; }
.ddbfx-flames i:nth-child(1) { left: 8%;  height: 64px; animation-delay: -.2s; }
.ddbfx-flames i:nth-child(2) { left: 22%; height: 104px; animation-delay: -.7s; }
.ddbfx-flames i:nth-child(3) { left: 36%; height: 78px; animation-delay: -.4s; }
.ddbfx-flames i:nth-child(4) { left: 50%; height: 120px; animation-delay: -.9s; }
.ddbfx-flames i:nth-child(5) { left: 64%; height: 82px; animation-delay: -.1s; }
.ddbfx-flames i:nth-child(6) { left: 78%; height: 108px; animation-delay: -.6s; }
.ddbfx-flames i:nth-child(7) { left: 92%; height: 68px; animation-delay: -.3s; }
@keyframes ddbfx-fire {
	0% { transform: scale(1, 1) skewX(-5deg); opacity: .85; }
	50% { transform: scale(.9, 1.18) skewX(4deg); opacity: 1; }
	100% { transform: scale(1.06, .92) skewX(-3deg); opacity: .9; }
}
.ddbfx-scene--fire .ddbfx-ember { background: #ffb347; box-shadow: 0 0 10px 3px rgba(255,120,30,.8); }

/* ---------- Laser show: beams sweeping the sky ---------- */
.ddbfx-lasers { position: absolute; inset: 0; mix-blend-mode: screen; }
.ddbfx-lasers i { position: absolute; bottom: 118px; left: 50%; width: 3px; height: 110%; transform-origin: 50% 100%;
	border-radius: 3px; background: linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,0) 88%);
	box-shadow: 0 0 14px 3px currentColor; opacity: .7; animation: ddbfx-sweep 5.5s ease-in-out infinite alternate; }
.ddbfx-lasers i:nth-child(1) { left: 12%; color: #5ef0ff; background-color: transparent; --r: -28deg; animation-delay: -.5s; }
.ddbfx-lasers i:nth-child(2) { left: 28%; color: #ff7ae6; --r: -12deg; animation-delay: -1.8s; }
.ddbfx-lasers i:nth-child(3) { left: 44%; color: #9dff7a; --r: 6deg; animation-delay: -3.1s; }
.ddbfx-lasers i:nth-child(4) { left: 60%; color: #ffe45e; --r: -6deg; animation-delay: -2.2s; }
.ddbfx-lasers i:nth-child(5) { left: 76%; color: #b388ff; --r: 14deg; animation-delay: -4s; }
.ddbfx-lasers i:nth-child(6) { left: 90%; color: #5ef0ff; --r: 28deg; animation-delay: -.9s; }
@keyframes ddbfx-sweep { from { transform: rotate(calc(var(--r) - 22deg)); } to { transform: rotate(calc(var(--r) + 22deg)); } }
.ddbfx-scene--laser .ddbfx-glow { background: radial-gradient(ellipse at 50% 100%, rgba(120,70,255,.45), rgba(0,220,255,.18) 42%, transparent 70%); }

/* ---------- Ganga Aarti: tiered aarti lamps ---------- */
.ddbfx-aarti { position: absolute; left: 0; right: 0; bottom: 74px; height: 120px; display: flex; justify-content: space-evenly; align-items: flex-end; }
.ddbfx-aarti__lamp { position: relative; display: block; width: 78px; height: 96px; }
.ddbfx-aarti__lamp::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 6px; height: 46px; margin-left: -3px; background: linear-gradient(#e8a33d, #8a4b10); border-radius: 3px; }
.ddbfx-aarti__lamp::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 46px; height: 12px; margin-left: -23px; background: linear-gradient(#e8a33d, #8a4b10); border-radius: 0 0 24px 24px; }
.ddbfx-aarti__lamp i { position: absolute; bottom: 38px; width: 14px; height: 24px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
	background: radial-gradient(ellipse at 50% 80%, #fff6c8 0, #ffd36a 35%, #ff9933 62%, transparent 74%);
	box-shadow: 0 0 20px 6px rgba(255,160,50,.6); animation: ddbfx-flame .45s ease-in-out infinite alternate; }
.ddbfx-aarti__lamp i:nth-child(1) { left: 6px; bottom: 44px; animation-delay: -.1s; }
.ddbfx-aarti__lamp i:nth-child(2) { left: 50%; margin-left: -7px; bottom: 56px; animation-delay: -.25s; }
.ddbfx-aarti__lamp i:nth-child(3) { right: 6px; bottom: 44px; animation-delay: -.35s; }
.ddbfx-aarti__lamp:nth-child(2) { transform: scale(1.25); transform-origin: 50% 100%; }
.ddbfx-scene--aarti .ddbfx-glow { background: radial-gradient(ellipse at 50% 100%, rgba(255,140,40,.5), rgba(138,28,92,.2) 45%, transparent 72%); }

/* ---------- 84 Ghats of diyas: lamps on the steps ---------- */
.ddbfx-steps { position: absolute; left: 0; right: 0; bottom: 40px; height: 90px; }
.ddbfx-steps i { position: absolute; width: 10px; height: 6px; border-radius: 0 0 10px 10px; background: linear-gradient(#e8742c, #a63d10); }
.ddbfx-steps i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 5px; height: 9px; margin-left: -2.5px;
	background: radial-gradient(ellipse at 50% 75%, #fff6c8 0, #ffd36a 40%, #ff9933 70%, transparent 76%);
	border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; box-shadow: 0 0 12px 4px rgba(255,170,60,.65);
	animation: ddbfx-flame .38s ease-in-out infinite alternate; }
.ddbfx-steps i:nth-child(odd)::before { animation-delay: -.15s; }
.ddbfx-steps i:nth-child(1)  { left: 4%;  bottom: 4px; }  .ddbfx-steps i:nth-child(2)  { left: 11%; bottom: 30px; }
.ddbfx-steps i:nth-child(3)  { left: 19%; bottom: 10px; } .ddbfx-steps i:nth-child(4)  { left: 27%; bottom: 44px; }
.ddbfx-steps i:nth-child(5)  { left: 35%; bottom: 6px; }  .ddbfx-steps i:nth-child(6)  { left: 42%; bottom: 26px; }
.ddbfx-steps i:nth-child(7)  { left: 50%; bottom: 12px; } .ddbfx-steps i:nth-child(8)  { left: 57%; bottom: 40px; }
.ddbfx-steps i:nth-child(9)  { left: 64%; bottom: 4px; }  .ddbfx-steps i:nth-child(10) { left: 72%; bottom: 28px; }
.ddbfx-steps i:nth-child(11) { left: 79%; bottom: 8px; }  .ddbfx-steps i:nth-child(12) { left: 86%; bottom: 46px; }
.ddbfx-steps i:nth-child(13) { left: 92%; bottom: 14px; } .ddbfx-steps i:nth-child(14) { left: 97%; bottom: 34px; }

/* ---------- Boat/ride pages: shared cards pop in with the rest ---------- */
.ddb-choose-grid > *, .ddb-boat-grid > * { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.ddb-choose-grid > *:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(3,46,66,.16); }

@media (max-width: 700px) {
	.ddbfx-flames, .ddbfx-aarti { bottom: 56px; transform: scale(.7); transform-origin: 50% 100%; }
	.ddbfx-lasers i:nth-child(n+5), .ddbfx-steps i:nth-child(n+11) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ddbfx-flames i, .ddbfx-lasers i, .ddbfx-aarti__lamp i, .ddbfx-steps i::before { animation: none !important; }
}