/* 骑龙动画背景效果 */
.dragon-animation-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.dragon-animation-bg #skyDragon {
    position: absolute;
    top: 100px;
    left: 20%;
    width: 145px;
    height: 129px;
    background-image: url('../img/sky_dragon_crop.png');
    z-index: 100;
    animation: fly 2.5s ease-in-out infinite;
}

.dragon-animation-bg canvas {
    margin: 0 auto;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.dragon-animation-bg #foreground4 {
    animation: scroll 15s linear infinite;
}

.dragon-animation-bg #foreground3 {
    animation: scroll 7s linear infinite;
}

.dragon-animation-bg #foreground2 {
    animation: scroll 4s linear infinite;
}

.dragon-animation-bg #foreground1 {
    animation: scroll 1s linear infinite;
}

@keyframes scroll {
    from {
        left: 0%;
    }
    to {
        left: -100%;
    }
}

@keyframes fly {
    0% {
        top: 100px;
    }
    50% {
        top: 200px;
    }
    100% {
        top: 100px;
    }
}

/* 确保主要内容在动画之上 */
.so-container,
.so-header {
    position: relative;
    z-index: 1;
}