/* SVG动态渐变动画效果 */

/* L字母动态渐变 - 从a9c1fe到bf9ae2 */
@keyframes l-gradient-flow {
    0% {
        stop-color: #a9c1fe;
        stop-opacity: 1;
    }

    25% {
        stop-color: #b5b5f0;
        stop-opacity: 0.9;
    }

    50% {
        stop-color: #bf9ae2;
        stop-opacity: 1;
    }

    75% {
        stop-color: #d4a8ff;
        stop-opacity: 0.8;
    }

    100% {
        stop-color: #a9c1fe;
        stop-opacity: 1;
    }
}

@keyframes l-gradient-position {
    0% {
        x1: 0%;
        y1: 0%;
        x2: 0%;
        y2: 100%;
    }

    50% {
        x1: 0%;
        y1: 100%;
        x2: 100%;
        y2: 100%;
    }

    100% {
        x1: 0%;
        y1: 0%;
        x2: 0%;
        y2: 100%;
    }
}

/* O字母动态渐变 - 从7a87d7到a796d7 */
@keyframes o-gradient-flow {
    0% {
        stop-color: #7a87d7;
        stop-opacity: 1;
    }

    25% {
        stop-color: #8590dd;
        stop-opacity: 0.9;
    }

    50% {
        stop-color: #a796d7;
        stop-opacity: 1;
    }

    75% {
        stop-color: #b5a5e3;
        stop-opacity: 0.8;
    }

    100% {
        stop-color: #7a87d7;
        stop-opacity: 1;
    }
}

@keyframes o-gradient-position {
    0% {
        x1: 0%;
        y1: 0%;
        x2: 100%;
        y2: 100%;
    }

    25% {
        x1: 100%;
        y1: 0%;
        x2: 0%;
        y2: 100%;
    }

    50% {
        x1: 100%;
        y1: 100%;
        x2: 0%;
        y2: 0%;
    }

    75% {
        x1: 0%;
        y1: 100%;
        x2: 100%;
        y2: 0%;
    }

    100% {
        x1: 0%;
        y1: 0%;
        x2: 100%;
        y2: 100%;
    }
}

/* G字母动态渐变 - 从adc4fe到2f3c6d */
@keyframes g-gradient-flow {
    0% {
        stop-color: #adc4fe;
        stop-opacity: 1;
    }

    25% {
        stop-color: #8ba8c5;
        stop-opacity: 0.9;
    }

    50% {
        stop-color: #2f3c6d;
        stop-opacity: 1;
    }

    75% {
        stop-color: #5f6f9a;
        stop-opacity: 0.8;
    }

    100% {
        stop-color: #adc4fe;
        stop-opacity: 1;
    }
}

@keyframes g-gradient-position {
    0% {
        x1: 100%;
        y1: 0%;
        x2: 50%;
        y2: 50%;
    }

    25% {
        x1: 75%;
        y1: 25%;
        x2: 25%;
        y2: 75%;
    }

    50% {
        x1: 50%;
        y1: 50%;
        x2: 0%;
        y2: 100%;
    }

    75% {
        x1: 25%;
        y1: 75%;
        x2: 75%;
        y2: 25%;
    }

    100% {
        x1: 100%;
        y1: 0%;
        x2: 50%;
        y2: 50%;
    }
}

/* I字母动态渐变 - 从f0eabf到c8bfdd到f6dba4 */
@keyframes i-gradient-flow {
    0% {
        stop-color: #f0eabf;
        stop-opacity: 1;
    }

    20% {
        stop-color: #e8d9cc;
        stop-opacity: 0.9;
    }

    40% {
        stop-color: #c8bfdd;
        stop-opacity: 1;
    }

    60% {
        stop-color: #dfcdc0;
        stop-opacity: 0.9;
    }

    80% {
        stop-color: #f6dba4;
        stop-opacity: 1;
    }

    100% {
        stop-color: #f0eabf;
        stop-opacity: 1;
    }
}

@keyframes i-gradient-position {
    0% {
        x1: 50%;
        y1: 0%;
        x2: 50%;
        y2: 100%;
    }

    33% {
        x1: 50%;
        y1: 25%;
        x2: 50%;
        y2: 75%;
    }

    66% {
        x1: 50%;
        y1: 50%;
        x2: 50%;
        y2: 100%;
    }

    100% {
        x1: 50%;
        y1: 0%;
        x2: 50%;
        y2: 100%;
    }
}

/* C字母动态渐变 - 从1d3165到8490a8 */
@keyframes c-gradient-flow {
    0% {
        stop-color: #1d3165;
        stop-opacity: 1;
    }

    25% {
        stop-color: #3e5580;
        stop-opacity: 0.9;
    }

    50% {
        stop-color: #8490a8;
        stop-opacity: 1;
    }

    75% {
        stop-color: #5f7994;
        stop-opacity: 0.8;
    }

    100% {
        stop-color: #1d3165;
        stop-opacity: 1;
    }
}

@keyframes c-gradient-position {
    0% {
        x1: 50%;
        y1: 0%;
        x2: 50%;
        y2: 100%;
    }

    25% {
        x1: 25%;
        y1: 25%;
        x2: 75%;
        y2: 75%;
    }

    50% {
        x1: 0%;
        y1: 50%;
        x2: 100%;
        y2: 50%;
    }

    75% {
        x1: 75%;
        y1: 75%;
        x2: 25%;
        y2: 25%;
    }

    100% {
        x1: 50%;
        y1: 0%;
        x2: 50%;
        y2: 100%;
    }
}

/* 流光溢彩效果的光谱增强 */
@keyframes shimmer-effect {
    0% {
        filter: brightness(1) saturate(1) hue-rotate(0deg);
    }

    25% {
        filter: brightness(1.2) saturate(1.3) hue-rotate(90deg);
    }

    50% {
        filter: brightness(1.1) saturate(1.5) hue-rotate(180deg);
    }

    75% {
        filter: brightness(1.3) saturate(1.2) hue-rotate(270deg);
    }

    100% {
        filter: brightness(1) saturate(1) hue-rotate(360deg);
    }
}

/* SVG内联样式应用 */
.dynamic-gradient-l {
    animation: shimmer-effect 4s ease-in-out infinite;
}

.dynamic-gradient-o {
    animation: shimmer-effect 3.5s ease-in-out infinite;
}

.dynamic-gradient-g {
    animation: shimmer-effect 4.5s ease-in-out infinite;
}

.dynamic-gradient-i {
    animation: shimmer-effect 3s ease-in-out infinite;
}

.dynamic-gradient-c {
    animation: shimmer-effect 5s ease-in-out infinite;
}

/* 渐变元素的动画应用 */
.l-gradient-stop-1 {
    animation: l-gradient-flow 4s ease-in-out infinite;
}

.l-gradient-stop-2 {
    animation: l-gradient-flow 4s ease-in-out infinite 0.5s;
}

.l-gradient-element {
    animation: l-gradient-position 4s ease-in-out infinite;
}

.o-gradient-stop-1 {
    animation: o-gradient-flow 3.5s ease-in-out infinite;
}

.o-gradient-stop-2 {
    animation: o-gradient-flow 3.5s ease-in-out infinite 0.5s;
}

.o-gradient-element {
    animation: o-gradient-position 3.5s ease-in-out infinite;
}

.g-gradient-stop-1 {
    animation: g-gradient-flow 4.5s ease-in-out infinite;
}

.g-gradient-stop-2 {
    animation: g-gradient-flow 4.5s ease-in-out infinite 0.5s;
}

.g-gradient-element {
    animation: g-gradient-position 4.5s ease-in-out infinite;
}

.i-gradient-stop-1 {
    animation: i-gradient-flow 3s ease-in-out infinite;
}

.i-gradient-stop-2 {
    animation: i-gradient-flow 3s ease-in-out infinite 0.33s;
}

.i-gradient-stop-3 {
    animation: i-gradient-flow 3s ease-in-out infinite 0.66s;
}

.i-gradient-element {
    animation: i-gradient-position 3s ease-in-out infinite;
}

.c-gradient-stop-1 {
    animation: c-gradient-flow 5s ease-in-out infinite;
}

.c-gradient-stop-2 {
    animation: c-gradient-flow 5s ease-in-out infinite 0.5s;
}

.c-gradient-element {
    animation: c-gradient-position 5s ease-in-out infinite;
}