/* ========================================================================== aos-motion.css 서브 페이지(About / Technology / Business & Products) 공용 스크롤 등장 모션 - 일반 스크롤 유지 + IntersectionObserver 로 .is-animated 부착 시 등장 - 초기 숨김은 .aos-on 일 때만 (head 인라인 스크립트가 에 부착 → 첫 페인트부터 숨겨져, 처음부터 화면에 보이는 요소도 전환이 정상 재생됨. JS 미동작 시 클래스가 안 붙어 콘텐츠 정상 표시) - 지연은 인라인 style="--d:300ms" 로 주입 transition 단위는 가이드의 1000s 표기 → 정상 단위(s)로 교정 ========================================================================== */ .aos-on .scroll-motion { opacity: 0; will-change: transform, opacity; } /* 1. 아래에서 위로 */ .aos-on .scroll-motion.v-fade-up { transform: translateY(50px); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--d, 0ms); } /* 2. 좌/우에서 */ .aos-on .scroll-motion.v-slide-right { transform: translateX(-40px); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--d, 0ms); } .aos-on .scroll-motion.v-slide-left { transform: translateX(40px); transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--d, 0ms); } /* 3. 제자리에서 서서히 (필요 시 scale 미세 결합) */ .aos-on .scroll-motion.v-fade-in { transition: opacity 1.2s ease, transform 1.2s ease; transition-delay: var(--d, 0ms); } .aos-on .scroll-motion.v-fade-in.v-zoom { transform: scale(0.96); } /* 화면에 등장했을 때 (트리거 활성화) */ .aos-on .scroll-motion.is-animated { opacity: 1; transform: translate(0, 0) scale(1); } /* 접근성 — 모션 최소화 선호 시 즉시 표시 */ @media (prefers-reduced-motion: reduce) { .aos-on .scroll-motion { opacity: 1 !important; transform: none !important; transition: none !important; } }