/* Contenedor para mantener la posición fija del logo */
#Logo_Rasti {
    position: relative;
    width: 128px;
    height: 100px;
}

/* Ajuste inicial para cada página */
#page_left {
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

#page_right {
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

#page_medium_left {
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

#page_center {
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

#page_star {
    position: absolute;
    bottom: 0;
    transform-origin: bottom;
}

/* Animación de apertura de las páginas */
@keyframes openLeftRight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-45deg);
    }
}

@keyframes openMiddle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-30deg);
    }
}

@keyframes openStar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(30deg);
    }
}

/* Animación de brillo para las estrellas */
@keyframes starGlow {
    0% {
        fill: #545455;
    }

    100% {
        fill: yellow;
    }
}

/* Aplicando animaciones a los elementos */
#page_left {
    animation: openLeftRight 1s ease-in-out forwards;
}

#page_right {
    animation: openLeftRight 1s ease-in-out forwards;
}

#page_medium_left {
    animation: openMiddle 1s ease-in-out forwards;
    animation-delay: 0.5s;
}

#page_center {
    animation: openMiddle 1s ease-in-out forwards;
    animation-delay: 0.5s;
}

#page_star {
    animation: openStar 1s ease-in-out forwards;
    animation-delay: 0.5s;
}

#big_star, #medium_star, #small_star {
    animation: starGlow 0.5s ease-in-out forwards;
    animation-delay: 1s;
}