.launch-page {
    --color1: #a4ccff;
    --color2: #ffcca4;
    --color3: var(--orangecolor);
    width: 100svw;
    height: 100svh;
    display: grid;
    place-content: center;
    direction: ltr;
}

.launch-grid {
    display: grid;
    grid-template-rows: min-content min-content 2rem auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "title"
        "line"
        "."
        "loader";
    justify-items: center;
}

.launch-title {
    grid-area: title;
    width: 140%;
    display: flex;
    justify-content: space-between;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;

    span {
        display: block;
        opacity: 0;
        rotate: -90deg;
        animation: letter-anim 0.5s ease forwards normal;
        animation-delay: calc(sibling-index() * 0.1s);
    }

        span:nth-child(2n) {
            color: var(--color1);
        }

        span:nth-child(2n+1) {
            color: var(--color2);
        }
}

@keyframes letter-anim {
    100% {
        opacity: 1;
        rotate: 0deg;
    }
}


.line {
    grid-area: line;
    height: 3px;
    width: 140%;
    transform: scaleX(var(--blazor-load-percentage));
/*    transform: scaleX(1);*/
    transform-origin: center;
    background: linear-gradient(90deg, transparent 0%, var(--color3) 20%, var(--color3) 80%, transparent 100%);
}


.launch-loader {
    grid-area: loader;
    width: 23svh;
    aspect-ratio: 1;
    display: grid;
    grid-template-areas: "stack";
    isolation: isolate;
}

.launch-rotation {
    grid-area: stack;
    border-radius: 100rem;
    border: 1rem transparent solid;
    border-block-start-color: var(--color1);
    border-block-end-color: var(--color2);
    animation: rotate 2s 0s forwards normal ease infinite;
    z-index: 0;
}

.launch-percentage {
    z-index: 1;
    grid-area: stack;
    position: relative;
    display: grid;
    place-items: center;
    line-height: 1;
}

    .launch-percentage::after {
        position: absolute;
        content: var(--blazor-load-percentage-text);
        color: var(--color3);
        font-size: 4.6svh;
    }

@keyframes rotate {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 1440deg;
    }
}