.nv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── ambient firelight + drifting embers (always on, never block clicks) ── */
.nv-ambient {
    position: fixed; left: 0; bottom: 0; width: min(70vw, 560px); height: min(60vh, 460px);
    z-index: 9970; pointer-events: none;
    background: radial-gradient(circle at 0% 100%, rgba(255, 166, 52, .36), rgba(255, 120, 20, .13) 38%, transparent 70%);
    animation: nv-firelight 3.9s linear infinite;
}
.nv-ambient.nv-right {                                   /* mirror glow for the right-hand diya */
    left: auto; right: 0;
    background: radial-gradient(circle at 100% 100%, rgba(255, 166, 52, .36), rgba(255, 120, 20, .13) 38%, transparent 70%);
    animation-delay: -1.7s;                              /* the two flames don't flicker in step */
}
.nv-embers { position: fixed; inset: 0; z-index: 9980; pointer-events: none; overflow: hidden; }
.nv-ember {
    position: absolute; top: -12px; left: var(--x); width: calc(var(--s) * 1.8); height: calc(var(--s) * 1.8); border-radius: 50%;
    background: radial-gradient(circle, #fff6cf 0, var(--c) 55%, transparent 72%);
    box-shadow: 0 0 10px 4px rgba(255, 140, 30, .55);
    opacity: 0; translate: 0 0;
    animation: nv-rise var(--t) ease-in var(--d) infinite;
}

/* ── the small lit diyas in the bottom corners (decorative) ── */
.nv-lamp {
    position: fixed; z-index: 9995; padding: 0; border: 0; background: none;
    left: calc(var(--nv-lamp-left, 14px) + env(safe-area-inset-left, 0px));
    bottom: calc(var(--nv-lamp-bottom, 12px) + env(safe-area-inset-bottom, 0px));
    width: 84px; line-height: 0; transition: transform .25s;
}
.nv-lamp:hover { transform: scale(1.08) translateY(-2px); }
.nv-lamp .nv-diya { width: 100%; height: auto; overflow: visible; }
.nv-lamp::after {
    content: 'Happy Navratri'; position: absolute; left: 92%; bottom: 36%; white-space: nowrap; line-height: 1;
    padding: 8px 12px; border-radius: 999px; font: 600 13px/1 inherit; color: #5b2308;
    background: #ffe7b3; box-shadow: 0 6px 16px rgba(120, 50, 0, .28);
    opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.nv-lamp:hover::after { opacity: 1; transform: none; }

/* ── the second diya, mirrored into the bottom-right corner ── */
.nv-lamp.nv-right {
    left: auto;
    right: calc(var(--nv-lamp-left, 14px) + env(safe-area-inset-right, 0px));
}
.nv-lamp.nv-right::after { left: auto; right: 92%; transform: translateX(6px); }
.nv-lamp.nv-right:hover::after { transform: none; }
.nv-lamp.nv-right .nv-fl { animation-delay: -.8s; }      /* flames dance out of step with the left one */

/* ── the closable message at the bottom centre of the screen ── */
.nv-note {
     position: fixed;
     z-index: 9990;
     left: 50%;
     bottom: calc(18px + env(safe-area-inset-bottom, 0px));
     display: flex;
     align-items: center;
     gap: 12px;
     box-sizing: border-box;
     width: max-content;
     max-width: min(720px, calc(100vw - 230px));
     padding: 10px 10px 10px 18px;
     border-radius: 999px;
     color: #ffe9c7;
     background: linear-gradient(120deg, #55436b, #8270a0);
     border: 1px solid rgba(242, 184, 75, .45);
     box-shadow: 0 14px 34px rgba(60, 15, 0, .35), inset 0 0 18px rgba(255, 150, 40, .12);
     transform: translate(-50%, 0);
     animation: nv-note-in .6s cubic-bezier(.2, 1.2, .4, 1) both;
}

.nv-note.nv-gone { animation: nv-note-out .3s ease both; pointer-events: none; }
.nv-note-text { margin: 0; font-size: 14.5px; line-height: 1.4; color:#fff; }
.nv-note-text strong { color: #f7c653; font-weight: 700; }
.nv-note-x {
    flex: none; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    color: #ffe9c7; background: rgba(255, 233, 199, .1); border: 1px solid rgba(255, 220, 160, .35);
    transition: background .2s, color .2s, transform .2s;
}
.nv-note-x:hover { background: #ffd36b; color: #4b1409; transform: rotate(90deg); }
.nv-note-x:focus-visible { outline: 3px solid #fff1c9; outline-offset: 3px; }

/* ── the diya itself ── */
.nv-diya { display: block; overflow: visible; }
.nv-glow-g { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.nv-ig { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); opacity: 0; }
.nv-fl { transform-box: fill-box; transform-origin: 50% 100%; }
.nv-tip { opacity: 0; }
.nv-smoke { opacity: 0; stroke-dasharray: 90; }

.nv-diya.nv-on .nv-ig   { opacity: 1; animation: nv-ignite .95s cubic-bezier(.2, 1.45, .4, 1) both; }
.nv-diya.nv-on .nv-fl   { animation: nv-dance 1.7s ease-in-out .9s infinite; }
.nv-diya.nv-on .nv-glow-g { opacity: 1; animation: nv-pulse 2.6s ease-in-out infinite; }
.nv-diya.nv-on .nv-tip  { opacity: 1; animation: nv-tip 1.3s ease-in-out infinite; }
.nv-diya.nv-still .nv-ig { transform: scale(1); animation: none; }          /* already lit: no ignition show */
.nv-diya.nv-still .nv-fl { animation-delay: 0s; }
.nv-diya:not(.nv-on) .nv-smoke { animation: nv-smoke 4.2s ease-in-out infinite; }

/* ── motion ── */
@keyframes nv-note-in  { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nv-note-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 24px); } }
@keyframes nv-firelight { 0%, 100% { opacity: .78; } 9% { opacity: .96; } 23% { opacity: .7; } 37% { opacity: 1; } 52% { opacity: .82; } 66% { opacity: .95; } 83% { opacity: .72; } }
@keyframes nv-rise  { 0% { opacity: 0; translate: 0 0; scale: 1; } 10% { opacity: .95; } 80% { opacity: .55; } 100% { opacity: 0; translate: var(--dx) 105vh; scale: .3; } }
@keyframes nv-ignite { 0% { transform: scale(0); } 55% { transform: scale(1.22, 1.35); } 100% { transform: scale(1); } }
@keyframes nv-dance { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 22% { transform: scale(.93, 1.07) skewX(2.2deg); } 47% { transform: scale(1.05, .93) skewX(-2.4deg); } 71% { transform: scale(.96, 1.05) skewX(1.4deg); } }
@keyframes nv-pulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } }
@keyframes nv-tip   { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes nv-smoke { 0% { stroke-dashoffset: 90; opacity: 0; } 30% { opacity: .38; } 100% { stroke-dashoffset: -90; opacity: 0; } }

@media (max-width: 640px) {
    .nv-lamp { width: 66px; }
    .nv-lamp::after { display: none; }
    .nv-ember:nth-child(n+23) { display: none; }
    .nv-note { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 28px); }
    .nv-note-text { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .nv-embers { display: none; }
    .nv-ambient, .nv-note,
    .nv-diya .nv-ig, .nv-diya .nv-fl, .nv-diya .nv-glow-g, .nv-diya .nv-tip, .nv-diya .nv-smoke { animation: none !important; }
    .nv-diya.nv-on .nv-ig { transform: scale(1); }
}
@media print { .nv-ambient, .nv-embers, .nv-lamp, .nv-note { display: none !important; } }