/* =====================================================================
 * XBOOM Rakhi Theme — decorative overlay styles
 *
 * Hanging rakhi "bandanwar" strands (real rakhi images threaded with
 * beads + tassels) that dangle from just under the header, plus a
 * shimmering accent line, an optional greeting plaque and gentle petals.
 *
 * Purely additive. Every rule is scoped under .xrk- / #xrk- so it can
 * never touch the live theme. Every layer is pointer-events:none, so
 * nothing here can block a click on the real site.
 * ===================================================================== */

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

/* ---- falling petals stage (full viewport, click-through) ---- */
#xrk-root { position: fixed; inset: 0; pointer-events: none; z-index: 9997; overflow: hidden; }
#xrk-petals { position: absolute; inset: 0; overflow: hidden; }
.xrk-petal { position: absolute; top: -10%; opacity: 0; will-change: transform, opacity; }
.xrk-petal > div { will-change: margin-left; }
@keyframes xrk-fall {
  0%   { transform: translateY(-12vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: .85; } 90% { opacity: .85; }
  100% { transform: translateY(114vh) rotate(360deg); opacity: 0; }
}
@keyframes xrk-sway { 0% { margin-left: -14px; } 100% { margin-left: 14px; } }

/* ---- shimmering accent line on the header's bottom edge ---- */
#xrk-accent {
  position: fixed; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg,#8E1B1F,#F58A1F 22%,#F7D97C 50%,#F58A1F 78%,#8E1B1F);
  background-size: 200% 100%; box-shadow: 0 1px 10px rgba(245,138,31,.5);
}

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

/* thread segment between elements */
.xrk-seg { width: 2px; background: linear-gradient(#C9922B,#F0D583,#C9922B); }

/* beads */
.xrk-bead { border-radius: 50%; box-shadow: inset -1px -1px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3); }
.xrk-bead.gold  { background: radial-gradient(circle at 34% 30%, #FFEDB0, #E8B84B 52%, #A9781F); }
.xrk-bead.red   { background: radial-gradient(circle at 34% 30%, #F3A08C, #C0392B 52%, #7C1D20); }
.xrk-bead.pearl { background: radial-gradient(circle at 34% 30%, #FFFFFF, #DCD9EE 52%, #A9A6C6); }

/* real rakhi image */
.xrk-rakhi { line-height: 0; }
.xrk-rakhi img { filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }

/* tassel */
.xrk-tassel { line-height: 0; }
.xrk-tassel svg { display: block; }

/* ---- greeting plaque (hangs in the centre gap) ---- */
.xrk-greet {
  position: fixed; z-index: 9998; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: top center; animation: xrk-swing2 7s ease-in-out infinite;
}
@keyframes xrk-swing2 { 0%,100% { transform: translateX(-50%) rotate(-1.8deg); } 50% { transform: translateX(-50%) rotate(1.8deg); } }
.xrk-greet .str { width: 2px; height: 30px; background: linear-gradient(#C9922B,#F0D583,#C9922B); }
.xrk-tag {
  background: linear-gradient(160deg,#A62A2C,#7C1D20); border: 1.5px solid #E8B84B;
  border-radius: 12px; padding: 8px 18px; text-align: center; box-shadow: 0 8px 22px rgba(124,29,32,.45);
}
.xrk-tag .en {
  font: 800 14px/1.15 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  color: #FFE9B0; letter-spacing: .01em; white-space: nowrap;
}
.xrk-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;
}

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