/* 스크롤 리빌 (AOS 대체) — data-reveal 속성으로 사용
   예) <div data-reveal="fade-up" data-reveal-delay="100"> */

/* html.has-reveal 는 head 인라인 스크립트가 붙인다.
   (JS 미실행 / 모션 최소화 / IntersectionObserver 미지원이면 붙지 않아 콘텐츠가 그대로 보인다) */
html.has-reveal [data-reveal] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--reveal-duration, 800ms);
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.has-reveal [data-reveal="fade-up"]    { transform: translate3d(0, 40px, 0); }
html.has-reveal [data-reveal="fade-down"]  { transform: translate3d(0, -40px, 0); }
html.has-reveal [data-reveal="fade-right"] { transform: translate3d(-40px, 0, 0); }
html.has-reveal [data-reveal="fade-left"]  { transform: translate3d(40px, 0, 0); }
html.has-reveal [data-reveal="zoom-in"]    { transform: scale(0.94); }
html.has-reveal [data-reveal="zoom-out"]   { transform: scale(1.06); }

html.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* 리빌이 끝나면 will-change 해제 (합성 레이어 누적 방지) */
html.has-reveal [data-reveal].is-reveal-done {
    will-change: auto;
}

/* 모션 최소화 설정에서는 has-reveal 자체가 붙지 않지만, 안전하게 한 번 더 해제 */
@media (prefers-reduced-motion: reduce) {
    html.has-reveal [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}