/* Diwali greeting (assets/diwali/diwali.js). Vanilla port of the shared React kit — identical
   in every project except this mapping block, which points the --dw-* tokens at the site's own
   theme vars (sidebar-redesign.css / Bootstrap 4 :root), with CSS keywords as the last fallback
   on pages that load neither. No hex colours. */
.diwali-decor,
.diwali-fireworks,
.diwali-greeting {
  --dw-gold: var(--zmc-gold, var(--warning, goldenrod));
  --dw-orange: var(--orange, darkorange);
  --dw-red: var(--red, crimson);
  --dw-teal: var(--teal, teal);
  --dw-green: var(--success, seagreen);
  --dw-white: var(--white, white);
  --dw-ink: var(--zmc-ink, var(--dark, black));
  --dw-primary: var(--zmc-gold-dark, var(--primary, darkgoldenrod));
  --dw-accent: var(--pink, deeppink);
  --dw-accent-2: var(--teal, teal);
  --dw-pill-bg: var(--zmc-gold-dark, var(--primary, darkgoldenrod));
  --dw-pill-shadow: 0 8px 24px color-mix(in srgb, var(--dw-ink) 30%, transparent);
  --dw-mobile-lift: 0px; /* no fixed bottom nav on this site */
}

.diwali-fireworks {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1990; /* above the shell, below modals/toasts */
}

.diwali-greeting {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  transform: translateX(-50%);
  z-index: 1991;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 14px;
  border-radius: 999px;
  background: var(--dw-pill-bg);
  color: var(--dw-white);
  box-shadow: var(--dw-pill-shadow);
  animation: diwali-greeting-in 0.5s ease-out both;
}

.diwali-diya {
  font-size: 1.5rem;
  line-height: 1;
  animation: diwali-flicker 1.4s ease-in-out infinite;
}

.diwali-greeting-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.8rem;
  min-width: 0;
}

.diwali-greeting-text strong {
  font-size: 0.95rem;
}

.diwali-greeting-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.85;
}

.diwali-greeting-close:hover {
  opacity: 1;
}

@keyframes diwali-greeting-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes diwali-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  50% { transform: scale(1.08) rotate(2deg); filter: brightness(1.25); }
}

/* ---- Festival decor: corner lights, akash kandil, diyas (pointer-events: none) ---- */
.diwali-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1985; /* above the shell, below fireworks / greeting / modals */
}

.diwali-lights {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  width: min(320px, 44vw);
  height: auto;
  overflow: visible;
  transform-origin: 50% 0;
}

.diwali-lights-left { left: 0; animation: diwali-sway-left 5s ease-in-out infinite; }
.diwali-lights-right { right: 0; transform: scaleX(-1); animation: diwali-sway-right 5s ease-in-out infinite -2.5s; }

.diwali-wire {
  fill: none;
  stroke: var(--dw-ink);
  stroke-opacity: 0.5;
  stroke-width: 1.1;
}

.diwali-bulb-cap {
  fill: var(--dw-ink);
  fill-opacity: 0.6;
}

.diwali-bulb {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: diwali-twinkle 1.6s ease-in-out infinite;
}

.diwali-bulb-glass { fill: currentColor; }

/* Bloom: blurred halo in the bulb colour, added light rather than paint. */
.diwali-bulb-halo {
  fill: currentColor;
  opacity: 0.45;
  filter: blur(3px);
}

.diwali-flare {
  fill: var(--dw-white);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 2px var(--dw-white));
  animation: diwali-flare 3.2s ease-in-out infinite;
}

/* ---- Akash kandil: 3D spinning body ---- */
.diwali-kandil {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  width: 54px;
  aspect-ratio: 80 / 176;
  transform-origin: 50% 0;
  animation: diwali-swing 3.6s ease-in-out infinite;
}

.diwali-kandil-frame-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Hang at the outer edge, clear of the header content. */
.diwali-kandil-left { left: 8px; }
.diwali-kandil-right { right: 14px; animation-delay: -1.8s; }

.diwali-kandil-frame { fill: var(--dw-primary); }
.diwali-kandil-accent { fill: var(--dw-orange); }

/* Body box = viewBox y 27..93 of 176. */
.diwali-kandil-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 15.34%;
  height: 37.5%;
  perspective: 260px;
}

.diwali-kandil-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: diwali-spin 9s linear infinite;
}

.diwali-kandil-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: visible;
}

.diwali-kandil-paper { opacity: 0.62; }

.diwali-kandil-edge {
  fill: none;
  stroke: var(--dw-primary);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.diwali-kandil-rib { stroke-opacity: 0.45; }

.diwali-kandil-star {
  fill: var(--dw-white);
  opacity: 0.85;
}

/* Light source inside the lantern: a blurred hot core that breathes. */
.diwali-kandil-core {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 22%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dw-white) 0%, var(--dw-gold) 35%, transparent 70%);
  filter: blur(5px);
  animation: diwali-core 1.8s ease-in-out infinite alternate;
}

/* God-rays: a rotating conic burst behind the body, faded out radially. */
.diwali-kandil-rays {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    color-mix(in srgb, var(--dw-gold) 40%, transparent) 0deg 5deg,
    transparent 5deg 22deg
  );
  -webkit-mask-image: radial-gradient(circle, black 12%, transparent 62%);
  mask-image: radial-gradient(circle, black 12%, transparent 62%);
  animation: diwali-rays 14s linear infinite;
}

.diwali-kandil-tails {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: diwali-tails 1.8s ease-in-out infinite alternate;
}

.diwali-tail-a,
.diwali-tail-b {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.diwali-tail-a { stroke: var(--dw-primary); }
.diwali-tail-b { stroke: var(--dw-gold); }

.diwali-diyas {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  display: flex;
  gap: 2px;
}

.diwali-diyas-left { left: 8px; }
.diwali-diyas-right { right: 8px; }

/* Pinned desktop sidebar: stand the left diyas just past its edge, not over the profile card. */
@media (min-width: 992px) {
  .diwali-diyas-left { transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
  .diwali-diyas-left { left: calc(var(--dw-diya-left, 0px) + 8px); }
}

/* 3D stage: each lamp wobbles in perspective, so the bowl and flame turn like a real object. */
.diwali-diya-3d {
  display: inline-block;
  perspective: 220px;
  transform-style: preserve-3d;
  animation: diwali-diya-wobble 4.2s ease-in-out infinite;
}

.diwali-diya-lamp {
  display: block;
  width: 50px;
  height: 53px;
  overflow: visible;
}

.diwali-diya-rim { fill: none; stroke: var(--dw-gold); stroke-width: 1.4; stroke-linejoin: round; }
.diwali-diya-medal { stroke: var(--dw-gold); stroke-width: 0.9; }
.diwali-diya-petal { fill: color-mix(in srgb, var(--dw-gold) 85%, var(--dw-orange)); stroke: color-mix(in srgb, var(--dw-orange) 60%, var(--dw-ink)); stroke-width: 0.25; }
.diwali-diya-bud { fill: var(--dw-orange); stroke: var(--dw-gold); stroke-width: 0.5; }
.diwali-diya-dot { fill: var(--dw-white); stroke: var(--dw-gold); stroke-width: 0.6; opacity: 0.9; }
.diwali-diya-spec { fill: none; stroke: var(--dw-white); stroke-width: 1.6; stroke-linecap: round; opacity: 0.22; }

/* Gold flecks inside the bowl catch the flame light. */
.diwali-diya-glint {
  fill: var(--dw-gold);
  animation: diwali-glint 1.4s ease-in-out infinite alternate;
}

.diwali-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: diwali-flame 1.6s ease-in-out infinite;
}

.diwali-flame-mid {
  fill: var(--dw-gold);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: diwali-flame-inner 0.7s ease-in-out infinite alternate;
}

.diwali-flame-core {
  fill: var(--dw-white);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  filter: blur(0.4px);
  animation: diwali-flame-inner 0.5s ease-in-out infinite alternate;
}

.diwali-spark {
  fill: var(--dw-gold);
  opacity: 0;
  transform-box: fill-box;
  animation: diwali-spark 2.2s ease-out infinite;
}

/* Mobile web + Capacitor: sit above the fixed bottom nav, smaller pieces. */
@media (max-width: 991.98px) {
  /* Above the bottom nav and the diya row. */
  .diwali-greeting {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dw-mobile-lift, 0px) + 58px);
  }

  .diwali-diyas {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dw-mobile-lift, 0px) + 6px);
  }

  .diwali-diya-lamp {
    width: 38px;
    height: 40px;
  }

  .diwali-kandil {
    width: 36px;
  }

  .diwali-diyas-right .diwali-diya-3d:nth-child(n + 3),
  .diwali-diyas-left .diwali-diya-3d:nth-child(n + 3) {
    display: none;
  }
}

@keyframes diwali-twinkle {
  0%, 100% { opacity: 1; transform: scale(1.06); filter: brightness(1.25); }
  50% { opacity: 0.35; transform: scale(0.94); filter: brightness(0.8); }
}

@keyframes diwali-flare {
  0%, 70%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  80% { opacity: 1; transform: scale(1.3) rotate(45deg); }
}

@keyframes diwali-sway-left {
  0%, 100% { transform: perspective(600px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(600px) rotateX(14deg) rotateY(-6deg); }
}

@keyframes diwali-sway-right {
  0%, 100% { transform: perspective(600px) rotateX(0deg) rotateY(0deg) scaleX(-1); }
  50% { transform: perspective(600px) rotateX(14deg) rotateY(-6deg) scaleX(-1); }
}

@keyframes diwali-spin {
  from { transform: rotateX(-8deg) rotateY(0deg); }
  to { transform: rotateX(-8deg) rotateY(360deg); }
}

@keyframes diwali-core {
  from { opacity: 0.65; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.15); }
}

@keyframes diwali-rays {
  to { rotate: 360deg; }
}

@keyframes diwali-tails {
  from { transform: skewX(-5deg); }
  to { transform: skewX(5deg); }
}

@keyframes diwali-swing {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

/* Irregular steps so the flame "dances" instead of pulsing evenly. */
@keyframes diwali-flame {
  0%   { transform: scale(1, 1) skewX(0deg); }
  15%  { transform: scale(0.94, 1.1) skewX(-5deg); }
  30%  { transform: scale(1.05, 0.95) skewX(3deg); }
  45%  { transform: scale(0.9, 1.16) skewX(6deg); }
  60%  { transform: scale(1.03, 0.97) skewX(-2deg); }
  75%  { transform: scale(0.96, 1.08) skewX(-6deg); }
  90%  { transform: scale(1.02, 1) skewX(2deg); }
  100% { transform: scale(1, 1) skewX(0deg); }
}

@keyframes diwali-flame-inner {
  from { transform: scale(0.9, 0.92); }
  to { transform: scale(1.06, 1.1); }
}

@keyframes diwali-glint {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* Embers: grow as they "come toward" the viewer, then shrink away — depth without WebGL. */
@keyframes diwali-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 1; transform: translate(-1px, -5px) scale(1.4); }
  55%  { opacity: 0.8; transform: translate(3px, -15px) scale(1); }
  100% { opacity: 0; transform: translate(-2px, -28px) scale(0.2); }
}

@keyframes diwali-diya-wobble {
  0%, 100% { transform: rotateY(-8deg) rotateX(6deg) translateY(0); }
  25%      { transform: rotateY(0deg) rotateX(10deg) translateY(-1.5px); }
  50%      { transform: rotateY(8deg) rotateX(6deg) translateY(0); }
  75%      { transform: rotateY(0deg) rotateX(2deg) translateY(-1px); }
}

@media print {
  .diwali-decor,
  .diwali-fireworks,
  .diwali-greeting {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .diwali-greeting,
  .diwali-diya,
  .diwali-bulb,
  .diwali-kandil,
  .diwali-kandil-3d,
  .diwali-kandil-core,
  .diwali-kandil-rays,
  .diwali-lights,
  .diwali-flare,
  .diwali-kandil-tails,
  .diwali-flame,
  .diwali-flame-mid,
  .diwali-flame-core,
  .diwali-diya-glint,
  .diwali-diya-3d {
    animation: none;
  }

  .diwali-sparks {
    display: none;
  }
}