#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0B0B0B;
    display: grid;
    place-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease-out;
    opacity: 1;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

#main-content {
    display: none;
}

.logo-container {
    display: grid;
    place-items: center;
}

.logo-text-wrapper {
    grid-area: 1 / 1;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation: wipeIn 1200ms cubic-bezier(0.23, 1, 0.32, 1) 1.5s forwards;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.logo-text-svg {
    height: 3.2rem;
    width: auto;
    flex-shrink: 0;
}

.logo-symbol {
    grid-area: 1 / 1;
    width: 5.4rem;
    height: 5.4rem;
    opacity: 0;
    animation: fadeInZoomOut 1500ms cubic-bezier(0.23, 1, 0.32, 1) 0s forwards;
}

.logo-symbol svg {
    width: 100%;
    height: 100%;
}

@keyframes fadeInZoomOut {
    0% {
        opacity: 0;
        transform: scale(3.5);
    }
    50% {
        opacity: 1;
        transform: scale(1) translateX(0rem);
    }
    80% {
        opacity: 1;
        transform: scale(1) translateX(0rem);
    }
    100% {
        opacity: 0;
        transform: scale(1) translateX(-5rem);
    }
}

@keyframes wipeIn {
    from { width: 0; }
    to { width: calc(3.2rem * (233 / 26)); }
}

@media (max-width: 767px) {
    .logo-text-svg {
        height: 2.4rem;
    }

    .logo-symbol {
        width: 4rem;
        height: 4rem;
    }

    @keyframes fadeInZoomOut {
        0% {
            opacity: 0;
            transform: scale(3.5);
        }
        50% {
            opacity: 1;
            transform: scale(1) translateX(0rem);
        }
        80% {
            opacity: 1;
            transform: scale(1) translateX(0rem);
        }
        100% {
            opacity: 0;
            transform: scale(1) translateX(-3.5rem);
        }
    }

    @keyframes wipeIn {
        from { width: 0; }
        to { width: calc(2.4rem * (233 / 26)); }
    }
}