.star,
.snowflake,
.firefly,
.bokeh,
.bubble,
.glitter,
.shape,
.aurora {
    position: absolute;
    pointer-events: none;
}

/* === Stars === */
.star {
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 2s infinite ease-in-out;
}

@keyframes twinkle {
    0% {
        opacity: 0.2
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0.2
    }
}

.snowflake {
    background: white;
    border-radius: 50%;
    opacity: 0.8;
}

@keyframes fallDown {
    0% {
        transform: translateY(-10vh);
        opacity: 1;
    }

    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

@keyframes fallUp {
    0% {
        transform: translateY(20vh);
        opacity: 0.8;
    }

    100% {
        transform: translateY(-120vh);
        opacity: 0;
    }
}

.firefly {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 180, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 10px 4px rgba(255, 255, 150, 0.8);
    animation: fireflyMove 4s infinite ease-in-out;
}

@keyframes fireflyMove {
    0% {
        transform: translate(0, 0) scale(.7);
        opacity: .6;
    }

    50% {
        transform: translate(25px, -30px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-20px, 20px) scale(.7);
        opacity: .6;
    }
}

.bokeh {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    filter: blur(12px);
    animation: bokehFloat 8s infinite alternate ease-in-out;
}

@keyframes bokehFloat {
    from {
        transform: translateY(20px) scale(1);
    }

    to {
        transform: translateY(-40px) scale(1.3);
    }
}

.bubble {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: bubbleUp 6s infinite ease-in-out;
}

@keyframes bubbleUp {
    0% {
        transform: translateY(40px) scale(.5);
        opacity: 0;
    }

    30% {
        opacity: .8;
    }

    100% {
        transform: translateY(-120vh) scale(1.3);
        opacity: 0;
    }
}

.glitter {
    background: white;
    border-radius: 50%;
    filter: blur(1px);
    animation: glitterTwinkle 1.2s infinite ease-in-out;
}

@keyframes glitterTwinkle {
    0% {
        opacity: .1;
        transform: scale(.5);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: .1;
        transform: scale(.5);
    }
}

.shape {
    opacity: 0.25;
    animation: shapeFloat 10s infinite ease-in-out;
}

.shape.circle {
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

.shape.square {
    background: rgba(255, 255, 255, .4);
}

.shape.triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid rgba(255, 255, 255, 0.5);
}

@keyframes shapeFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(40px, -30px) rotate(180deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.aurora {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(2px);
    animation: auroraMove 6s infinite ease-in-out;
}

@keyframes auroraMove {
    0% {
        transform: translate(0, 0);
        opacity: .3;
    }

    50% {
        transform: translate(30px, -20px);
        opacity: 1;
    }

    100% {
        transform: translate(-20px, 25px);
        opacity: .3;
    }
}