/* ==========================================================================
   oracle-scroll-reveal.css — 메인(index) 스크롤 진입 인터랙션
   2026-07-21

   설계 원칙
   - 한 번만: 한 번 나타난 요소는 다시 숨기지 않는다(스크롤 위아래로 깜빡이면 피로하다).
   - 안전하게: 숨김 상태는 `html.oracle-scroll-in-ready` 가 붙었을 때만 적용한다.
     이 클래스는 JS 가 붙이므로, JS 가 없거나 실패하면 요소는 그냥 다 보인다.
     (CSS 로 먼저 숨겨두면 JS 실패 시 본문이 영영 안 보이는 사고가 난다)
   - 접근성: prefers-reduced-motion 사용자는 모션을 완전히 제외한다.

   ※ 클래스 이름 주의 [MUST]
     - `.is-visible` 금지 — 그누보드 default.css 에 `.is-visible{display:block!important}`
       전역 규칙이 있어 grid/flex 레이아웃이 통째로 무너진다. 그래서 `.is-in-view` 를 쓴다.
     - `.oracle-reveal` 금지 — 테마에 이미 같은 이름의 리빌 시스템이 있다(oracle.css + oracle-main.js).

   ※ 홈에서만 로드된다 (head.php 의 defined('_INDEX_') 분기)

   튜닝은 아래 변수만 만지면 된다.
   ========================================================================== */

:root {
    /* 등장 전 아래로 내려가 있는 거리. 클수록 움직임이 크게 보인다. (테마 기존 리빌은 34px) */
    --oracle-scroll-in-shift: 32px;
    /* 전환 시간. 길수록 느긋하게 올라온다. */
    --oracle-scroll-in-duration: 800ms;
    /* 감속 곡선 — 빠르게 출발해 부드럽게 멈춘다. */
    --oracle-scroll-in-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 초기 상태 — JS 가 준비됐을 때만 숨긴다 */
.oracle-scroll-in-ready .oracle-scroll-in {
    opacity: 0;
    transform: translate3d(0, var(--oracle-scroll-in-shift), 0);
    will-change: opacity, transform;
}

/* 등장 */
.oracle-scroll-in-ready .oracle-scroll-in.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--oracle-scroll-in-duration) var(--oracle-scroll-in-ease),
        transform var(--oracle-scroll-in-duration) var(--oracle-scroll-in-ease);
    transition-delay: var(--oracle-scroll-in-delay, 0ms);
}

/* 등장이 끝나면 will-change 를 걷어낸다(레이어 유지 비용 제거) */
.oracle-scroll-in-ready .oracle-scroll-in.is-done {
    will-change: auto;
}

/* 모션 최소화 설정 사용자: 애니메이션 없이 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
    .oracle-scroll-in-ready .oracle-scroll-in,
    .oracle-scroll-in-ready .oracle-scroll-in.is-in-view {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}