/* ================================================================
   process-motion.css — 공정과정 모션 영상 (테스트)
   구조: <div class="pm-wrap"><video></video></div>
   - 자르기(clip-path/mask)·흑백/컬러·투명도·합성은 전부 래퍼(div)에 건다.
     <video>에 직접 걸면 브라우저가 영상 레이어에서 무시하는 경우가 있음.
   ================================================================ */

/* 원본 이미지: 자리·클릭만 유지하고 화면에서는 숨김 */
.ps-step-img.pm-hidden-src {
    opacity: 0 !important;
    filter: none !important;
}

.pm-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

/* 영상 배경(베이지)이 카드 배경(#F1EDEA)과 1~3 차이가 나서 활성 조각이 네모 블록으로 보였다.
   → 3% 밝혀 배경을 카드보다 살짝 밝게 만든 뒤 darken 합성: 배경은 카드색이 이기고(=사라지고)
   기계 부분만 남는다. */
.pm-wrap {
    mix-blend-mode: darken;
}

/* darken은 같은 합성 영역(stacking context)의 배경을 상대로 섞인다.
   니켈 태블릿·모바일 3줄 다이어그램의 .ps-row-inner, 냉연·열처리 모바일 줄은 축소용 transform 등으로
   따로 합성 영역이 생기는데 배경이 없어서(투명) 영상 배경이 그대로 네모로 드러났다.
   → 카드와 같은 색(#F1EDEA)을 깔아 합성 상대를 만들어 준다(카드 위라 눈에 보이는 변화는 없음). */
.ps-row-inner,
.ps-mobile-row,
.ps-mobile-diagram-inner {
    background-color: #F1EDEA;
}

/* 절대배치 래퍼 (데스크탑 다이어그램 / 니켈 모바일 행) — 기존 .ps-step-img와 같은 톤 */
.pm-wrap:not(.ps-mob-icon) {
    position: absolute;
    opacity: 0.4;
    filter: grayscale(1) brightness(1.03);
    transition: filter 0.4s ease, opacity 0.4s ease;
    cursor: pointer;
    z-index: 0;
}

.pm-wrap.visible:not(.ps-mob-icon) {
    opacity: 1;
    filter: grayscale(0) brightness(1.03);
    z-index: 1;   /* 이웃 단계와 겹치는 가장자리에서 활성 조각이 위로 */
}

/* 냉연·열처리 모바일 아이콘 래퍼 — 배치는 기존 .ps-mob-icon[data-step] 규칙 그대로 */
.pm-wrap.ps-mob-icon {
    height: auto;
    z-index: 0;
    filter: grayscale(1) brightness(1.03);
}

.pm-wrap.ps-mob-icon video {
    height: auto;
}

.pm-wrap.ps-mob-icon.active {
    z-index: 1;
    filter: grayscale(0) brightness(1.03);
}

/* ── 열처리: 전단라인·포장정리 간격 (검수 0922) ─────────────────────
   새 전단라인 이미지가 오른쪽으로 30px(227 → 257) 넓어졌는데 포장정리는 제자리라 두 기계가
   30px 겹쳐 간격이 좁아 보였다.
   · 포장정리를 30px 뒤로 민다(영상은 JS의 dx: 30, 클릭 영역·말풍선은 아래 CSS).
   · 라인 전체가 30px 길어지므로 다이어그램을 15px 앞으로 당겨 가운데 정렬 유지. */
html[data-pm-page="heat"] #diagram-열처리 {
    margin-left: -15px;
}
html[data-pm-page="heat"] #diagram-열처리 #img-step-3,
html[data-pm-page="heat"] #diagram-열처리 #bubble-3 {
    margin-left: 30px;
}

/* 모바일·태블릿: 전단라인 폭을 같은 비율(×257/227)로 늘리고, 늘어난 폭만큼 포장정리·라벨을 뒤로,
   전체는 그 절반만큼 앞으로 당겨 가운데 정렬 유지. 기준 폭 = 전단라인 원래 폭 (22% - 10px) */
html[data-pm-page="heat"] .pm-wrap.ps-mob-icon[data-step="2"] {
    width: calc((22% - 10px) * 1.1322);
}
html[data-pm-page="heat"] .pm-wrap.ps-mob-icon[data-step="3"] {
    margin-left: calc((22% - 10px) * 0.1322);
}
html[data-pm-page="heat"] .ps-mobile-step-label[data-step="3"] {
    margin-left: calc((22% - 10px) * 0.1322);
}
html[data-pm-page="heat"] .ps-mobile-diagram-inner {
    position: relative;
    left: calc((22% - 10px) * -0.0661);
}

/* 진행바·모바일 점: 시간 기반 transition(3초) 제거 → JS가 영상 재생 위치로 --pm-p(0~1)를 매 프레임 넣음 */
.ps-step.active .ps-step-line::after,
.ps-mobile-dot.active::after {
    width: calc(var(--pm-p, 0) * 100%) !important;
    transition: none !important;
}