/* 
 * The cover hides everything at the beginning, and then the circles come in on top.
 *
 * The startupRandomization script sets the variables for the circles (in the :root) rule below
 * and the javascript will remove all the elements after the animation is done
 */


/* placeholder values, overwritten by js */
:root {
    --circle-animation-length: 1s;
    --name-animation-delay: calc(var(--circle-animation-length) - 0.2s);
    --circle-1-start-left: 50%;
    --circle-1-start-top: 50%;
    --circle-2-start-left: 50%;
    --circle-2-start-top: 50%;
    --circle-3-start-left: 50%;
    --circle-3-start-top: 50%;
}

#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
}

.start-circle {
    position: absolute;
    width: 0px;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: var(--color-1);
    transform: translateX(-50%) translateY(-50%);
    animation: grow-circle var(--circle-animation-length) linear forwards;
}
#circle1 {
    top: var(--circle-1-start-top);
    left: var(--circle-1-start-left);
}
#circle2 {
    top: var(--circle-2-start-top);
    left: var(--circle-2-start-left);
}
#circle3 {
    top: var(--circle-3-start-top);
    left: var(--circle-3-start-left);
}

@keyframes grow-circle {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}