/**
 * Diwali fireworks overlay + floating replay button.
 * Black stage + mix-blend-mode:screen on the overlay itself
 * → website stays visible, only bright fireworks show.
 */

#diwali-welcome-overlay.diwali-cm-overlay,
.diwali-cm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    /* Black + screen on THIS element (not a child) so it blends with the site */
    background: #000;
    opacity: 0;
    /* no opacity transition — opacity < 1 blocks mix-blend-mode with the page */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: none;
    mix-blend-mode: normal;
}

#diwali-welcome-overlay.diwali-cm-overlay.is-open,
.diwali-cm-overlay.is-open {
    opacity: 1;
    mix-blend-mode: screen;
}

#diwali-welcome-overlay.diwali-cm-overlay.is-closing,
.diwali-cm-overlay.is-closing {
    opacity: 0;
    mix-blend-mode: normal;
}

.diwali-cm-frame {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    pointer-events: none;
}

#diwali-firecracker-btn {
    position: fixed;
    /* Right side, stacked above .fixed-call-btn (bottom: 80px, 50px tall) */
    right: 20px;
    left: auto;
    bottom: 144px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #182752;
    color: #fff;
    box-shadow: 0 8px 22px rgba(24, 39, 82, 0.35);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

#diwali-firecracker-btn:hover,
#diwali-firecracker-btn:focus {
    background: #cc553d;
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(204, 85, 61, 0.4);
    outline: none;
}

#diwali-firecracker-btn:active {
    transform: scale(0.96);
}

#diwali-firecracker-btn.is-playing {
    background: #cc553d;
}

#diwali-firecracker-btn .diwali-fc-icon {
    font-size: 22px;
    line-height: 1;
    display: block;
    pointer-events: none;
    transform-origin: center center;
    animation: diwaliFcShake 3.5s ease-in-out infinite;
}

/* Stop icon shown while fireworks are playing */
#diwali-firecracker-btn .diwali-fc-stop {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #fff;
    pointer-events: none;
}

@keyframes diwaliFcShake {
    0%, 82%, 100% { transform: translate(0, 0) rotate(0deg); }
    84% { transform: translate(-2px, 1px) rotate(-8deg); }
    86% { transform: translate(3px, -1px) rotate(8deg); }
    88% { transform: translate(-3px, 2px) rotate(-6deg); }
    90% { transform: translate(2px, -2px) rotate(6deg); }
    92% { transform: translate(-1px, 1px) rotate(-3deg); }
    94% { transform: translate(0, 0) rotate(0deg); }
}

/* First-visit: tap to unlock fireworks audio (outside screen-blend overlay) */
#diwali-sound-enable-btn {
    position: fixed;
    right: 20px;
    bottom: 208px;
    z-index: 10060;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 16px 0 14px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: #182752;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 22px rgba(24, 39, 82, 0.4);
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    animation: diwaliSoundPulse 1.8s ease-in-out infinite;
}

#diwali-sound-enable-btn.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#diwali-sound-enable-btn:hover,
#diwali-sound-enable-btn:focus {
    background: #cc553d;
    outline: none;
}

#diwali-sound-enable-btn .diwali-sound-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#diwali-sound-enable-btn .diwali-sound-label {
    pointer-events: none;
    white-space: nowrap;
}

@keyframes diwaliSoundPulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(24, 39, 82, 0.4); }
    50% { box-shadow: 0 8px 28px rgba(204, 85, 61, 0.55), 0 0 0 6px rgba(204, 85, 61, 0.18); }
}

@media (max-width: 768px) {
    #diwali-firecracker-btn {
        /* Above mobile .fixed-call-btn (bottom: 20px, ~55px tall) */
        right: 20px;
        left: auto;
        bottom: 90px;
        width: 46px;
        height: 46px;
    }
    #diwali-firecracker-btn .diwali-fc-icon { font-size: 20px; }

    #diwali-sound-enable-btn {
        right: 20px;
        bottom: 150px;
        height: 46px;
        padding: 0 14px 0 12px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diwali-cm-overlay,
    #diwali-firecracker-btn,
    #diwali-sound-enable-btn {
        display: none !important;
    }
}