/* css/fade-up.css
   스크롤 시 콘텐츠가 아래에서 위로 살짝 올라오며 나타나는 공통 "Fade Up"
   효과 (2026-09-08 도입, sub01 전체 / sub02 전체 / sub0301 적용).

   .about-section, .about-section__inner 등 기존 레이아웃 클래스는 전혀
   건드리지 않고, 새로 추가하는 .fade-up / .fade-up--visible 클래스만
   사용한다. 뷰포트 진입 감지는 js/fade-up.js의 IntersectionObserver가
   담당 — 여기서는 상태별 겉모습(opacity/transform/transition)만
   정의한다.

   이미 자체 transform을 쓰는 요소(가로 스크롤, sticky 보정 등)는 이
   클래스를 그 요소에 직접 걸지 않고 별도 wrapper에 적용해서, 여기서
   지정하는 transform이 기존 transform을 덮어쓰지 않도록 각 페이지에서
   처리한다. */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}
.fade-up.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}

/* prefers-reduced-motion: 애니메이션 없이 바로 최종 상태로 보이게 처리 */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}