/* Diwali decorations — customer site only (colours/buttons untouched). Loaded from partials/head.php while diwali_theme_active(). */

/* draped string lights (swags are SVG, repeated across the width) */
.diwali-lights {
    display: flex;
    position: fixed; top: 0; left: 0; right: 0;
    height: 36px;
    overflow: hidden;
    z-index: 120;
    line-height: 0;
    pointer-events: none;
}
.diwali-swag { flex: 0 0 240px; }
.diwali-swag .glow { opacity: .3; animation: diwaliBulbGlow 2.4s ease-in-out infinite; }
.diwali-swag .core { opacity: .55; animation: diwaliBulbCore 2.4s ease-in-out infinite; }
.diwali-swag .d1 { animation-delay: .6s; }
.diwali-swag .d2 { animation-delay: 1.2s; }
.diwali-swag .d3 { animation-delay: 1.8s; }
@keyframes diwaliBulbGlow { 0%, 100% { opacity: .15; } 50% { opacity: .45; } }
@keyframes diwaliBulbCore { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

/* akash kandil (hanging lanterns) */
.diwali-kandils {
    position: fixed; left: 0; right: 0; top: 0; height: 0;
    z-index: 120; pointer-events: none;
}
.diwali-kandil {
    position: absolute; top: 0; width: 52px;
    padding-top: 70px; /* long rope: the lantern hangs lower */
    transform-origin: 50% 0;
    animation: diwaliSwing 4s ease-in-out infinite;
}
.diwali-kandil::before {
    content: ""; position: absolute; top: -2px; left: 50%; width: 2px; height: 74px;
    margin-left: -1px; background: linear-gradient(#c9a96a, #333);
}
/* small gold knot where the rope meets the lights wire */
.diwali-kandil::after {
    content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px;
    margin-left: -3px; border-radius: 50%; background: #c9a96a;
}
.diwali-kandil svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 8px rgba(255, 170, 40, .7)); }
.diwali-kandil.k-left  { left: 2px; }
.diwali-kandil.k-right { right: 4px; animation-delay: -2s; }
@keyframes diwaliSwing { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }

/* diyas on both sides of every filled button (Add to cart, Buy now, hero buttons...) */
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm),
.hc-hero-btn {
    position: relative;
}
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm)::before,
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm)::after,
.hc-hero-btn::before,
.hc-hero-btn::after {
    content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1c3 3.4 4 5.6 2.6 8-.5.9-1.6.9-2.6.9s-2.100 0-2.600-.9C8 6.600 9 4.400 12 1z' fill='%23ffb300'/><path d='M12 4.500c1.600 1.800 2 3 1.200 4.200-.3.500-.8.500-1.200.5s-.9 0-1.200-.5C10 7.500 10.400 6.300 12 4.500z' fill='%23fff3b0'/><path d='M1 12.500h22c0 5-4.500 8.500-11 8.500S1 17.500 1 12.500z' fill='%23d8892b'/><path d='M1 12.500h22' stroke='%23f7c04a' stroke-width='2.200' stroke-linecap='round'/><path d='M7 22.500h10' stroke='%23b86f1d' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 190, 40, .85));
    pointer-events: none;
    animation: diwaliDiya 1.8s ease-in-out infinite;
}
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm)::before,
.hc-hero-btn::before { left: 9px; }
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm)::after,
.hc-hero-btn::after { right: 9px; animation-delay: -.9s; }
/* buttons that already carry an icon on one side keep it: diya only on the free side */
.site-btn.icn-bf::before, .site-btn.icn-af::after { display: none; }
.site-btn:not(.site-blue-outline-btn):not(.btn-outline-danger):not(.btn-outline-secondary):not(.no-text):not(.btn-sm),
.hc-hero-btn { padding-left: 32px; padding-right: 32px; }
.site-btn.icn-bf:not(.no-text) { padding-left: 36px; padding-right: 34px; }
.site-btn.icn-af:not(.no-text) { padding-left: 34px; padding-right: 36px; }
.psp-add-cart-btn { padding-left: 36px !important; padding-right: 34px !important; }
@keyframes diwaliDiya { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 190, 40, .6)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 190, 40, 1)); } }

/* firecracker canvas */
#diwaliFireworks { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

@media (max-width: 575px) {
    .diwali-kandil { width: 34px; padding-top: 44px; }
    .diwali-kandil::before { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .diwali-swag .glow, .diwali-swag .core, .diwali-kandil { animation: none; }
    .site-btn::before, .site-btn::after, .hc-hero-btn::before, .hc-hero-btn::after { animation: none !important; }
    #diwaliFireworks { display: none; }
}