/* =========================================
   Fade In on Scroll (Scroll-Driven, JS 0)
   - transform / opacity 만 사용 → 컴포지터 스레드 처리
   - 미지원 브라우저는 항상 보이는 상태로 폴백
   - 히어로(LCP 요소)에는 적용하지 말 것
   ========================================= */

/* 기본값: 항상 보임 (미지원 브라우저 폴백) */
.fade-in,
.fade-left,
.fade-right,
.fade-scale {
    opacity: 1;
}

@supports (animation-timeline: view()) {

    /* 공통 설정 */
    .fade-in,
    .fade-left,
    .fade-right,
    .fade-scale {
        animation-duration: 0.6s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }

    /* 방향별 애니메이션 지정 */
    .fade-in     { animation-name: fadeUp; }
    .fade-left   { animation-name: fadeLeft; }
    .fade-right  { animation-name: fadeRight; }
    .fade-scale  { animation-name: fadeScale; }

    /* 순차 등장 (같은 부모 안 형제 요소 기준) */
    .fade-stagger > *:nth-child(1) { animation-range: entry 0%  entry 40%; }
    .fade-stagger > *:nth-child(2) { animation-range: entry 5%  entry 45%; }
    .fade-stagger > *:nth-child(3) { animation-range: entry 10% entry 50%; }
    .fade-stagger > *:nth-child(4) { animation-range: entry 15% entry 55%; }

    /* 짧은 페이지 / 화면 하단 요소용 (범위 좁힘) */
    .fade-quick { animation-range: entry 0% entry 20%; }
}

/* 키프레임 */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeScale {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* 접근성 / 저사양 기기 대응 */
@media (prefers-reduced-motion: reduce) {
    .fade-in,
    .fade-left,
    .fade-right,
    .fade-scale,
    .fade-stagger > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.card{ transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,.08); }
.btn{ transition:transform .15s ease; }
.btn:active{ transform:scale(.96); }

.skeleton{ background:#e8e8e8; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }