/*
 * 섹션 움직임(스크롤 등장 효과) — /js/section-motion.js 와 짝. views/layouts/main.php 가 늘 싣는다.
 * 계획: docs/archive/history/section-motion.md · 설정 해석: App\Helpers\SiteMotion
 *
 * 숨기는 것은 <html> 에 .kcms-motion(+ --legacy 또는 --new)이 있을 때뿐이다. 머리의 짧은 스크립트가 달고
 * (동작 줄이기·오래된 브라우저면 안 단다), 본 스크립트가 제때 못 돌면 떼어 낸다 — 무슨 일이 있어도 글이 투명한 채로 남지 않는다.
 */

/*
 * 예전 방식(motion_mode 행이 없는 사이트 — 2026-10-05 전 화면 그대로)
 *   [data-aos="fade-up"]  섹션 템플릿이 단 표시. 예전에 빌려 쓰던 AOS 2.3.4 와 같은 모양이다 — 100px 아래·투명에서
 *                         ease-out 으로 떠오른다. 시간(data-aos-duration, 기본 600ms)·늦춤(data-aos-delay)은 스크립트가 요소에 적는다.
 *                         다 떠오른 뒤의 transform 도 AOS 와 같은 translateZ(0) 이다(쌓임 순서가 바뀌지 않게).
 *   .section-reveal       사이트 설정 motion_reveal 을 켜면 views/home/page.php 가 표시 없는 섹션의 감싸기에 단다.
 */
.kcms-motion--legacy [data-aos] {
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}

.kcms-motion--legacy [data-aos^="fade"] {
    opacity: 0;
}

.kcms-motion--legacy [data-aos="fade-up"] {
    transform: translate3d(0, 100px, 0);
}

.kcms-motion--legacy [data-aos].is-motion-in {
    opacity: 1;
    transform: translateZ(0);
}

.kcms-motion--legacy .section-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.kcms-motion--legacy .section-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/*
 * 새 방식 — 사이트 설정 › 디자인 › 움직임. views/home/page.php 가 히어로를 뺀 섹션 감싸기에
 *   .section-motion--items  항목 표시(data-aos·data-motion-item)가 있는 섹션 — 항목이 하나씩
 *   .section-motion--whole  표시가 없는 섹션 — 통째로
 * 와 data-motion-effect(효과)를 단다. 거리·시간·크기·흐림·속도 곡선은 머리의 :root 변수(SiteMotion::STRENGTHS·EASE)다.
 * 새 방식에서 data-aos 는 "항목" 표시로만 읽는다 — 거리·시간·늦춤 값은 쓰지 않는다.
 * 나타나기 전 모양은 :not(.is-motion-in) 에만 걸고, 움직이는 동안만(.is-motion-run) transition 을 덮는다 — 끝나면 카드의
 * 마우스 올림 같은 제 transition 이 돌아온다.
 */
.kcms-motion--new .section-motion--whole:not(.is-motion-in),
.kcms-motion--new .section-motion--items :is([data-aos], [data-motion-item]):not(.is-motion-in) {
    opacity: 0;
}

.kcms-motion--new .section-motion--whole[data-motion-effect="up"]:not(.is-motion-in),
.kcms-motion--new .section-motion--items[data-motion-effect="up"] :is([data-aos], [data-motion-item]):not(.is-motion-in) {
    transform: translate3d(0, var(--motion-distance, 36px), 0);
}

.kcms-motion--new .section-motion--whole[data-motion-effect="side"]:not(.is-motion-in),
.kcms-motion--new .section-motion--items[data-motion-effect="side"] :is([data-aos], [data-motion-item]):not(.is-motion-in) {
    transform: translate3d(calc(var(--motion-distance, 36px) * -1), 0, 0);
}

.kcms-motion--new .section-motion--whole[data-motion-effect="zoom"]:not(.is-motion-in),
.kcms-motion--new .section-motion--items[data-motion-effect="zoom"] :is([data-aos], [data-motion-item]):not(.is-motion-in) {
    transform: scale(var(--motion-scale, 0.92));
}

.kcms-motion--new .section-motion--whole[data-motion-effect="blur"]:not(.is-motion-in),
.kcms-motion--new .section-motion--items[data-motion-effect="blur"] :is([data-aos], [data-motion-item]):not(.is-motion-in) {
    filter: blur(var(--motion-blur, 8px));
    transform: translate3d(0, calc(var(--motion-distance, 36px) / 3), 0);
}

.kcms-motion--new .is-motion-run {
    /* 차례로 늦춤은 스크립트가 요소에 적는 --motion-delay */
    transition: opacity var(--motion-duration, 1200ms) var(--motion-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) var(--motion-delay, 0ms),
        transform var(--motion-duration, 1200ms) var(--motion-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) var(--motion-delay, 0ms),
        filter var(--motion-duration, 1200ms) var(--motion-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) var(--motion-delay, 0ms) !important;
}

/* 인쇄할 때는 모두 보인다 */
@media print {
    .kcms-motion [data-aos],
    .kcms-motion [data-motion-item],
    .kcms-motion .section-motion--whole,
    .kcms-motion .section-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}