/*
 * Diwali Theme - isolated styles (every selector is namespaced `diwali-`).
 *
 * Layers (all position:fixed + pointer-events:none, so taps/scroll pass through):
 *   -2   .diwali-glow     soft warm light behind the page
 *   999  .diwali-canvas   fireworks, above page content, below header/footer (1000)
 *   1001 .diwali-decor    lights, lanterns, diyas, rangoli (above header/footer,
 *                         below Bootstrap modals at 1055+)
 * No existing selector, colour, spacing or z-index is modified.
 */
.diwali-fx, .diwali-fx canvas, .diwali-glow, .diwali-decor, .diwali-decor * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.diwali-fx, .diwali-glow, .diwali-decor {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
}
.diwali-glow {
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 22% at 0% 0%,    rgba(255,190,70,.22), transparent 70%),
    radial-gradient(ellipse 80% 22% at 100% 0%,  rgba(255,160,50,.20), transparent 70%),
    radial-gradient(ellipse 90% 16% at 50% 100%, rgba(255,175,60,.16), transparent 70%);
}
.diwali-fx { z-index: 999; }
.diwali-fx canvas { position: absolute; top: 0; left: 0; } /* normal blending: the original "lighten" would hide the colours on a light page */
.diwali-decor  { z-index: 1001; overflow: hidden; }

/* ---- String lights (very thin strip along the top edge) ----------------- */
.diwali-lights {
  position: absolute; top: 0; left: 0; width: 100%; height: 16px; display: flex;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16'%3E%3Cpath d='M0 1 Q15 9 30 1' fill='none' stroke='%237a4a12' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x 0 0;
}
.diwali-bulb { flex: 0 0 30px; position: relative; height: 16px; }
.diwali-bulb::before {
  content: ""; position: absolute; left: 11px; top: 6px; width: 7px; height: 9px;
  border-radius: 50% 50% 55% 55%;
  background: var(--diwali-c, #ffb300);
  box-shadow: 0 0 6px 2px var(--diwali-c, #ffb300);
  animation: diwali-twinkle 1.8s ease-in-out infinite;
  animation-delay: var(--diwali-d, 0s);
}
.diwali-bulb:nth-child(4n+1) { --diwali-c: #ffb300; --diwali-d: 0s; }
.diwali-bulb:nth-child(4n+2) { --diwali-c: #ff5a36; --diwali-d: .45s; }
.diwali-bulb:nth-child(4n+3) { --diwali-c: #ffe066; --diwali-d: .9s; }
.diwali-bulb:nth-child(4n)   { --diwali-c: #ff3d8b; --diwali-d: 1.35s; }
@keyframes diwali-twinkle { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---- Hanging lanterns (aakash kandil) ----------------------------------- */
.diwali-lantern {
  position: absolute; top: 0; width: 38px; height: 92px;
  margin-left: -19px;                       /* centre on the left % */
  transform-origin: 50% 0;
  animation: diwali-sway 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(255,150,30,.65));
}
.diwali-lantern svg { width: 100%; height: 100%; display: block; overflow: visible; }
.diwali-lantern .diwali-lit { animation: diwali-halo 1.8s ease-in-out infinite alternate; }
@keyframes diwali-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* ---- Ground groups: flat rangoli + diya + anaar/rocket, resting on the nav line ---- */
.diwali-ground {
  position: absolute; width: 132px; height: 74px;
  bottom: calc(var(--diwali-bottom, 62px) + env(safe-area-inset-bottom, 0px));   /* sits right on the footer nav edge */
}
.diwali-ground-l { left: 4px; }
.diwali-ground-r { right: 4px; }
.diwali-ground > * { position: absolute; display: block; }
.diwali-rangoli {            /* a floor pattern: viewed flat, like a real rangoli */
  left: 0; bottom: 0; width: 100px; height: 100px;
  transform: scaleY(.36); transform-origin: 50% 100%;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.18));
}
.diwali-ground-r .diwali-rangoli { left: auto; right: 0; }
.diwali-rangoli svg, .diwali-diya svg, .diwali-anaar svg, .diwali-rocket svg { width: 100%; height: 100%; display: block; overflow: visible; }
.diwali-diya { width: 40px; height: 38px; bottom: 9px; left: 30px; }
.diwali-ground-r .diwali-diya { left: auto; right: 30px; }
.diwali-anaar  { width: 28px; height: 40px; bottom: 2px; left: 100px; }
.diwali-rocket { width: 26px; height: 64px; bottom: 0;  right: 102px; transform: rotate(10deg); transform-origin: 50% 100%; }
.diwali-spark { animation: diwali-fountain 1.1s ease-out infinite; animation-delay: var(--diwali-d, 0s); transform-box: fill-box; }
.diwali-fuse  { animation: diwali-halo .35s ease-in-out infinite alternate; }

/* ---- Marigold strands hanging down both side edges ---------------------- */
.diwali-strand { position: absolute; top: 12px; width: 14px; height: 132px; transform-origin: 50% 0;
  animation: diwali-sway 5s ease-in-out infinite alternate; }
.diwali-strand-l { left: 2px; } .diwali-strand-r { right: 2px; animation-delay: -2s; }
.diwali-strand svg { width: 100%; height: 100%; display: block; overflow: visible; }

.diwali-flame {
  transform-origin: 50% 100%; transform-box: fill-box;
  animation: diwali-flicker 1.1s ease-in-out infinite alternate;
}
.diwali-halo { animation: diwali-halo 1.6s ease-in-out infinite alternate; }
@keyframes diwali-flicker {
  0%   { transform: scale(1, 1) rotate(-3deg); }
  50%  { transform: scale(.92, 1.1) rotate(2deg); }
  100% { transform: scale(1.05, .95) rotate(-1deg); }
}
@keyframes diwali-halo { from { opacity: .55; } to { opacity: 1; } }
@keyframes diwali-fountain {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--diwali-dx, 0px), -26px); opacity: 0; }
}

@media (min-width: 768px) {
  .diwali-ground-l { left: 16px; } .diwali-ground-r { right: 16px; }
}

/* ---- Shubh Labh plaque (hangs just under the header, centred) ------------ */
.diwali-shubh {
  position: absolute; top: var(--diwali-top, 47px);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 8px 5px;
  background: linear-gradient(180deg, #b8131f, #8a0a16);
  border: 1.5px solid #f2c14e; border-radius: 4px 4px 16px 16px;
  box-shadow: 0 0 0 1px #8a0a16, 0 3px 10px rgba(120,10,20,.45), inset 0 0 8px rgba(255,200,80,.35);
}
.diwali-shubh::after { /* golden bead fringe */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -7px; height: 7px;
  background: radial-gradient(circle at 50% 35%, #ffc94a 2.4px, transparent 2.9px) 0 0 / 11px 7px repeat-x;
}
.diwali-shubh-l { left: 18px; } .diwali-shubh-r { right: 18px; }
.diwali-shubh { gap: 4px; }
.diwali-swas { display: block; width: 12px; height: 12px; }
.diwali-swas svg { width: 100%; height: 100%; display: block; }
.diwali-shubh-t {
  font: 800 16px/1.3 "Noto Sans Gujarati", "Hind Vadodara", "Shruti", "Nirmala UI", "Mukta Vaani", sans-serif;
  background: linear-gradient(100deg, #ffd978 20%, #fffbe0 45%, #ffd978 70%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 3px rgba(255,200,80,.85));
  animation: diwali-sheen 3.6s linear infinite;
}
@keyframes diwali-sheen { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@media (min-width: 768px) { .diwali-shubh-t { font-size: 22px; } .diwali-swas { width: 18px; height: 18px; } .diwali-shubh { top: calc(var(--diwali-top, 47px) + 5px); } .diwali-shubh-l { left: 40px; } .diwali-shubh-r { right: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .diwali-bulb::before, .diwali-lantern, .diwali-lit, .diwali-flame, .diwali-halo, .diwali-strand, .diwali-spark, .diwali-fuse, .diwali-shubh-t { animation: none; }
}