/* three.js 3D 캔버스 (메인 전용) — inc/js/robot-3d.core.js 가 캔버스를 만들어 body 에 붙인다. 여기 값들은 JS 가 인라인으로도 동일하게 넣으므로 이 파일이 없어도 레이아웃은 깨지지 않는다. z-index 0: 인트로 배경 3D 레이어와 캔버스를 합치면서 oryzo 처럼 모든 본문 DOM 아래로 내려갔다. 텍스트·마퀴·주문대 이미지가 로봇 위에 그려지는 것이 의도된 레이어링이다. (그 배경 레이어는 지금 꺼져 있다 — core.js 의 window.__intro3dScene 분기 참고.) (섹션들의 z-index 1~15 는 전부 이 캔버스 위. .intro_sect 배경색 같은 비배치 배경만 아래.) opacity 는 JS 가 매 프레임 인라인으로 제어한다(재질을 건드리지 않고 통째로 페이드). */ #robot3d-canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; will-change: opacity; } /* ------------------------------------------------------------------ * * 3D 가 2D 자리를 이어받았을 때만 그 2D 를 숨긴다. * * 이 클래스는 오버레이가 **첫 프레임을 실제로 그린 뒤에만** 에 붙고, * destroy()(모델 로드 실패, WebGL 컨텍스트 소실 …)에서 곧바로 떨어진다. * 그래서 기본 상태는 언제나 "2D 가 보인다" 이고, 3D 가 죽으면 이미지가 스스로 돌아온다. * * display:none 을 쓰지 않는 이유: .counter_character 는 높이가 자식 img 의 비율로 * 정해지는 박스라(main.css:77-78) img 를 없애면 컨테이너 높이가 0 이 된다. * 레이아웃 박스는 그대로 두고 눈에만 안 보이게 한다. * ------------------------------------------------------------------ */ .is-robot3d-intro .intro_sect .counter_cont .counter_character .main_img { opacity: 0; } /* ------------------------------------------------------------------ * * 로봇 착지 슬롯 — 3D 가 날아와 앉는 자리의 2D 아이콘. * * 마크업에는 data-robot-slot="로봇id" 속성 하나만 둔다(어느 이미지든 옮겨 붙일 수 있다). * 기본은 숨김(3D 가 그 자리로 들어온다), 로봇이 도착하면 코어가 is-robot-arrived 를 * 붙여 2D 가 떠오르고 3D 는 절단 효과로 뒤로 사라진다. 스크럽을 되감으면 반대로 돈다. * is-robot3d-intro 아래에만 걸리므로 3D 가 죽으면 이미지는 항상 정상 표시된다. * ------------------------------------------------------------------ */ .is-robot3d-intro img[data-robot-slot] { opacity: 0; /* 트랜지션 없음 — 코어가 스크럽 진행도로 opacity 를 직접 쓴다(정확한 역재생). */ } .is-robot3d-intro img[data-robot-slot].is-robot-arrived { opacity: 1; } /* ------------------------------------------------------------------ * * 밴드 재등장 자리 — 임시 웹엠 비디오 2개(밴드 안 + 스티키 레이어 복제본). * * 3D 가 살아있는 동안 3D 가 이 자리(스티키 비디오의 rect)를 그대로 타고 나타나므로 * 비디오는 눈에만 안 보이게 한다. visibility 를 쓰는 이유: * - 스킨이 이 요소들의 opacity 를 GSAP 인라인으로 굴린다 — opacity 로 겹치면 싸운다. * - display:none 은 rect 를 없애 3D 앵커와 스킨의 rect 동기화를 함께 부순다. * !important 는 스킨의 인라인 스타일보다 우선하기 위해 필요하다. * is-robot3d-intro 아래에만 걸리므로 3D 가 죽으면 임시 비디오 효과가 그대로 복귀한다. * ------------------------------------------------------------------ */ .is-robot3d-intro [data-robot-appear] { visibility: hidden !important; } /* 밴드 재등장의 2D 짝은 **비디오가 아니라 이미지**다(.img.highlight 안의 band_type1_character2.png). 비디오는 위 규칙대로 계속 숨긴 채, 3D 가 절단으로 나오는 만큼 이 이미지가 빠져 **두 겹이 교대**한다(도킹의 data-robot-slot 과 같은 원리). 코어가 클래스를 붙이고 --robot-exchange 에 1−kA 를 넣는다. 로봇이 다 나오면 0 이라 이미지는 그대로 사라진 채 남는다. opacity 를 직접 쓰지 않고 변수를 읽는 이유: 스킨이 같은 속성을 GSAP 인라인으로 굴린다 — !important 로 그 인라인을 이기되 값은 코어가 스크럽 진행도로 정한다. */ .is-robot3d-intro .is-robot-exchange { opacity: var(--robot-exchange, 1) !important; }