.corner-decoration {
    position: fixed;
    width: calc(10% - 20px);
    height: auto;
    aspect-ratio: 1/1;
    max-width: 140px;
    max-height: 140px;
    z-index: 1002;
    opacity: 0.8;
    transition: all 0.3s ease;

    img {
        background-color: var(--primary-color);
    }
}

.corner-decoration.top-left {
    top: 20px;
    left: 20px;
    transform: rotate(0deg);
}

.corner-decoration.top-right {
    top: 20px;
    right: 20px;
    transform: rotate(90deg);
}

.corner-decoration.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: rotate(180deg);
}

.corner-decoration.bottom-left {
    bottom: 20px;
    left: 20px;
    transform: rotate(270deg);
}

/* 魔法书风格边框装饰 */
.page-border {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1001;
}

.page-border::before,
.page-border .border-inner::before {
    content: '';
    position: absolute;
    background: none;
}

/* 外边框 */
.page-border::before {
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 10px solid#d1d1d1;
}

/* 内边框 */
.page-border .border-inner::before {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid#d1d1d1;
}

@media (max-width: 996px) {
    .page-border::before{
        border: 6px solid#d1d1d1;
    }

    .corner-decoration {
        width: 12%;
    }

    .corner-decoration.top-left{
        top: 12px;
        left: 12px;
    }

    .corner-decoration.top-right{
        top: 12px;
        right: 12px;
    }

    .corner-decoration.bottom-right{
        bottom: 12px;
        right: 12px;
    }

    .corner-decoration.bottom-left{
        bottom: 12px;
        left: 12px;
    }

    .page-border .border-inner::before{
        top: 12px;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
}

.corner-decoration {
    animation: cornerFloat 6s ease-in-out infinite;
}

.corner-decoration.top-right {
    --rotation: 90deg;
}

.corner-decoration.bottom-right {
    --rotation: 180deg;
}

.corner-decoration.bottom-left {
    --rotation: 270deg;
}

.corner-decoration.top-left {
    --rotation: 0deg;
}