/**
 * ================================================================
 * 滚动淡入 - 公共样式
 * ================================================================
 * 配合 initScrollReveal() 使用
 * 放在全局 CSS 文件中即可
 * ================================================================
 */

/* ----- 默认：上滑淡入（最常用） ----- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    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);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----- 左滑淡入 ----- */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----- 右滑淡入 ----- */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ----- 缩放淡入 ----- */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* ----- 延迟类（用于多个元素依次出现） ----- */
.delay-1 {
    transition-delay: 0.05s;
}

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

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

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

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

.delay-6 {
    transition-delay: 0.30s;
}

.delay-7 {
    transition-delay: 0.35s;
}

.delay-8 {
    transition-delay: 0.40s;
}