/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL — scroll-reveal.css
   재사용 스크롤 등장 유틸 (모션 엔진 1단계)
   · 사용법: 요소에 data-reveal="fade-up | scale-in | fade-in"
   · 순차 등장: data-reveal-delay="0.1s" (JS가 --reveal-delay 로 주입)
   · 초기 숨김은 html.sr-ready 게이트 → JS 미동작/미지원 시 그대로 보임
   · 반복재생(나가면 리셋)은 scroll-reveal.js 가 담당
═══════════════════════════════════════════════════════════ */

html.sr-ready [data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

/* 프리셋 — 초기 상태 */
html.sr-ready [data-reveal='fade-up'] {
  transform: translateY(32px);
}
html.sr-ready [data-reveal='scale-in'] {
  transform: scale(0.92);
}
html.sr-ready [data-reveal='fade-in'] {
  transform: none;
}
/* rise: 아래에서 떠오름(40px) + 살짝 스케일(0.96→1) — problem 6카드 등 */
html.sr-ready [data-reveal='rise'] {
  transform: translateY(40px) scale(0.96);
}

/* 등장 상태 (stagger 지연은 등장 방향에만 적용) */
html.sr-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0s);
}

/* 모션 줄이기 설정 존중 — 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  html.sr-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}