/* Logo */
:root {
    --global-delay: 2s;
}

.fret-text, .petal-color, .lotus-text {
    fill: #DB34A1;
}

.dna-color-0 {
    fill: #c3218e;
}

.dna-color-1 {
    fill: #d6509d;
}

.dna-color-2 {
    fill: #ec7fb3;
}

.dna-color-3 {
    fill: #bc1c86;
}

.leaf-color {
    fill: #4c916b;
}

.lotus-text {
    font-size: 139.6px;
}

.fret-text {
    font-size: 46.53px;
}

.fret-text, .lotus-text {
    font-family: Arial-Black, 'Arial Black';
}

.fret-text, .lotus-text {
    display: none;
}

/* end of static logo css*/

.dna-color-0 {
    animation: 2s appear calc(var(--global-delay) + 0.8s) ease forwards, dna-blink 2s infinite alternate ease;
}

.dna-color-1 {
    animation: 2s appear calc(var(--global-delay) + 0.8s) ease forwards, dna-blink 2.3s infinite alternate-reverse ease;
}

.dna-color-2 {
    animation: 2s appear calc(var(--global-delay) + 0.8s) ease forwards, dna-blink 2.6s infinite alternate-reverse ease;
}

.dna-color-3 {
    animation: 2s appear calc(var(--global-delay) + 0.8s) ease forwards, dna-blink 1.8s infinite alternate ease;
}

@keyframes dna-blink {
    from {
        filter: brightness(130%);
    }
    to {
        filter: brightness(90%);
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes left-leaf-rotate {
    from {
        transform: rotate(20deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@keyframes right-leaf-rotate {
    from {
        transform: rotate(-20deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@keyframes llpetal {
    from {
        transform: translateX(100px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes lpetal {
    from {
        transform: translateX(50px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes rrpetal {
    from {
        transform: translateX(-100px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes rpetal {
    from {
        transform: translateX(-50px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes topspiral {
    from {
        transform: translateX(30px)
    }
    to {
        transform: translateX(0)
    }
}

@keyframes botspiral {
    from {
        transform: translateX(-30px)
    }
    to {
        transform: translateX(0)
    }
}

.dna-color-0, .dna-color-1, .dna-color-2, .dna-color-3 {
    opacity: 0;
}

#right-leaf, #left-leaf {
    transform-origin: center;
}

#bottom-spiral {
    animation: appear 1.2s ease var(--global-delay), botspiral 1.2s ease var(--global-delay);
}

#top-spiral {
    animation: appear 1.2s ease var(--global-delay) topspiral 1.2s ease var(--global-delay);
}

#right-leaf {
    animation: right-leaf-rotate 2s ease var(--global-delay), appear 2s ease var(--global-delay);
}

#left-leaf {
    animation: left-leaf-rotate 2s ease var(--global-delay), appear 2s ease var(--global-delay);
}

#llpetal {
    animation: llpetal 2s ease var(--global-delay), appear 2s ease var(--global-delay);
}

#rrpetal {
    animation: rrpetal 2s ease var(--global-delay), appear 2s ease var(--global-delay);
}

#lpetal {
    animation: lpetal 1.4s ease var(--global-delay), appear 1.4s ease var(--global-delay);
}

#rpetal {
    animation: rpetal 1.4s ease var(--global-delay), appear 1.4s ease var(--global-delay);
}

@keyframes show {
    from {
        opacity: 0;
    }
    to {
        opacity: 100%;
    }
}

#lotus_logo {
    height: 60%;
    opacity: 0;
    animation: show 0.2s linear var(--global-delay) forwards;
    position: relative;
    top: 35%;
}