.diwali-sky {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    overflow: hidden;
}

.diwali-sky canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.diwali-wish {
    position: absolute;
    top: auto;
    left: 78px;
    bottom: 18px;
    transform: none;
    color: #ffe9a0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px #ff9a1f, 0 0 18px #ff6a00, 0 1px 2px #5a2200;
    white-space: nowrap;
    text-align: left;
    z-index: 3;
}

.diwali-wish span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #ffc14a;
}

.sky-lantern {
    position: absolute;
    top: 0;
    width: 78px;
    height: 108px;
    margin-left: -39px;
    transform: translate3d(0, 105vh, 0);
    animation: lantern-up var(--dur, 20s) linear var(--delay, 0s) infinite both;
    transform-origin: 50% 80%;
}

.sky-lantern-paper {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 0;
    height: 84px;
    border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
    overflow: hidden;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18), inset 0 10px 16px rgba(255, 255, 255, 0.22);
}

.sky-lantern-paper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 9px,
        rgba(0, 0, 0, 0.07) 9px 10px
    );
    opacity: 0.55;
}

.sky-lantern-paper::after {
    content: "";
    position: absolute;
    left: 12%;
    top: 8%;
    width: 28%;
    height: 42%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    filter: blur(2px);
}

.sky-lantern.orange .sky-lantern-paper {
    background: linear-gradient(180deg, #ff7a18 0%, #ff9a1f 28%, #ffc14a 62%, #ffe08a 100%);
}

.sky-lantern.purple .sky-lantern-paper {
    background: linear-gradient(180deg, #4b1fd6 0%, #6d3df0 32%, #9b7bff 68%, #d4c4ff 100%);
}

.sky-lantern.pink .sky-lantern-paper {
    background: linear-gradient(180deg, #ff1f64 0%, #ff3d7a 30%, #ff6b9a 64%, #ffb0c8 100%);
}

.sky-lantern-mouth {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 46px;
    height: 26px;
    margin-left: -23px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #5a3210 0%, #1a0c04 70%);
    box-shadow: 0 0 10px rgba(255, 170, 40, 0.55), inset 0 0 0 2px rgba(255, 220, 160, 0.35);
}

.sky-lantern.purple .sky-lantern-mouth {
    box-shadow: 0 0 10px rgba(160, 120, 255, 0.45), inset 0 0 0 2px rgba(220, 200, 255, 0.35);
}

.sky-lantern.pink .sky-lantern-mouth {
    box-shadow: 0 0 10px rgba(255, 90, 140, 0.45), inset 0 0 0 2px rgba(255, 190, 210, 0.35);
}

.sky-lantern-flame {
    position: absolute;
    left: 50%;
    bottom: 7px;
    width: 8px;
    height: 20px;
    margin-left: -4px;
    border-radius: 50% 50% 45% 45%;
    background: linear-gradient(#fff8dc, #ffd24a 40%, #ff7a1a 78%, #7a2a00);
    box-shadow: 0 0 10px #ffb347, 0 0 16px #ff9a1f;
    animation: lantern-flicker 0.28s ease-in-out infinite alternate;
}

.sky-lantern-wick {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #2a1408;
}

@keyframes lantern-up {
    0% {
        transform: translate3d(0, 105vh, 0) rotate(-3deg) scale(var(--scale, 1));
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    93% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -140px, 0) rotate(3deg) scale(var(--scale, 1));
        opacity: 0;
    }
}

@keyframes lantern-flicker {
    from {
        transform: scaleY(1) scaleX(1);
        opacity: 1;
    }
    to {
        transform: scaleY(1.12) scaleX(0.88);
        opacity: 0.82;
    }
}

@media (max-width: 767px) {
    .diwali-wish {
        left: 72px;
        bottom: 72px;
        font-size: 11px;
    }

    .sky-lantern {
        width: 62px;
        height: 88px;
        margin-left: -31px;
    }

    .sky-lantern-paper {
        height: 68px;
    }

    .sky-lantern-mouth {
        width: 36px;
        height: 20px;
        margin-left: -18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sky-lantern,
    .diwali-sky canvas {
        display: none;
    }
}