/* Diwali festive layer - HOMEPAGE ONLY (loaded by index.php, built by js/diwali.js).
   Switch it off: set $diwali_festive = false in index.php (or delete the block). js/diwali.js also stops by itself after DW_END.
   Brand palette: red #FF0000, maroon #470000, gold #CBA344, white. Nothing here changes an existing section, card, button or the layout:
   every decoration lives in its own absolutely positioned, clipped, pointer-events:none layer (.dw-deco) that is painted BEHIND the section's content
   (z-index:-1 inside an isolated section), above only the section's own background. */

:root { --dw-gold: #CBA344; --dw-gold-hi: #f1d98a; --dw-maroon: #470000; --dw-k: 1; }

/* ---------- decoration layer ---------- */
.dw-host { isolation: isolate; }
.dw-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.dw-deco > * { position: absolute; pointer-events: none; }

/* colour sets per section background (existing backgrounds are never changed) */
.dw-t-w { --rg1: #CBA344; --rg2: #ff9a9a; --dw-ro: .36; --dw-sp: #CBA344; }   /* white: pale gold + light red */
.dw-t-p { --rg1: #CBA344; --rg2: #cc1a1a; --dw-ro: .32; --dw-sp: #CBA344; }   /* pink: gold + deeper red */
.dw-t-b { --rg1: #CBA344; --rg2: #f1d98a; --dw-ro: .30; --dw-sp: #f1d98a; }   /* maroon: gold */
.dw-t-r { --rg1: #ffffff; --rg2: #CBA344; --dw-ro: .26; --dw-sp: #ffffff; }   /* red hero: white + gold */

/* ---------- the hero centrepiece: a large rotating mandala (clockwise, 40s a turn) ---------- */
.dw-mandala-glow { left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 205, 110, .26), rgba(255, 190, 80, .09) 55%, rgba(255, 190, 80, 0)); animation: dw-breathe 7s infinite ease-in-out; }
.dw-mandala { left: 50%; top: 50%; opacity: calc(var(--dw-mo, 1) * .46); transform: translate(-50%, -50%) scale(var(--dw-ms, 1)); will-change: transform; }
.dw-mandala svg { display: block; width: 100%; height: 100%; animation: dw-spin 40s linear infinite; }
.dw-tw { animation: dw-twk2 3.4s infinite ease-in-out; }
@keyframes dw-twk2 { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

/* ---------- smaller rangoli corners / edges ---------- */
.dw-rangoli { --sz: 240px; width: calc(var(--sz) * var(--dw-k)); height: calc(var(--sz) * var(--dw-k)); color: var(--rg1); opacity: var(--dw-ro); }
.dw-rangoli svg { display: block; width: 100%; height: 100%; }
.dw-rg2 { stroke: var(--rg2); } .dw-rg2f { fill: var(--rg2); stroke: none; }
.dw-rangoli--tl { top: calc(var(--sz) * var(--dw-k) * -.4); left: calc(var(--sz) * var(--dw-k) * -.4); }
.dw-rangoli--tr { top: calc(var(--sz) * var(--dw-k) * -.4); right: calc(var(--sz) * var(--dw-k) * -.4); }
.dw-rangoli--bl { bottom: calc(var(--sz) * var(--dw-k) * -.4); left: calc(var(--sz) * var(--dw-k) * -.4); }
.dw-rangoli--br { bottom: calc(var(--sz) * var(--dw-k) * -.4); right: calc(var(--sz) * var(--dw-k) * -.4); }
.dw-rangoli--el { left: calc(var(--sz) * var(--dw-k) * -.55); top: 50%; margin-top: calc(var(--sz) * var(--dw-k) * -.5); }
.dw-rangoli--er { right: calc(var(--sz) * var(--dw-k) * -.55); top: 50%; margin-top: calc(var(--sz) * var(--dw-k) * -.5); }
.dw-rangoli--spin svg { animation: dw-spin 150s linear infinite; }
@keyframes dw-spin { to { transform: rotate(360deg); } }

/* ---------- hanging lights + marigold toran + bells ---------- */
.dw-lights { top: 0; left: 0; width: 100%; }
.dw-lights svg { display: block; overflow: hidden; }
.dw-bl { transform-box: fill-box; transform-origin: 50% 50%; animation: dw-bulb 3.6s infinite ease-in-out; }
.dw-bb { animation: dw-bulbfill 3.6s infinite ease-in-out; }
@keyframes dw-bulb { 0%, 100% { opacity: .35; transform: scale(.86); } 40% { opacity: .98; transform: scale(1.12); } 70% { opacity: .55; transform: scale(.94); } }
@keyframes dw-bulbfill { 0%, 100% { opacity: .75; } 40% { opacity: 1; } 70% { opacity: .84; } }
.dw-sw { transform-box: fill-box; transform-origin: 50% 0%; animation: dw-swing 4.4s infinite ease-in-out alternate; }
.dw-sw--bell { animation-duration: 3.2s; }
@keyframes dw-swing { from { transform: rotate(-3.4deg); } to { transform: rotate(3.4deg); } }
.dw-lit { top: -70px; width: 460px; height: 280px; background: radial-gradient(closest-side, rgba(255, 184, 46, .32), rgba(255, 184, 46, 0)); animation: dw-breathe 6s infinite ease-in-out; }
.dw-lit--l { left: -100px; } .dw-lit--r { right: -100px; animation-delay: -3s; }
@keyframes dw-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- diyas: flame flickers in height, glow breathes, embers rise ---------- */
.dw-diya { width: 58px; height: 58px; }
.dw-diya svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dw-diya .dw-flame, .dw-diya .dw-flame-m, .dw-diya .dw-flame-in { transform-box: fill-box; transform-origin: 50% 94%; }
.dw-diya .dw-flame { animation: dw-flick 2.3s infinite ease-in-out; }
.dw-diya .dw-flame-m { animation: dw-flick 1.8s infinite ease-in-out reverse; }
.dw-diya .dw-flame-in { animation: dw-flick2 1.4s infinite ease-in-out; }
.dw-diya .dw-shine { transform-box: fill-box; transform-origin: 50% 50%; animation: dw-shine 2.8s infinite ease-in-out; }
.dw-diya .dw-ember { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: dw-ember 3.4s infinite ease-out; }
.dw-diya .dw-ember.e2 { animation-delay: 1.1s; animation-duration: 3.9s; --ex: -4px; }
.dw-diya .dw-ember.e3 { animation-delay: 2.2s; animation-duration: 3s; --ex: 6px; }
@keyframes dw-flick {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  18% { transform: scale(.94, 1.1) rotate(-2.4deg); }
  37% { transform: scale(1.05, .93) rotate(1.8deg); }
  58% { transform: scale(.96, 1.12) rotate(-1.2deg); }
  79% { transform: scale(1.03, .96) rotate(2.2deg); }
}
@keyframes dw-flick2 { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.9, 1.16); } 60% { transform: scale(1.06, .9); } }
@keyframes dw-shine { 0%, 100% { opacity: .55; transform: scale(.9); } 40% { opacity: .95; transform: scale(1.08); } 70% { opacity: .7; transform: scale(.98); } }
@keyframes dw-ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--ex, 3px), -26px) scale(.3); } }
.dw-diya--sm .dw-ember { display: none; }
.dw-diya--hero { bottom: 12px; width: 120px; height: 120px; }
.dw-diya--sec-l { left: clamp(10px, 2.4vw, 40px); bottom: 3px; width: 58px; height: 58px; }
.dw-diya--sec-r { right: clamp(10px, 2.4vw, 40px); bottom: 3px; width: 58px; height: 58px; }
.dw-diya--foot-l { left: 10px; bottom: 12px; width: 32px; height: 32px; }
.dw-diya--foot-r { right: 10px; bottom: 12px; width: 32px; height: 32px; }
.dw-pair { left: 50%; bottom: 10px; display: flex; align-items: flex-end; gap: 16px; transform: translateX(-50%); }
.dw-pair .dw-diya { position: static; width: 40px; height: 40px; }
.dw-pair .dw-diya:nth-child(2) { width: 48px; height: 48px; }

/* ---------- sparkles, cracker pops, floating motes, footer line ---------- */
.dw-spark { width: 12px; height: 12px; background: var(--dw-sp, #CBA344); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation: dw-twk 3.6s infinite ease-in-out; }
@keyframes dw-twk { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45% { opacity: .95; transform: scale(1) rotate(45deg); } 70% { opacity: .2; transform: scale(.6) rotate(70deg); } }
.dw-burst { width: 70px; height: 70px; color: var(--dw-sp, #CBA344); opacity: 0; animation: dw-pop 9s infinite ease-out; }
.dw-burst svg { display: block; width: 100%; height: 100%; }
.dw-burst--tl { top: 52px; left: 4%; } .dw-burst--tr { top: 52px; right: 4%; } .dw-burst--bl { bottom: 56px; left: 3%; } .dw-burst--br { bottom: 56px; right: 3%; }
@keyframes dw-pop { 0% { opacity: 0; transform: scale(.15); } 3% { opacity: .95; } 15% { opacity: 0; transform: scale(1.12); } 100% { opacity: 0; transform: scale(1.12); } }
.dw-mote { bottom: -8px; border-radius: 50%; background: var(--dw-sp, #f1d98a); opacity: 0; animation: dw-rise 11s infinite linear; }
@keyframes dw-rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .75; } 85% { opacity: .5; } 100% { transform: translate(18px, var(--rise, -420px)); opacity: 0; } }
.dw-foot-line { top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(203, 163, 68, 0), #CBA344 18%, #f1d98a 50%, #CBA344 82%, rgba(203, 163, 68, 0)); opacity: .85; }

/* ---------- hero canvas (fireworks, sparklers, petals) ---------- */
canvas.dw-fireworks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- greeting popup (every homepage view; no stored state) ---------- */
.dw-pop { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(30, 0, 0, .7); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; }
.dw-pop.is-open { opacity: 1; visibility: visible; }
.dw-pop__box { --gc-text: #fff; --gc-text-hover: #f1d98a; --gc-circle: #ff0000; --gc-circle-hover: #cc0000; --gc-arrow: #fff; --rg1: #CBA344; --rg2: #f1d98a; --dw-ro: .22; --dw-sp: #f1d98a;
  position: relative; box-sizing: border-box; width: min(460px, 100%); max-height: calc(100vh - 36px); overflow: hidden auto; padding: 78px 30px 32px; border: 2px solid var(--dw-gold); border-radius: 26px; color: #fff; text-align: center;
  background: radial-gradient(120% 80% at 50% 0%, #7a0b0b 0%, #470000 52%, #2e0000 100%);
  box-shadow: 0 34px 80px -20px rgba(0, 0, 0, .75), inset 0 0 0 5px #470000, inset 0 0 0 6px rgba(203, 163, 68, .6);
  transform: translateY(16px) scale(.96); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.dw-pop.is-open .dw-pop__box { transform: none; }
.dw-pop__box .dw-deco { z-index: 0; }
.dw-pop__box .dw-lit { top: -90px; width: 360px; height: 220px; }
.dw-pop__box .dw-lit--l { left: -60px; } .dw-pop__box .dw-lit--r { right: -60px; }
.dw-pop__box .dw-mote { --rise: -420px; animation-duration: 7s; }
.dw-pop__body { position: relative; z-index: 1; }
.dw-pop__diyas { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin: 0 0 8px; }
.dw-pop__diyas .dw-diya { position: static; width: 54px; height: 54px; }
.dw-pop__diyas .dw-diya:nth-child(2) { width: 74px; height: 74px; }
html body .dw-pop .dw-pop__eyebrow:not(#_) { display: block; margin: 0 0 8px; color: var(--dw-gold); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
html body .dw-pop h2.dw-pop__title:not(#_) { margin: 0 0 14px; color: #fff; font-size: clamp(26px, 7vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: 0; text-align: center; text-wrap: balance; -webkit-text-fill-color: currentColor; }
html body .dw-pop h2.dw-pop__title:not(#_) em { display: block; margin: 0 0 4px; color: var(--dw-gold); font-style: normal; font-size: clamp(36px, 10vw, 50px); text-shadow: 0 0 22px rgba(203, 163, 68, .5); -webkit-text-fill-color: currentColor; }
html body .dw-pop p.dw-pop__text:not(#_) { margin: 0 0 24px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; text-align: center; }
.dw-pop__act { display: flex; justify-content: center; }
html body .dw-pop button.dw-pop__x:not(#_) { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid rgba(203, 163, 68, .75); border-radius: 50%; background: rgba(71, 0, 0, .85); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
html body .dw-pop button.dw-pop__x:not(#_):is(:hover, :focus-visible) { background: var(--dw-gold); color: var(--dw-maroon); }

/* ---------- small screens ---------- */
@media (max-width: 991px) { .dw-rangoli--el, .dw-rangoli--er { display: none; } }
@media (max-width: 767px) {
  :root { --dw-k: .62; }
  .dw-diya--sec-l, .dw-diya--sec-r { width: 46px; height: 46px; }
  .dw-pair, .dw-diya--foot-l, .dw-diya--foot-r { display: none; }  /* the footer bottom row stacks on phones and has no free centre */
  .dw-lit { width: 260px; height: 180px; }
  .dw-burst { width: 54px; height: 54px; }
  .dw-mandala { opacity: calc(var(--dw-mo, 1) * .38); }
  .dw-pop__box { padding: 74px 22px 26px; }
}

/* ---------- motion preferences: a static decorative fallback (nothing moves, nothing is hidden that is purely still art) ---------- */
@media (prefers-reduced-motion: reduce) {
  .dw-diya .dw-flame, .dw-diya .dw-flame-m, .dw-diya .dw-flame-in, .dw-diya .dw-shine, .dw-mandala svg, .dw-rangoli--spin svg, .dw-bl, .dw-bb, .dw-sw, .dw-lit, .dw-mandala-glow, .dw-tw, .dw-spark { animation: none; }
  .dw-bl { opacity: .7; } .dw-spark, .dw-tw { opacity: .6; }
  .dw-ember, .dw-burst, .dw-mote { display: none; }
  canvas.dw-fireworks { display: none; }
  .dw-mandala { will-change: auto; }
  .dw-pop, .dw-pop__box { transition: none; }
}

/* ---------- rocket crackers: fixed, click-through canvas above the content, under the sticky header ---------- */
canvas.dw-rockets { position: fixed; inset: 0; z-index: 1020; width: 100vw; height: 100vh; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { canvas.dw-rockets { display: none; } }

/* ---------- navbar (homepage only): wire + bulbs on the bottom edge, shimmer sweep, a diya beside the logo, greeting badge ---------- */
.dw-navfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; --dw-sp: #CBA344; }
.dw-navfx > * { position: absolute; pointer-events: none; }
.dw-navline { left: 0; right: 0; bottom: -4px; height: 6px; }
.dw-navline svg { display: block; overflow: visible; }
.dw-navshine { left: 0; right: 0; bottom: -2px; height: 2px; overflow: hidden; }
.dw-navshine i { display: block; width: 180px; height: 2px; background: linear-gradient(90deg, rgba(255, 244, 200, 0), #fff4c8, rgba(255, 244, 200, 0)); animation: dw-sweep 9s linear infinite; }
@keyframes dw-sweep { from { transform: translateX(-200px); } to { transform: translateX(2800px); } }
.dw-navdiya { width: 40px; height: 40px; }
.dw-navspark { width: 12px; height: 12px; }
html body .an2-header .dw-badge { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 24px; margin: 0; padding: 0 11px 0 7px; border: 1px solid var(--dw-gold); border-radius: 999px; background: linear-gradient(180deg, #fff 0%, #fbf3dc 100%); color: var(--dw-maroon); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .01em; white-space: nowrap; text-decoration: none; cursor: default; }
html body .an2-header .dw-badge .dw-diya { position: static; flex: 0 0 auto; width: 16px; height: 16px; }
html body .an2-header .dw-badge b { color: #ff0000; font-weight: 800; }
@media (max-width: 575px) { html body .an2-header .dw-badge { height: 22px; padding: 0 9px 0 6px; font-size: 11px; } }
@media (max-width: 480px) { html body .an2-header .dw-badge { width: 24px; padding: 0; justify-content: center; } html body .an2-header .dw-badge > span:not(.dw-diya) { display: none; } html body .an2-header .dw-badge .dw-diya { width: 18px; height: 18px; } }
@media (prefers-reduced-motion: reduce) { .dw-navshine { display: none; } }

/* popup: the light string spans the full card width, pinned to the top edge (it sits directly in the card, not in a decoration layer) */
.dw-pop__box > .dw-lights { position: absolute; top: 0; left: 0; right: 0; width: auto; z-index: 2; pointer-events: none; overflow: hidden; }

/* light pages (About, Services): softer decoration than the homepage */
.dw-lite .dw-diya--sec-l, .dw-lite .dw-diya--sec-r { width: 46px; height: 46px; }
.dw-lite .dw-rangoli { opacity: calc(var(--dw-ro) * .85); }
@media (max-width: 767px) { .dw-lite .dw-diya--sec-l, .dw-lite .dw-diya--sec-r { width: 38px; height: 38px; } }


/* Performance (2026-11-07): decoration layers that are scrolled out of view stop animating (diwali.js toggles .dw-off). Invisible to the visitor, saves the per-frame style work of ~200 SVG bulbs. */
.dw-deco.dw-off, .dw-deco.dw-off * { animation-play-state: paused !important; }