/* 스크롤 애니메이션 기본 상태 (숨김 & 약간 아래 배치) */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* 화면에 나타났을 때 상태 */
.reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.slow-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 5.0s cubic-bezier(0.16, 1, 0.3, 1),
    transform 5.0s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.slow-reveal.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 요소들이 순차적으로 나타나는 시차(Delay) 효과 */
.reveal-delay-1 {
    transition-delay: 0.6s;
}

.reveal-delay-2 {
    transition-delay: 1.2s;
}

.reveal-delay-3 {
    transition-delay: 1.8s;
}

.reveal-delay-4 {
    transition-delay: 2.4s;
}

.reveal-delay-5 {
    transition-delay: 3.6s;
}
.reveal-delay-6 {
    transition-delay: 4.8s;
}