/* ==========================================================================
   motion-reveal.css — 전역 스크롤 리빌 모션 (payhere / tossplace 톤)
   --------------------------------------------------------------------------
   설계 원칙
   - 콘텐츠를 CSS 기본값으로 숨기지 않는다. 초기 숨김 상태(.mr-prep)는
     오직 JS(js/motion-reveal.js)가 부여한다.
   - 따라서 JS가 미로드/실패해도 모든 콘텐츠는 정상 표시된다.
   - transform / opacity 만 사용(60fps). transition 은 항상 존재하는
     마커 클래스(.mr)에 두고, .mr-prep 제거만으로 최종 상태로 복귀시킨다.
   - prefers-reduced-motion: reduce 는 JS 단에서 리빌 자체를 비활성화하며,
     아래 미디어 쿼리는 이중 안전장치다.
   ========================================================================== */

/* 리빌 대상 마커 — transition/합성 힌트만 담는다. 절대 숨기지 않는다. */
.mr {
  transition:
    opacity .6s cubic-bezier(.16, 1, .3, 1),
    transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}

/* 초기 숨김/오프셋 — JS 가 붙였을 때만 적용된다(fade-up 시작 상태). */
.mr-prep {
  opacity: 0;
  transform: translateY(22px);
}

/* 진입 완료 상태(명시적). .mr-prep 제거만으로도 자연 상태로 복귀하지만,
   의미를 분명히 하기 위해 둔다. */
.mr-in {
  opacity: 1;
  transform: translateY(0);
}

/* 리빌이 끝난 요소의 합성 힌트 해제(메모리 절약). */
.mr-done {
  will-change: auto;
}

/* 모션 최소화 선호 시: 혹시라도 prep 이 남아도 즉시 표시(이중 안전장치). */
@media (prefers-reduced-motion: reduce) {
  .mr,
  .mr-prep,
  .mr-in {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}