/* =====================================================================
 * XBOOM Janmashtami Theme — decorative overlay styles
 *
 * Hanging dahi-handi matkis + peacock feathers + a flute dangling under
 * the header, a peacock-gradient accent line, gentle falling peacock
 * feathers, a "Happy Janmashtami" plaque, and a per-visitor on/off switch.
 *
 * Purely additive. Every rule is scoped under .xjn- / #xjn- so it can
 * never touch the live theme. Every decorative layer is pointer-events:none,
 * so nothing here can block a click on the real site.
 * ===================================================================== */

#xjn-root, #xjn-root *, #xjn-strands, #xjn-strands * { box-sizing: border-box; }
#xjn-strands .xjn-svg, #xjn-root .xjn-svg,
#xjn-strands img, #xjn-root img { display: block; }

/* ---- falling peacock feathers (full viewport, click-through) ---- */
#xjn-root { position: fixed; inset: 0; pointer-events: none; z-index: 9997; overflow: hidden; }
#xjn-feathers { position: absolute; inset: 0; overflow: hidden; }
.xjn-feather { position: absolute; top: -12%; opacity: 0; will-change: transform, opacity; }
.xjn-feather > div { will-change: margin-left; }
@keyframes xjn-fall {
  0%   { transform: translateY(-14vh) rotate(-8deg);  opacity: 0; }
  8%   { opacity: .9; } 90% { opacity: .9; }
  100% { transform: translateY(116vh) rotate(20deg);  opacity: 0; }
}
@keyframes xjn-sway { 0% { margin-left: -18px; } 100% { margin-left: 18px; } }

/* ---- peacock-gradient accent line on the header's bottom edge ---- */
#xjn-accent {
  position: fixed; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg,#0E2A47,#12557E 22%,#159A8E 45%,#3CA36A 62%,#E8B84B 82%,#12557E);
  background-size: 200% 100%; box-shadow: 0 1px 10px rgba(21,154,142,.5);
}

/* ---- hanging matki / feather / flute strands ---- */
#xjn-strands { position: fixed; left: 0; right: 0; height: 0; z-index: 9998; pointer-events: none; }
.xjn-strand {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; animation: xjn-swing 5.5s ease-in-out infinite;
}
@keyframes xjn-swing { 0%,100% { transform: translateX(-50%) rotate(-2.4deg); } 50% { transform: translateX(-50%) rotate(2.4deg); } }

.xjn-seg { width: 2px; background: linear-gradient(#C9922B,#E8C466,#C9922B); } /* rope */
.xjn-bead { border-radius: 50%; box-shadow: inset -1px -1px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3); }
.xjn-bead.gold  { background: radial-gradient(circle at 34% 30%, #FFEDB0, #E8B84B 52%, #A9781F); }
.xjn-bead.blue  { background: radial-gradient(circle at 34% 30%, #7FB6E0, #1E6FA8 52%, #0E3E63); }
.xjn-bead.teal  { background: radial-gradient(circle at 34% 30%, #86D8D0, #159A8E 52%, #0C5A53); }
.xjn-hang { line-height: 0; }
.xjn-hang svg, .xjn-hang img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }

/* ---- greeting plaque (hangs in the centre gap) ---- */
.xjn-greet {
  position: fixed; z-index: 9998; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; animation: xjn-swing2 7s ease-in-out infinite;
}
@keyframes xjn-swing2 { 0%,100% { transform: translateX(-50%) rotate(-1.7deg); } 50% { transform: translateX(-50%) rotate(1.7deg); } }
.xjn-greet .str { width: 2px; height: 30px; background: linear-gradient(#C9922B,#E8C466,#C9922B); }
.xjn-tag {
  background: radial-gradient(130% 120% at 50% 0%, #4AA3E4 0%, #2076B4 42%, #0C3B60 100%);
  border: 1.5px solid #E8B84B; border-radius: 14px; padding: 9px 18px 10px;
  text-align: center; box-shadow: 0 8px 22px rgba(14,42,71,.55);
}
.xjn-tag .en {
  font: 800 14px/1.15 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  color: #FFE9B0; letter-spacing: .01em; white-space: nowrap;
}
.xjn-tag .hi {
  font: 600 10px/1.3 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  color: #F7D97C; letter-spacing: .06em; margin-top: 2px; white-space: nowrap;
}
.xjn-greet-img {
  display: block; width: 64px; height: auto; margin: 0 auto 6px; padding: 5px 8px;
  /* soft whitish glow behind Krishna — fades into the blue, no hard card */
  background: radial-gradient(ellipse 72% 66% at 50% 46%, rgba(255,255,255,.92) 0%, rgba(228,242,255,.5) 48%, rgba(255,255,255,0) 78%);
}

/* ---- matki perched just above the bottom-right WhatsApp button ---- */
#xjn-matka {
  position: fixed; right: 10px; bottom: 78px; z-index: 9989; /* WhatsApp is 9990, sits below it */
  pointer-events: none; line-height: 0;
  animation: xjn-bob 3.4s ease-in-out infinite;
}
#xjn-matka img, #xjn-matka svg { display: block; width: 84px; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.42)); }
@keyframes xjn-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 600px) {
  #xjn-matka { right: 8px; bottom: 72px; }
  #xjn-matka img, #xjn-matka svg { width: 62px; }
}
@media (prefers-reduced-motion: reduce) { #xjn-matka { animation: none; } }

/* ---- visitor on/off switch (the ONE interactive control; everyone sees it) ----
 * Positioned to the RIGHT of xboom.in's bottom-left ElevenLabs ConvAI widget
 * so the two sit side by side. Override via XJN_TOGGLE_LEFT / XJN_TOGGLE_BOTTOM. */
#xjn-toggle {
  position: fixed; left: 248px; bottom: 34px; z-index: 100001;
  pointer-events: auto; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px;
  background: rgba(14,24,38,.92); color: #e9ebee;
  border: 1px solid rgba(232,184,75,.5); border-radius: 999px; padding: 7px 12px;
  font: 600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
#xjn-toggle:hover { border-color: rgba(232,184,75,.9); }
#xjn-toggle .xjn-tg-lbl { color: #F7D97C; font-weight: 800; white-space: nowrap; }
#xjn-toggle .xjn-tg-state { font-weight: 800; min-width: 20px; }
#xjn-toggle .xjn-tg-sw { position: relative; width: 38px; height: 21px; flex: 0 0 auto; border-radius: 999px; background: #333a44; transition: background .2s; }
#xjn-toggle.xjn-on .xjn-tg-sw { background: #1E6FA8; }
#xjn-toggle .xjn-tg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .2s; }
#xjn-toggle.xjn-on .xjn-tg-sw::after { left: 20px; }
@media (max-width: 600px) {
  #xjn-toggle { padding: 6px 10px; }
  #xjn-toggle .xjn-tg-lbl { display: none; }
}

/* ---- motion ---- */
@media (max-width: 600px) { .xjn-tag .en { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .xjn-strand, .xjn-greet, #xjn-accent { animation: none; }
  #xjn-feathers { display: none; }
}