@keyframes siteAnimation {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
#mainSite {
    animation: siteAnimation 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

#logoWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo {
    position: relative;
    width: min(80vw, 80vh);
    height: min(80vw, 80vh);
}

#logoBlock1 {
    position: absolute;
    width: 67.40%;
    height: 29.75%;
    top: 0;
    left: 0;
}

#logoBlock2 {
    position: absolute;
    width: 29.75%;
    height: 67.40%;
    top: 0;
    right: 0;
}

#logoBlock3 {
    position: absolute;
    width: 29.75%;
    height: 67.40%;
    bottom: 0;
    left: 0;
}

#logoBlock4 {
    position: absolute;
    width: 67.40%;
    height: 29.75%;
    bottom: 0;
    right: 0;
}

/* Block 1 Animations */
@keyframes bar1F {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    8% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1f {
    animation: bar1F 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar1E {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    8% {
        transform: translateX(calc(-100vw - 100%));
    }
    16% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1e {
    animation: bar1E 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar1D {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    16% {
        transform: translateX(calc(-100vw - 100%));
    }
    24% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1d {
    animation: bar1D 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar1C {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    24% {
        transform: translateX(calc(-100vw - 100%));
    }
    32% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1c {
    animation: bar1C 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar1B {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    32% {
        transform: translateX(calc(-100vw - 100%));
    }
    40% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1b {
    animation: bar1B 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar1A {
    0% {
        transform: translateX(calc(-100vw - 100%));
    }
    40% {
        transform: translateX(calc(-100vw - 100%));
    }
    48% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar1a {
    animation: bar1A 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

/* Block 2 Animations */
@keyframes bar2F {
    0% {
        transform: translateY(calc(- 100vh - 100%));
    }
    8% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2f {
    animation: bar2F 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar2E {
    0% {
        transform: translateY(calc(-100vh - 100%));
    }
    8% {
        transform: translateY(calc(-100vh - 100%));
    }
    16% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2e {
    animation: bar2E 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar2D {
    0% {
        transform: translateY(calc(-100vh - 100%));
    }
    16% {
        transform: translateY(calc(-100vh - 100%));
    }
    24% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2d {
    animation: bar2D 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar2C {
    0% {
        transform: translateY(calc(-100vh - 100%));
    }
    24% {
        transform: translateY(calc(-100vh - 100%));
    }
    32% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2c {
    animation: bar2C 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar2B {
    0% {
        transform: translateY(calc(-100vh - 100%));
    }
    32% {
        transform: translateY(calc(-100vh - 100%));
    }
    40% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2b {
    animation: bar2B 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar2A {
    0% {
        transform: translateY(calc(-100vh - 100%));
    }
    40% {
        transform: translateY(calc(-100vh - 100%));
    }
    48% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar2a {
    animation: bar2A 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

/* Block 3 Animations */
@keyframes bar3C {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    8% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3c {
    animation: bar3C 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar3B {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    8% {
        transform: translateY(calc(100vh + 100%));
    }
    16% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3b {
    animation: bar3B 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar3A {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    16% {
        transform: translateY(calc(100vh + 100%));
    }
    24% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3a {
    animation: bar3A 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar3F {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    24% {
        transform: translateY(calc(100vh + 100%));
    }
    32% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3f {
    animation: bar3F 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar3E {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    32% {
        transform: translateY(calc(100vh + 100%));
    }
    40% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3e {
    animation: bar3E 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar3D {
    0% {
        transform: translateY(calc(100vh + 100%));
    }
    40% {
        transform: translateY(calc(100vh + 100%));
    }
    48% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar3d {
    animation: bar3D 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

/* Block 4 Animations */
@keyframes bar4C {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    8% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4c {
    animation: bar4C 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar4B {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    8% {
        transform: translateX(calc(100vw + 100%));
    }
    16% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4b {
    animation: bar4B 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar4A {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    16% {
        transform: translateX(calc(100vw + 100%));
    }
    24% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4a {
    animation: bar4A 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar4F {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    24% {
        transform: translateX(calc(100vw + 100%));
    }
    32% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4f {
    animation: bar4F 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar4E {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    32% {
        transform: translateX(calc(100vw + 100%));
    }
    40% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4e {
    animation: bar4E 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

@keyframes bar4D {
    0% {
        transform: translateX(calc(100vw + 100%));
    }
    40% {
        transform: translateX(calc(100vw + 100%));
    }
    48% {
        transform: translate(0px);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#logoBar4d {
    animation: bar4D 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

/* Logo Animation */
@keyframes logoAnimation {
    0% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#logo {
    animation: logoAnimation 1.5s ease forwards;
    display: none;
    animation-delay: 10s;
}

#logoBar1a,
#logoBar4a,
#logoBar1d,
#logoBar4d {
    position: absolute;
    width: 71.28%;
    height: 26.79%;
    background-color: #25affc;
    color-scheme: light;
}

#logoBar1b,
#logoBar4b,
#logoBar1e,
#logoBar4e {
    position: absolute;
    width: 47.52%;
    height: 26.79%;
    background-color: #25affc;
    color-scheme: light;
}

#logoBar1c,
#logoBar4c,
#logoBar1f,
#logoBar4f {
    position: absolute;
    width: 23.76%;
    height: 26.79%;
    background-color: #25affc;
    color-scheme: light;
}

#logoBar1a,
#logoBar4a {
    bottom: 0;
    left: 0;
}

#logoBar1b,
#logoBar4b {
    top: 36.605%;
    left: 0;
}

#logoBar1c,
#logoBar4c {
    top: 0;
    left: 0;
}

#logoBar1d,
#logoBar4d {
    top: 0;
    right: 0;
}

#logoBar1e,
#logoBar4e {
    top: 36.605%;
    right: 0;
}

#logoBar1f,
#logoBar4f {
    bottom: 0;
    right: 0;
}

#logoBar2a,
#logoBar3a,
#logoBar2d,
#logoBar3d {
    position: absolute;
    width: 26.79%;
    height: 71.28%;
    background-color: #25affc;
}

#logoBar2b,
#logoBar3b,
#logoBar2e,
#logoBar3e {
    position: absolute;
    width: 26.79%;
    height: 47.52%;
    background-color: #25affc;
}

#logoBar2c,
#logoBar3c,
#logoBar2f,
#logoBar3f {
    position: absolute;
    width: 26.79%;
    height: 23.76%;
    background-color: #25affc;
}

#logoBar2a,
#logoBar3a {
    top: 0;
    left: 0;
}

#logoBar2b,
#logoBar3b {
    top: 0;
    left: 36.605%;
}

#logoBar2c,
#logoBar3c {
    top: 0;
    right: 0;
}

#logoBar2d,
#logoBar3d {
    bottom: 0;
    right: 0;
}

#logoBar2e,
#logoBar3e {
    bottom: 0;
    left: 36.605%;
}

#logoBar2f,
#logoBar3f {
    bottom: 0;
    left: 0;
}