.bitcount-ani-basic {
    color: #ffffff;
    font-family: "Bitcount Prop Single", sans-serif;
    font-variation-settings: "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
    animation: weightPulse 0.8s ease-in-out infinite;
    font-size: 6vw;
    line-height: 0.95;
}

@keyframes weightPulse {
0%, 100% { font-weight: 100; }
50% { font-weight: 900; }
}









 /* 메인 컨테이너 */

:root {
    --ani-speed: 1.8s; /* 전체 파동 속도 */
}
.bitcount-ani-step {
    color: #ffffff;
    font-family: "Bitcount Prop Single", sans-serif;
    font-size: 5vw;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
}

        /* 자바스크립트로 쪼개진 글자(span) 스타일 */
.bitcount-ani-step span {
    display: inline-block;
    font-variation-settings: "wght" 100, "slnt" 0, "CRSV" 0.5, "ELSH" 0, "ELXP" 0;
    animation: letterWave var(--ani-speed) ease-in-out infinite;
    will-change: transform, font-variation-settings;
        }

        /* 파동 애니메이션 키프레임 */
@keyframes letterWave {
0%, 100% {
font-variation-settings: "wght" 100;
transform: translateY(0) scale(1);
opacity: 0.5;
}50% 
{ font-variation-settings: "wght" 900;
/* 위로 살짝 들리면서 커지게 하여 움직임을 더 강조함 */
transform: translateY(-10px) scale(1.1); 
opacity: 1;
}
}



.bitcount-ani-flick {
    color: #ffffff;
    font-size: 5vw;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
 font-family: 'Bitcount Prop Single';
}

/* 쪼개지기 전 텍스트가 안보이게 방지 */
.bitcount-ani-flick:not(:has(span)) {
    opacity: 1;
}

.bitcount-ani-flick span {
    display: inline-block;
    opacity: 0;
    /* 가변폰트가 없어도 작동하도록 기본 font-weight 추가 */
    font-weight: 100;
    animation: flickWorkflow 6s ease-in-out infinite;
}

@keyframes flickWorkflow {
    0% { opacity: 0; transform: scale(0.7); }
    15% { opacity: 1; transform: scale(1); }
    30%, 60% { font-weight: 100; opacity: 1; }
    45% { font-weight: 900; transform: scale(1.1); }
    80% { opacity: 1; transform: translateY(0); }
    90% { opacity: 0; transform: translateY(-15px); }
    100% { opacity: 0; }
}




.horror-box {
    position: relative;
    display: inline-block;
    overflow: hidden; /* 문구가 팝업 밖으로 지저분하게 나가지 않게 함 */
}

/* 이미지 호버 시 흑백 처리 */
.horror-box:hover .gaz {
    filter: grayscale(100%) contrast(200%);
    transition: 0.3s;
}

/* 문구들이 배치될 레이어 */
.horror-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 이미지 호버 방해 방지 */
    visibility: hidden;
}

.horror-box:hover .horror-layer {
    visibility: visible;
}

/* 문구 공통 스타일 */
.horror-layer span {
    position: absolute;
    font-family: 'Galmuri7', sans-serif;
    color: rgb(255, 0, 0);
    opacity: 0;
    white-space: nowrap;
    font-weight: bold;
}

/* 호버 시 개별 애니메이션 실행 (스르륵 나타나며 미세하게 떨림) */
.horror-box:hover span {
    animation: appearAndShake 0.5s forwards;
}

/* 위치 및 타이밍 설정 (마구잡이 배치) */
.m1 { top: 10%; left: 5%; font-size: 1.2rem; animation-delay: 0.1s !important; }
.m2 { top: 25%; left: 50%; font-size: 1.8rem; animation-delay: 0.4s !important; }
.m3 { bottom: 15%; left: 10%; font-size: 1.5rem; animation-delay: 0.7s !important; }
.m4 { top: 45%; left: 20%; font-size: 2.2rem; animation-delay: 0.2s !important; color: red !important; }
.m5 { bottom: 40%; right: 5%; font-size: 1.3rem; animation-delay: 0.9s !important; }
.m6 { top: 5%; right: 15%; font-size: 1.1rem; animation-delay: 0.5s !important; }
.m7 { bottom: 5%; left: 40%; font-size: 2rem; animation-delay: 0.3s !important; }
.m8 { top: 60%; right: 25%; font-size: 1.6rem; animation-delay: 0.8s !important; }
.m9 { top: 35%; left: -5%; font-size: 2.5rem; animation-delay: 1.1s !important; opacity: 0.5; }

/* 애니메이션: 투명도 변화 + 기괴한 떨림 */
@keyframes appearAndShake {
    0% { opacity: 0; transform: scale(0.8) translate(0, 0); }
    100% { 
        opacity: 1; 
        transform: scale(1) translate(2px, -2px); /* 최종 위치에서 살짝 어긋남 */
    }
}