.dia-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.dia-gradient-bg .gradient-bar {
    position: absolute;
    top: -100px;
    width: 160px;
    filter: blur(90px);
    opacity: 0;
    background: linear-gradient(
        180deg,
        #0358f7 18.3%,
        #5092c7 28.4%,
        #e1ecfe 41.3%,
        #ffd400 58.7%,
        #fa3d1d 68.3%,
        #fd02f5 80.3%,
        rgb(255 192 253 / 0%) 100%
    );
    transform-origin: center top;
    animation: diaGradientFlow 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.dia-gradient-bg .bar-1 { left: 3%; height: 55vh; animation-delay: 0s; }
.dia-gradient-bg .bar-2 { left: 14%; height: 65vh; animation-delay: .2s; }
.dia-gradient-bg .bar-3 { left: 25%; height: 75vh; animation-delay: .4s; }
.dia-gradient-bg .bar-4 { left: 36%; height: 85vh; animation-delay: .55s; }
.dia-gradient-bg .bar-5 { left: 47%; height: 90vh; animation-delay: .65s; }
.dia-gradient-bg .bar-6 { left: 58%; height: 85vh; animation-delay: .55s; }
.dia-gradient-bg .bar-7 { left: 69%; height: 75vh; animation-delay: .4s; }
.dia-gradient-bg .bar-8 { left: 80%; height: 65vh; animation-delay: .2s; }
.dia-gradient-bg .bar-9 { left: 91%; height: 55vh; animation-delay: 0s; }

@keyframes diaGradientFlow {
    0% { transform: translateY(100vh) scaleY(3); opacity: 0; }
    15% { opacity: .18; }
    40% { opacity: .1; }
    70% { opacity: .04; }
    100% { transform: translateY(-20vh) scaleY(.3); opacity: 0; }
}

html.dark .dia-gradient-bg .gradient-bar {
    animation-name: diaGradientFlowDark;
}

@keyframes diaGradientFlowDark {
    0% { transform: translateY(100vh) scaleY(3); opacity: 0; }
    15% { opacity: .08; }
    40% { opacity: .04; }
    70% { opacity: .02; }
    100% { transform: translateY(-20vh) scaleY(.3); opacity: 0; }
}