/* Fade in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

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

/* Zoom on hover */
.hover-zoom {
    transition: transform 0.3s ease-in-out;
}

.hover-zoom:hover {
    transform: scale(1.05);
}

/* Text fade in animation */
.animated-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Star field effect */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.star-field::before,
.star-field::after {
    content: '';
    position: absolute;
    background: transparent;
    box-shadow: 
        10px 10px #fff, 20px 30px #fff, 40px 50px #fff, 70px 80px #fff, 90px 10px #fff,
        110px 20px #fff, 130px 40px #fff, 150px 60px #fff, 170px 80px #fff, 190px 100px #fff,
        210px 10px #fff, 230px 30px #fff, 250px 50px #fff, 270px 70px #fff, 290px 90px #fff,
        310px 20px #fff, 330px 40px #fff, 350px 60px #fff, 370px 80px #fff, 390px 100px #fff,
        410px 10px #fff, 430px 30px #fff, 450px 50px #fff, 470px 70px #fff, 490px 90px #fff,
        510px 20px #fff, 530px 40px #fff, 550px 60px #fff, 570px 80px #fff, 590px 100px #fff,
        610px 10px #fff, 630px 30px #fff, 650px 50px #fff, 670px 70px #fff, 690px 90px #fff,
        710px 20px #fff, 730px 40px #fff, 750px 60px #fff, 770px 80px #fff, 790px 100px #fff,
        810px 10px #fff, 830px 30px #fff, 850px 50px #fff, 870px 70px #fff, 890px 90px #fff;
    animation: twinkle 10s infinite alternate;
}

.star-field::after {
    box-shadow: 
        5px 5px #fff, 15px 25px #fff, 35px 45px #fff, 65px 75px #fff, 85px 5px #fff,
        105px 15px #fff, 125px 35px #fff, 145px 55px #fff, 165px 75px #fff, 185px 95px #fff,
        205px 5px #fff, 225px 25px #fff, 245px 45px #fff, 265px 65px #fff, 285px 85px #fff,
        305px 15px #fff, 325px 35px #fff, 345px 55px #fff, 365px 75px #fff, 385px 95px #fff,
        405px 5px #fff, 425px 25px #fff, 445px 45px #fff, 465px 65px #fff, 485px 85px #fff,
        505px 15px #fff, 525px 35px #fff, 545px 55px #fff, 565px 75px #fff, 585px 95px #fff,
        605px 5px #fff, 625px 25px #fff, 645px 45px #fff, 665px 65px #fff, 685px 85px #fff,
        705px 15px #fff, 725px 35px #fff, 745px 55px #fff, 765px 75px #fff, 785px 95px #fff,
        805px 5px #fff, 825px 25px #fff, 845px 45px #fff, 865px 65px #fff, 885px 85px #fff;
    animation: twinkle 10s infinite alternate;
    animation-delay: 2s; /* Offset animation for a more varied twinkle */
}

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

/* Modal Animations */
.modal-enter {
    opacity: 0;
}
.modal-enter .modal-content {
    transform: scale(0.9);
}
.modal-enter-active {
    opacity: 1;
    transition: opacity 300ms;
}
.modal-enter-active .modal-content {
    transform: scale(1);
    transition: transform 300ms;
}
.modal-exit {
    opacity: 1;
}
.modal-exit .modal-content {
    transform: scale(1);
}
.modal-exit-active {
    opacity: 0;
    transition: opacity 300ms;
}
.modal-exit-active .modal-content {
    transform: scale(0.9);
    transition: transform 300ms;
}