.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.-mt-64 { margin-top: -16rem; }
.-mt-\[22\%\] { margin-top: -22%; }
.flex { display: flex; }
.h-\[680px\] { height: 680px; }
.h-\[88px\] { height: 88px; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.pt-64 { padding-top: 16rem; }

@media (min-width: 640px) {
    .sm\:mt-0 { margin-top: 0; }
    .lightbar, .lightbar-visual { width: 150vw; }
    [dir=ltr] .lightbar { left: -25vw; transform: initial; }
}

.lightbar, .lightbar-visual {
    position: absolute;
    width: 150vw;
    height: 800px;
    pointer-events: none;
    user-select: none;
}

.lightbar {
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    --d: 3s;
    --animation: cubic-bezier(.75, 0, .25, 1);
    animation: boot var(--d) var(--animation) forwards;
}

.lightbar-visual {
    left: 0;
    --top: rgb(var(--colors-background-main) / 1);
    --bottom: rgb(var(--colors-lightBar-light) / 1);
    --first: conic-gradient(from 90deg at 80% 50%, var(--top), var(--bottom));
    --second: conic-gradient(from 270deg at 20% 50%, var(--bottom), var(--top));
    -webkit-mask-image: radial-gradient(100% 50% at center center, black, transparent);
    mask-image: radial-gradient(100% 50% at center center, black, transparent);
    background-image: var(--first), var(--second);
    background-position: 1% 0%, 99% 0%;
    background-size: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    transform: rotate(180deg) translateZ(0) translateY(400px);
    transform-origin: center center;
    animation: lightbarBoot var(--d) var(--animation) forwards;
}

@keyframes boot {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
}

@keyframes lightbarBoot {
    0% { transform: rotate(180deg) translateZ(0) translateY(400px) scaleX(0.8); }
    100% { transform: rotate(180deg) translateZ(0) translateY(400px) scaleX(1); }
}

@media (max-width: 639px) {
    .lightbar, .lightbar-visual { width: 500vw; }
}