<style>
/* 修正动画方向，配合180度旋转后的方位 */
@keyframes rotatedFlow {
    0% {
        background-position: 100% 100%; /* 对应旋转后右下角的黄色起点 */
    }
    100% {
        background-position: 90% 90%; /* 仅在右下角小范围流动 */
    }
}

.sun-main .cover {
    width: 100vw;
    height: 100vh;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.sun-main .cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 核心：将原45deg旋转180度，得到225deg，实现整体翻转 */
    background: linear-gradient(
        225deg, /* 45deg + 180deg = 225deg，整体渐变方向翻转 */
        #ffd100 0%,    /* 旋转后：黄色固定在右下角（对应原左上角） */
        #ffe666 15%,   /* 浅黄过渡（限制在右下角15%区域） */
        #4a89dc 30%,   /* 中蓝过渡 */
        #2c3e50 70%,   /* 深蓝过渡 */
        #1a2530 100%   /* 旋转后：深蓝色固定在左上角（对应原右下角） */
    );
    background-size: 130% 130%;
    animation: rotatedFlow 20s ease-in-out infinite alternate;
}

.sun-main .cover[style*="filter"]::before {
    filter: none;
}
</style>