/* Sparkle Effect - Glitter Image Based */
.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.sparkle {
    position: absolute;
    background-image: url('glitter.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: sparkleAnimation 4s infinite;
}

/* Size variations - 10 different sizes from small to big */
.sparkle.size-1 {
    width: 8px;
    height: 8px;
}

.sparkle.size-2 {
    width: 12px;
    height: 12px;
}

.sparkle.size-3 {
    width: 16px;
    height: 16px;
}

.sparkle.size-4 {
    width: 20px;
    height: 20px;
}

.sparkle.size-5 {
    width: 28px;
    height: 28px;
}

.sparkle.size-6 {
    width: 36px;
    height: 36px;
}

.sparkle.size-7 {
    width: 45px;
    height: 45px;
}

.sparkle.size-8 {
    width: 55px;
    height: 55px;
}

.sparkle.size-9 {
    width: 65px;
    height: 65px;
}

.sparkle.size-10 {
    width: 80px;
    height: 80px;
}

/* Positioning for static sparkles */
.sparkle:nth-child(1) {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 25%;
    right: 12%;
    animation-delay: 0.8s;
}

.sparkle:nth-child(3) {
    top: 45%;
    left: 15%;
    animation-delay: 1.6s;
}

.sparkle:nth-child(4) {
    top: 35%;
    right: 20%;
    animation-delay: 2.4s;
}

.sparkle:nth-child(5) {
    top: 65%;
    right: 8%;
    animation-delay: 3.2s;
}

.sparkle:nth-child(6) {
    top: 20%;
    left: 45%;
    animation-delay: 0.4s;
}

.sparkle:nth-child(7) {
    top: 75%;
    left: 35%;
    animation-delay: 1.2s;
}

.sparkle:nth-child(8) {
    top: 30%;
    left: 75%;
    animation-delay: 2s;
}

.sparkle:nth-child(9) {
    top: 55%;
    left: 60%;
    animation-delay: 2.8s;
}

.sparkle:nth-child(10) {
    top: 80%;
    right: 25%;
    animation-delay: 3.6s;
}

.sparkle:nth-child(11) {
    top: 10%;
    left: 25%;
    animation-delay: 1.4s;
}

.sparkle:nth-child(12) {
    top: 85%;
    left: 70%;
    animation-delay: 0.6s;
}

.sparkle:nth-child(13) {
    top: 12%;
    right: 30%;
    animation-delay: 2.2s;
}

.sparkle:nth-child(14) {
    top: 50%;
    left: 8%;
    animation-delay: 1.8s;
}

.sparkle:nth-child(15) {
    top: 38%;
    left: 50%;
    animation-delay: 3.4s;
}

.sparkle:nth-child(16) {
    top: 72%;
    right: 40%;
    animation-delay: 0.2s;
}

.sparkle:nth-child(17) {
    top: 28%;
    left: 30%;
    animation-delay: 2.6s;
}

.sparkle:nth-child(18) {
    top: 90%;
    left: 15%;
    animation-delay: 1s;
}

.sparkle:nth-child(19) {
    top: 18%;
    right: 45%;
    animation-delay: 3s;
}

.sparkle:nth-child(20) {
    top: 62%;
    left: 85%;
    animation-delay: 0.7s;
}

.sparkle:nth-child(21) {
    top: 42%;
    left: 65%;
    animation-delay: 2.9s;
}

.sparkle:nth-child(22) {
    top: 8%;
    left: 55%;
    animation-delay: 1.3s;
}

.sparkle:nth-child(23) {
    top: 78%;
    right: 15%;
    animation-delay: 3.7s;
}

.sparkle:nth-child(24) {
    top: 33%;
    right: 8%;
    animation-delay: 0.9s;
}

.sparkle:nth-child(25) {
    top: 88%;
    left: 45%;
    animation-delay: 2.1s;
}

.sparkle:nth-child(26) {
    top: 5%;
    left: 35%;
    animation-delay: 1.7s;
}

.sparkle:nth-child(27) {
    top: 95%;
    right: 35%;
    animation-delay: 3.1s;
}

.sparkle:nth-child(28) {
    top: 22%;
    left: 85%;
    animation-delay: 0.3s;
}

.sparkle:nth-child(29) {
    top: 68%;
    left: 25%;
    animation-delay: 2.7s;
}

.sparkle:nth-child(30) {
    top: 45%;
    right: 5%;
    animation-delay: 1.1s;
}

.sparkle:nth-child(31) {
    top: 82%;
    left: 55%;
    animation-delay: 3.5s;
}

.sparkle:nth-child(32) {
    top: 16%;
    right: 65%;
    animation-delay: 0.8s;
}

.sparkle:nth-child(33) {
    top: 58%;
    left: 75%;
    animation-delay: 2.3s;
}

.sparkle:nth-child(34) {
    top: 35%;
    left: 15%;
    animation-delay: 1.6s;
}

.sparkle:nth-child(35) {
    top: 75%;
    right: 55%;
    animation-delay: 3.8s;
}

.sparkle:nth-child(36) {
    top: 3%;
    left: 65%;
    animation-delay: 0.4s;
}

.sparkle:nth-child(37) {
    top: 92%;
    left: 35%;
    animation-delay: 2.8s;
}

.sparkle:nth-child(38) {
    top: 26%;
    right: 18%;
    animation-delay: 1.2s;
}

.sparkle:nth-child(39) {
    top: 64%;
    left: 45%;
    animation-delay: 3.6s;
}

.sparkle:nth-child(40) {
    top: 48%;
    right: 75%;
    animation-delay: 0.1s;
}

/* Animation keyframes */
@keyframes sparkleAnimation {
    0%, 70%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    15%, 55% {
        opacity: 0.9;
        transform: scale(1) rotate(45deg);
    }
}

/* Enhanced animations for larger sparkles */
.sparkle.size-8,
.sparkle.size-9,
.sparkle.size-10 {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
    z-index: 2;
}

/* Floating sparkle animation */
.sparkle.floating {
    animation: floatSparkle 6s ease-in-out infinite;
}

@keyframes floatSparkle {
    0%, 100% {
        opacity: 0;
        transform: translateY(0px) scale(0) rotate(0deg);
    }
    20%, 80% {
        opacity: 0.7;
        transform: translateY(-8px) scale(1) rotate(45deg);
    }
    50% {
        opacity: 0.9;
        transform: translateY(-15px) scale(1.2) rotate(90deg);
    }
}

/* Enhanced floating animation for larger sparkles */
.sparkle.size-8.floating,
.sparkle.size-9.floating,
.sparkle.size-10.floating {
    animation: floatLargeSparkle 8s ease-in-out infinite;
}

@keyframes floatLargeSparkle {
    0%, 100% {
        opacity: 0;
        transform: translateY(0px) scale(0) rotate(0deg);
    }
    20%, 80% {
        opacity: 0.8;
        transform: translateY(-15px) scale(1) rotate(45deg);
    }
    50% {
        opacity: 1;
        transform: translateY(-25px) scale(1.3) rotate(90deg);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
    }
}

/* Twinkling sparkle animation */
.sparkle.twinkle {
    animation: twinkleSparkle 3s ease-in-out infinite;
}

@keyframes twinkleSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1) rotate(180deg);
    }
}

/* Enhanced twinkling animation for larger sparkles */
.sparkle.size-8.twinkle,
.sparkle.size-9.twinkle,
.sparkle.size-10.twinkle {
    animation: twinkleLargeSparkle 4s ease-in-out infinite;
}

@keyframes twinkleLargeSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.6) rotate(0deg);
    }
    25%, 75% {
        opacity: 0.7;
        transform: scale(0.9) rotate(90deg);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
    }
}