body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000; 
    overflow: hidden; 
}
@media (max-width: 1920px) {
    .logo-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white; 

        position: relative; 
        overflow: hidden; 
        --final-logo-size: 450px; 
    }

    .logo-wrapper {
        width: 120vmin; 
        height: 120vmin; 
        opacity: 0; 
        transform: scale(2) rotate(0deg); 

        max-width: 90vw;   
        max-height: 90vh;  
        aspect-ratio: 1 / 1;
        z-index: 1;
        transform-origin: center center;
    }
}
.background-circle {
    position: absolute; 
    border-radius: 50%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0); 
    opacity: 0; 
    z-index: 0; 
    transition: all 0.5s ease-out; 

    --circle-base-size: var(--final-logo-size, 450px); 
}

.circle-1 {
    width: calc(var(--final-logo-size) * 1.2); 
    height: calc(var(--final-logo-size) * 1.2);
    background-color: #d16927; 
}

.circle-2 {
    width: calc(var(--final-logo-size) * 1); 
    height: calc(var(--final-logo-size) * 1);
    background-color: #B04707; 
}

.circles-active .background-circle {
    transform: translate(-50%, -50%) scale(1); 
    opacity: 1; 
    animation: colorChange 2s linear infinite alternate; 
}

.circles-active .circle-1 {
    animation-delay: 0s; 
}
.circles-active .circle-2 {
    animation-delay: 1s; 
}


@keyframes colorChange {
    0% {
        background-color: #d16927;
    }
    50% {
        background-color: #B04707;
    }
    100% {
        background-color: #d16927;
    }
}

.logo-image {
    width: 100%; 
    height: 100%; 

    object-fit: cover; 
    display: block; 
}

@keyframes shrinkAndRotate {
    0% {
        opacity: 0;
        transform: scale(2) rotate(0deg); 
        width: 120vmin; 
        height: 120vmin; 
    }
    10% {
        opacity: 1; 
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(720deg); 
        width: var(--final-logo-size);
        height: var(--final-logo-size);
    }
}

.coming-soon {
    font-family: Impact, sans-serif, sans-serif;
    font-size: 2em;
    opacity: 0; 
    color: white;
    transition: opacity 1.5s ease-in;
    margin-top: 10px;
    z-index: 2;

    -webkit-text-stroke: 2px black; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

.coming-soon.show {
    opacity: 1; 
}