
.dynamic-background {
    /* 定位 */
    top: -20%;
    left: -30%;
    width: 160%;
    height: 160%;
    position: fixed;

    /* 层级 */
    z-index: -1;

    /* 背景 */
    background-image: var(--bg-svg);
    background-color: var(--bg-color);
    
    /* 性能 */
    contain: strict;
    pointer-events: none;
    will-change: transform;

    /* 动画 */
    animation: cubeMove 18s linear infinite alternate;
}

.dynamic-background::after {
    /* 定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;

    /* 内容 */
    content: "";

    /* 背景 */
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 80px,
        rgba(255, 255, 255, 0.08) 80px,
        rgba(255, 255, 255, 0.02) 160px
    );
}

@keyframes cubeMove {
    from {
        transform: translateY(0) scale(1);
    }
    to {
        transform: translateY(-20%) scale(1.02) rotate(1deg);
    }
}