/**
 * 装饰效果样式
 * 定义全局背景和装饰挂件的样式
 */

/* 装饰背景元素 */
.background-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.decoration-item {
    position: absolute;
    opacity: 0.1;
    background: linear-gradient(135deg, #4d7cfe, #38f);
    border-radius: 50%;
    pointer-events: none;
}

.decoration-item:nth-child(1) {
    width: 15vw;
    height: 15vw;
    top: 15%;
    left: 10%;
    animation: float 20s infinite ease-in-out;
}

.decoration-item:nth-child(2) {
    width: 12vw;
    height: 12vw;
    top: 60%;
    right: 15%;
    animation: float 25s infinite ease-in-out reverse;
}

.decoration-item:nth-child(3) {
    width: 8vw;
    height: 8vw;
    bottom: 20%;
    left: 20%;
    animation: float 15s infinite ease-in-out 5s;
}

.decoration-item:nth-child(4) {
    width: 10vw;
    height: 10vw;
    top: 35%;
    right: 25%;
    animation: float 18s infinite ease-in-out 8s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(3deg);
    }

    50% {
        transform: translateY(8px) rotate(-3deg);
    }

    75% {
        transform: translateY(-5px) rotate(1deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 深色模式装饰项目 */
.dark-theme .decoration-item {
    opacity: 0.15;
    background: linear-gradient(135deg, #4d7cfe, #2766cc);
}

/* 伪元素装饰 */
.decoration-before,
.decoration-after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.decoration-before {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(77, 124, 254, 0.08), rgba(77, 124, 254, 0.02));
    border-radius: 50%;
    top: -20vw;
    right: -20vw;
}

.decoration-after {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(77, 124, 254, 0.05), rgba(77, 124, 254, 0.01));
    border-radius: 50%;
    bottom: -15vw;
    left: -15vw;
}

/* 深色模式伪元素装饰 */
.dark-theme .decoration-before {
    background: radial-gradient(circle, rgba(77, 124, 254, 0.15), rgba(77, 124, 254, 0.03));
}

.dark-theme .decoration-after {
    background: radial-gradient(circle, rgba(77, 124, 254, 0.1), rgba(77, 124, 254, 0.02));
}

/* 全局背景容器 */
.global-decoration-container {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1 !important;
    overflow: hidden;
    will-change: transform;
    transition: none;
}

/* 确保动画元素始终可见 */
.global-decoration-container .decoration-item {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    will-change: transform, opacity;
    pointer-events: none;
    z-index: -1 !important;
    transition: all 0.5s cubic-bezier(0.12, 0.8, 0.32, 1);
    background: var(--decoration-color, #3e7bfa);
}

.dark-theme .global-decoration-container .decoration-item,
html.dark .global-decoration-container .decoration-item {
    opacity: 0.08;
    background: var(--decoration-color, #3e7bfa);
}

/* 确保路由切换时动效不闪烁 */
.global-decoration-container,
.global-decoration-container * {
    transition: none !important;
}

/* 卡片装饰 */
.card-decoration {
    position: relative;
    z-index: 1;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow: visible !important;
}

.card-decoration::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 12px;
    background: radial-gradient(155.41% 215.68% at 26.15% 2.5%, rgba(62, 123, 250, 0.06), rgba(0, 0, 0, 0) 70.52%);
    z-index: -1;
    pointer-events: none;
}

/* 装饰挂件 */
.decoration-widget {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
    will-change: transform;
}

/* 按钮装饰效果 */
.interactive-decoration {
    position: relative;
    overflow: visible !important;
}

.interactive-decoration .decoration-widget {
    opacity: 0.7;
    transition: all 0.3s ease-out;
}

.interactive-decoration:hover .decoration-widget {
    opacity: 1;
    transform: scale(1.2);
}

/* 内容块装饰 */
.content-block-decoration {
    position: relative;
}

.content-block-decoration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* background: radial-gradient(50% 50% at 0% 0%, rgba(62, 123, 250, 0.03), rgba(0, 0, 0, 0)); */
    pointer-events: none;
    z-index: 0;
}

/* 动画元素 */
.decoration-item {
    animation: pulse 8s infinite alternate;
    position: absolute;
    border-radius: 50%;
}

/* 确保动画元素在动画过程中始终保持可见 */
.decoration-item[data-animation="slow-pulse"] {
    animation: slow-pulse 15s infinite ease-in-out;
    will-change: transform, opacity;
}

.decoration-item[data-animation="rotate"] {
    animation: rotate 20s infinite linear;
    will-change: transform;
}

.decoration-item[data-animation="floating"] {
    animation: floating 10s infinite ease-in-out;
    will-change: transform;
}

/* 动画关键帧定义 */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.15;
    }

    100% {
        transform: scale(1);
        opacity: 0.1;
    }
}

@keyframes slow-pulse {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.08;
    }

    50% {
        transform: scale(1.2) translate(10px, 10px);
        opacity: 0.12;
    }

    100% {
        transform: scale(1) translate(0, 0);
        opacity: 0.08;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes floating {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(5px, 10px);
    }

    50% {
        transform: translate(10px, 5px);
    }

    75% {
        transform: translate(5px, -5px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* 暗色模式下的LOGO处理 */
.dark-theme img[alt*="logo" i],
.dark-theme img[alt*="Logo" i],
.dark-theme .logo {
    filter: invert(1) brightness(1.25);
}

/* 应用于已处理的LOGO元素 */
img[data-decoration-processed="true"] {
    transition: filter 0.3s ease;
}