/* 页面元素动画效果 */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* 新增滑动动画效果 */
.slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up.active {
    opacity: 1;
    transform: translateY(0);
}

.slide-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-down.active {
    opacity: 1;
    transform: translateY(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-left.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* 现有的其他动画样式保持不变 */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

/* 为不同元素设置不同的延迟 */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

/* 增强滚动效果 */
body {
    --scroll: 0;
    background-attachment: fixed;
}

/* 背景视差效果 */
.bg-parallax {
    position: relative;
    overflow: hidden;
}

/* 滚动时的渐变背景效果 */
.scroll-gradient {
    background: linear-gradient(135deg, 
        rgba(255, 136, 0, calc(0.1 + var(--scroll) * 0.2)), 
        rgba(255, 255, 255, calc(0.9 - var(--scroll) * 0.2))
    );
    transition: background 0.1s ease;
}

/* 滚动时的缩放效果 */
.scroll-scale {
    transform: scale(calc(1 + var(--scroll) * 0.05));
    transition: transform 0.1s ease;
}

/* 滚动时的旋转效果 */
.scroll-rotate {
    transform: rotate(calc(var(--scroll) * 360deg));
    transition: transform 0.1s ease;
}