/**
 * 72dot.com/works/ — 픽셀 마스크 호버 이펙트 CSS
 * Kinsey 테마(72dot 차일드 테마) 전용
 *
 * 역할:
 * 1. 원본 미디어(img, video)를 시각적으로 숨김 (Canvas가 대신 렌더링)
 * 2. 삽입된 Canvas 레이어의 포지셔닝 및 z-index 제어
 * 3. Kinsey 테마의 기존 hover-zoom, parallax 효과와의 충돌 방지
 */

/* =========================================================
   1. 원본 미디어 숨김
   - pixel-mask-active 클래스가 추가된 .mask-reveal 내부의
     img/video를 투명하게 처리 (DOM에는 유지하여 소스로 사용)
   ========================================================= */
.pixel-mask-active .va-middle.hover-zoom__zoom {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* =========================================================
   2. Canvas 레이어 스타일
   - p-canvas: 배경 픽셀화 레이어 (z-index: 3)
   - e-canvas: 원형 마스크 + 원본 이미지 레이어 (z-index: 4)
   - mask-reveal__layer들의 z-index(1~2) 위에 배치
   ========================================================= */
.pixel-mask-active .p-canvas,
.pixel-mask-active .e-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;  /* 클릭 이벤트가 <a> 태그로 전달되도록 */
    display: block;
}

.pixel-mask-active .p-canvas {
    z-index: 3;
    filter: contrast(0.7) saturate(0.7) !important;
}

.pixel-mask-active .e-canvas {
    z-index: 4;
}

/* =========================================================
   3. Kinsey 테마 hover-zoom 효과 비활성화
   - 픽셀 마스크가 활성화된 아이템에서는 기존 hover-zoom
     스케일 변환이 Canvas와 충돌하므로 비활성화
   ========================================================= */
.pixel-mask-active .hover-zoom__zoom {
    transform: none !important;
    transition: none !important;
}

/* =========================================================
   4. 모든 Works 아이템 16:9 비율 + cover
   - .mask-reveal 컨테이너에 aspect-ratio 적용
   - 기존 .lazy div의 padding-bottom 비율 해킹 무효화
   - img/video에 object-fit: cover 강제 적용
   ========================================================= */

/* 컨테이너: 16:9 비율 고정 */
.figure-project__wrapper-img .mask-reveal {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* 기존 padding-bottom 비율 해킹 제거 (인라인 스타일 덮어쓰기) */
.figure-project__wrapper-img .lazy {
    padding-bottom: 0 !important;
    height: 100% !important;
}

/* 미디어: 컨테이너를 꽉 채우는 cover 방식 */
.figure-project__wrapper-img video,
.figure-project__wrapper-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}