/* /site/v2/inc/_scroll-reveal.css
 * Phase 5-2 v2.2 · 2026-05-14 (사용자 [4차] 핑퐁: 작은 덩어리 단위 fade-in)
 *
 * v2.2 변경: section 단위 → 자식 의미 단위 (텍스트/이미지/카드 박스 각자)
 * 거리/시간: section v2.1 보다 가볍게 (translateY 24px → 작은 단위 자연스러움)
 *
 * FOUC 방지 전략 (Codex Q4):
 *   - 평시: .reveal-on-scroll 만 있으면 opacity 1 (JS 실패/지연 시 보임 보장)
 *   - JS init 후 html.has-scroll-reveal 추가되면 비로소 .reveal-on-scroll:not(.is-revealed) 만 hidden
 */
.reveal-on-scroll {
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

/* JS 가 html 에 .has-scroll-reveal 부여한 후에만 fade-in 효과 진입 */
html.has-scroll-reveal .reveal-on-scroll:not(.is-revealed) {
    opacity: 0;
    transform: translateY(24px);
}

html.has-scroll-reveal .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* reveal 완료 후 will-change cleanup (JS transitionend 핸들러 보강) */
.reveal-on-scroll.is-revealed {
    will-change: auto;
}

/* 접근성: 모션 감소 선호 시 효과 비활성 */
@media (prefers-reduced-motion: reduce) {
    html.has-scroll-reveal .reveal-on-scroll,
    html.has-scroll-reveal .reveal-on-scroll:not(.is-revealed) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}