/* =============================================================================
SWM — Company hero load interaction / 필수 CSS
Company Page settings ▸ Custom code ▸ Inside tag:
⚠ 스크롤 연동(sticky + ScrollTrigger scrub)에서 페이지 로드 자동재생으로 바뀌었다.
그래서 스크롤 구간 높이(--ch-scroll-height), position:sticky,
조상 overflow 해제(.page_wrap) 규칙이 모두 제거됐다. 히어로는 이제 한 화면이다.
========================================================================== */
/* 클립이 "화면 전체"로 퍼지려면 히어로가 뷰포트 폭을 다 써야 한다.
Webflow 기본 .u-container 는 max-width + auto 마진이라, 그대로 두면 클립이
컨테이너 안쪽까지만 퍼지고 좌우에 여백이 남는다. */
html.ch-ready .company_wrap > .u-container {
display: block;
width: 100%;
max-width: none;
margin-right: 0;
margin-left: 0;
container-type: normal;
}
/* 히어로를 정확히 한 화면으로 고정.
.company_background_wrap 이 inset:0 이라 이 높이가 곧 클립 기준 박스가 된다. */
html.ch-ready .company_title_layout.u-min-height-screen {
width: 100%;
height: 100vh;
height: 100svh;
min-height: 100vh;
min-height: 100svh;
margin-left: 0;
overflow: hidden; /* overflow:clip 미지원 브라우저용 폴백 */
overflow: clip;
}
html.ch-ready .company_background_wrap {
will-change: clip-path;
}
html.ch-ready .company_title_wrapper,
html.ch-ready .company_second_title_element {
will-change: opacity, transform, filter;
}
/* JS 가 등장시킬 때까지 숨김 (스크립트보다 먼저 걸려야 깜빡임이 없다) */
html.ch-ready .company_second_title_element {
opacity: 0;
z-index: 2;
}
/* .is-back 은 기본 z-index 3 이라 배경(z-index 5) 뒤에 깔린다. 클립이 화면을 다
덮은 뒤에는 두 번째 문구가 배경에 가려지므로, 그 시점에 JS 가 이 클래스를 붙인다. */
html.ch-ready .company_wrap.ch-second-phase .company_title_element.is-back {
z-index: 7;
}
/* ---------------------------------------------------------------------------
모션 최소화 — 애니메이션 없이 "끝난 상태"를 바로 보여준다.
JS 는 이 경우 ch-ready 를 떼고 즉시 return 하므로 선택자를 ch-js 로 잡는다.
(JS 가 아예 실패하면 bail() 이 ch-js 까지 떼므로 원래 레이아웃으로 돌아간다)
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
/* ⚠ !important 가 필요하다. 시작 도형은 Webflow 커스텀 속성의 "인라인" style 로
들어있어서(로드 전 첫 페인트 담당), 일반 규칙으로는 못 이긴다.
이걸 안 풀면 영상이 작은 둥근 사각형에 갇힌 채로 남는다. */
html.ch-js .company_background_wrap {
clip-path: none !important;
}
/* 최종 상태 = 첫 타이틀은 사라지고 두 번째 문구만 남는다 */
html.ch-js .company_title_wrapper {
display: none;
}
/* 배경이 화면을 다 덮으므로 ch-second-phase 와 같은 z-index 를 미리 준다 */
html.ch-js .company_title_element.is-back {
z-index: 7;
}
html.ch-js .company_second_title_element {
opacity: 1;
position: relative;
inset: auto;
}
}