/* motion_add.css — GSAP 모션 보조 CSS. 기존 CSS 파일을 수정하지 않고 이 파일만 추가 link.
   역할: 렌더링 끊김 방지(will-change/overflow), acc-card hover 원근감, feature-bar
   transform-origin, 기존 CSS animation과 충돌하는 항목 무력화(JS에서도 처리) */

/* ── 렌더링 최적화 ──────────────────────────── */

/* overflow-x:hidden을 #container에 걸면 overflow-y가 auto로 계산돼 새 스크롤 컨테이너가 되어
   하위 position:sticky 요소가 뷰포트 기준으로 고정되지 않음 - html(루트)에 걸어야 sticky가 정상 동작함 */
html {
    overflow-x: hidden;
}

/* 스크롤 연동 패럴랙스는 제거됨 - 등장(scale/fade) 애니메이션 성능 힌트만 유지 */
.product-structure .monitor-wrap {
    will-change: transform;
}

/* 카드 마그네틱 원근감 컨테이너 */
.product-overview .card-list,
.expected-effects .feature-list {
    perspective: 1000px;
}

/* acc-card — 3D 변환 허용 */
.acc-card {
    transform-style: preserve-3d;
    will-change: transform;
    /* 호버 border 트랜지션은 기존 유지, transform만 GSAP이 제어 */
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* 도식 */
.ref-bg img {
    will-change: transform, opacity;
    display: block;
    width: 100%;
}

/* 회사소개 페이지 - motion_sub.js ⑩이 등장시키는 이미지들 렌더링 최적화 */
.company-about .about-photo img,
.company-timeline img,
.pdca-visual img,
.business-visual img {
    will-change: transform, opacity;
}

/* ── feature-bar transform-origin ──────────── */

/* JS에서 scaleY: 0 → 1 애니메이션 할 때
   위에서 아래로 자라게 하기 위한 설정 */
.feature-bar {
    transform-origin: top center;
    will-change: transform;
}


/* 스크롤 트리거 공통 — 등장 전 상태 초기화. GSAP이 from/to를 직접 제어하므로 기존 transform/opacity
   충돌 방지 (section.visible 기반 transition은 News 이하에서만 쓰여 main-visual은 제외) */
#main-news .section-header,
#main-news .section-body,
#integrated-system .section-header,
#integrated-system .section-body,
#package-system .section-header,
#package-system .section-body,
#consulting-solution .section-header,
#consulting-solution .section-body,
#main-contact .section-header,
#main-contact .section-body {
    /* GSAP이 직접 제어 — CSS transition과 중복되지 않도록 초기화 */
    transform: none;
    opacity: 1;
    transition: none;
}

/* ── 서브 페이지 ──────────────────────────── */
.cont-title .section-header,
.product-structure .section-header,
.product-structure .section-body,
.reference-system .section-body,
.product-overview .section-header,
.expected-effects .section-header,
.expected-effects .section-body,
.project-list .section-header,
.news-list .section-header,
.location-section .section-header {
    transform: none;
    opacity: 1;
    transition: none;
}

/* ── Slogan 패럴랙스 배경 전환 부드럽게 ──── */
#main-slogan {
    background-size: 110%;
    transition: background-size 0.1s linear;
}


/* ── 마우스 커서 — 인터랙티브 힌트 ── */
.acc-card {
    cursor: default;
}
.acc-card:hover {
    cursor: pointer;
}