/* 3D Diya Emoji Effects */
.diya-3d-effect {
    display: inline-block;
    text-shadow: 
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
    transform: perspective(500px) rotateX(10deg);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes diyaGlow {
    0% {
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
        text-shadow: 
            0 1px 0 #ccc,
            0 2px 0 #c9c9c9,
            0 3px 0 #bbb,
            0 4px 0 #b9b9b9,
            0 5px 0 #aaa,
            0 6px 1px rgba(0,0,0,.1),
            0 0 5px rgba(0,0,0,.1),
            0 1px 3px rgba(0,0,0,.3),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 10px rgba(0,0,0,.25),
            0 10px 10px rgba(0,0,0,.2),
            0 20px 20px rgba(0,0,0,.15);
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.8));
        text-shadow: 
            0 1px 0 #ccc,
            0 2px 0 #c9c9c9,
            0 3px 0 #bbb,
            0 4px 0 #b9b9b9,
            0 5px 0 #aaa,
            0 6px 1px rgba(0,0,0,.1),
            0 0 5px rgba(0,0,0,.1),
            0 1px 3px rgba(0,0,0,.3),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 10px rgba(0,0,0,.25),
            0 10px 10px rgba(0,0,0,.2),
            0 20px 20px rgba(0,0,0,.15),
            0 0 20px rgba(255, 165, 0, 0.5);
    }
}

.diya-3d-effect:hover {
    transform: perspective(500px) rotateX(10deg) scale(1.1);
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9));
}

/* Flame flickering animation */
@keyframes flameFlicker {
    0% {
        transform: scale(1) rotate(-1deg) skewX(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
    10% {
        transform: scale(1.05) rotate(1deg) skewX(2deg);
        filter: hue-rotate(5deg) brightness(1.1);
    }
    20% {
        transform: scale(0.98) rotate(-0.5deg) skewX(-1deg);
        filter: hue-rotate(-2deg) brightness(0.9);
    }
    30% {
        transform: scale(1.02) rotate(0.8deg) skewX(1deg);
        filter: hue-rotate(3deg) brightness(1.05);
    }
    40% {
        transform: scale(1.03) rotate(-0.3deg) skewX(0deg);
        filter: hue-rotate(-1deg) brightness(1.02);
    }
    50% {
        transform: scale(0.99) rotate(1.2deg) skewX(-1deg);
        filter: hue-rotate(4deg) brightness(0.95);
    }
    60% {
        transform: scale(1.04) rotate(-0.7deg) skewX(2deg);
        filter: hue-rotate(-3deg) brightness(1.08);
    }
    70% {
        transform: scale(1.01) rotate(0.4deg) skewX(0deg);
        filter: hue-rotate(2deg) brightness(1.01);
    }
    80% {
        transform: scale(1.06) rotate(-1.1deg) skewX(1deg);
        filter: hue-rotate(-4deg) brightness(1.12);
    }
    90% {
        transform: scale(0.97) rotate(0.6deg) skewX(-1deg);
        filter: hue-rotate(3deg) brightness(0.93);
    }
    100% {
        transform: scale(1) rotate(0deg) skewX(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* Apply flame animation to the diya */
.diya-3d-effect {
    animation: diyaGlow 2s ease-in-out infinite alternate, flameFlicker 3s ease-in-out infinite;
}

/* Diya celebration animations */
@keyframes diyaFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes flameFlickerCelebration {
    0% {
        transform: translateX(-50%) scaleY(1) rotate(-2deg);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scaleY(1.2) rotate(2deg);
        opacity: 1;
    }
}

@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes rangoliFloat {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 0.7;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.floating-diya {
    animation-fill-mode: both;
}

/* Balloon celebration animations */
@keyframes balloonFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(10deg);
        opacity: 0;
    }
}

.celebration-balloon {
    animation-fill-mode: both;
}