/* PNG 이미지 물결 왜곡 효과를 위한 스타일 */

/* PNG 이미지 스타일 */
.ripple-png {
    position: absolute; /* 동영상 중앙에 위치 */
    top: 50%; /* 세로 가운데 정렬 */
    left: 50%; /* 가로 가운데 정렬 */
    transform: translate(-50%, -50%); /* 중앙 정렬을 위한 보정 */
    width: 150px; /* 이미지 기본 너비 */
    height: auto; /* 이미지 비율 유지 */
    z-index: 10; /* 동영상 위에 표시 */
    pointer-events: none; /* 이미지 클릭 방지 */
}

/* 물결 왜곡 효과 스타일 */
.ripple {
    position: absolute; /* 물결이 정확한 위치에 생성 */
    width: 60px; /* 물결의 초기 크기 */
    height: 60px;
    border-radius: 50%; /* 물결을 원형으로 설정 */
    transform: translate(-50%, -50%) scale(1); /* 물결의 초기 상태 */
    animation: ripple-distort 1s ease-out; /* 물결 왜곡 애니메이션 */
    pointer-events: none; /* 클릭 이벤트 차단 */
    z-index: 5; /* PNG 이미지보다 아래에 표시 */
    backdrop-filter: blur(4.2px); /* 기본 블러 효과 */
    opacity: 0.6; /* 투명도 설정 */
    
}

/* 물결 왜곡 애니메이션 */
@keyframes ripple-distort {
    0% {
        opacity: 0.6; /* 초기 상태에서 보임 */
        transform: translate(-50%, -50%) scale(1); /* 초기 크기 */
    }
    100% {
        opacity: 0; /* 확산 후 사라짐 */
        transform: translate(-50%, -50%) scale(5); /* 물결 확산 */
    }
}

/* 선택 가능한 다른 효과 */
.ripple.effect-contrast {
    backdrop-filter: contrast(2); /* 대비 효과 적용 */
}

.ripple.effect-hue {
    backdrop-filter: hue-rotate(90deg); /* 색상 회전 효과 */
}

.ripple.effect-grayscale {
    backdrop-filter: grayscale(1); /* 흑백 효과 */
}