/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# advent classes
# star classes
# keyframes
--------------------------------------------------------------*/

/* advent classes */
.peep {
    opacity: 0;
    filter: blur(5px);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.peep.visible {
    opacity: 1;
    filter: blur(0);
}

.peepUp {
    transform: translateY(100px);
    transition: transform 0.5s ease;
}

.peepUp.visible {
    transform: translateY(0);
}

.peepDown {
    transform: translateY(-50px);
    transition: transform 0.5s ease;
}

.peepDown.visible {
    transform: translateY(0);
}

.peepRight {
    transform: translateX(-50px);
    transition: transform 0.5s ease;
}

.peepRight.visible {
    transform: translateX(0);
}

.peepLeft {
    transform: translateX(50px);
    transition: transform 0.5s ease;
}

.peepLeft.visible {
    transform: translateX(0);
}

/* star classes */
.starfield {
    position: relative;
}

.star {
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    animation: twinkle 1.5s infinite;
}

.star:nth-child(3n){
    background-color: rgb(232, 133, 133);
}

.star:nth-child(3n-1){
    background-color: rgb(149, 152, 236);
}

.star:nth-child(3n-2){
    background-color: rgb(11, 244, 31);
}

/* keyframes */
@keyframes twinkle {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@keyframes cloud-float {
    0% { 
        transform: translateY(0) rotate(-0.5deg);
    }
    100% { 
        transform: translateY(5px) rotate(0.5deg);
    }
}

@keyframes fall {
    0% { 
        top: -50px; 
    }
    100% { 
        top: 120%; 
    }
}

@keyframes sway {
    0% {
        transform: translateX(0) rotate(0deg); 
    }
    25% {
        transform: translateX(-30px) rotate(-20deg);
    }
    50% { 
        transform: translateX(0px) rotate(0deg); 
    }
    75% { 
        transform: translateX(30px) rotate(20deg); 
    }
    100% { 
        transform: translateX(0) rotate(0deg); 
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0.1; 
    }
    to { 
        opacity: 1; 
    }
}