/*-------------------------------*/
/*-----------Preload-------------*/
/*--------------------------------*/
body:not(.loaded) #logo_home {
    display: none !important;
}


body.loaded #preloader1 {
    display: none !important;
}

body.loaded #logo_home
{
    display: block !important;
}
#preloader1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    /* Mobile fixes */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.preloader1-container {
    position: relative;
    width: 90px;
    height: 90px;
    /* Perfect centering that works on mobile */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    /* Mobile viewport fixes */
    max-width: 90vw;
    max-height: 90vh;
}

/* Front layer - Bird animation */
.bird-front {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    animation: birdDrop 1.2s ease-in-out forwards;
    z-index: 2;
    max-width: 60px;
    max-height: 60px;
}

/* Back layer - Spinning animation */
.spinner-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: spinWithPause 4s 0.7s infinite;
    z-index: 1;
    max-width: 70px;
    max-height: 70px;
}
.logo-animated-container {
    position: relative;
    width: 90px;
    height: 90px;

    max-width: 90vw;
    max-height: 90vh;
}
/* Bird drop and morph animation */
@keyframes birdDrop {
    0% {
        top: -40px;
        transform: translateX(-50%) scale(1, 1);
    }
    10% {
        top: 50%;
        transform: translate(-50%, -50%) scale(1, 1);
    }
    45% {
        transform: translate(-50%, -50%) scale(1.33, 0.67); /* Stretch width, shrink height */
    }
    80% {
        transform: translate(-50%, -50%) scale(1, 1); /* Return to normal */
    }
    100% {
        top: 50%;
        transform: translate(-50%, -50%) scale(1, 1);
        opacity: 1;
    }
}

/* Spinning with pause animation */
@keyframes spinWithPause {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(0deg);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(360deg);
    }
    41%, 90% {
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(360deg);
    }
}