/* 1. 무지개 배경 애니메이션 */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. 무지개 텍스트 색상 애니메이션 */
@keyframes rainbow-shift {
    0%   { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } /* 빨강 */
    14%  { color: #ff7f00; } /* 주황 */
    28%  { color: #ffff00; } /* 노랑 */
    42%  { color: #00ff00; } /* 초록 */
    56%  { color: #0000ff; } /* 파랑 */
    70%  { color: #4b0082; } /* 남색 */
    84%  { color: #9400d3; } /* 보라 */
    100% { color: #ff0000; filter: drop-shadow(0 0 8px #ff0000); } /* 빨강 */
}

/* 메인 컨테이너 스타일: 스크롤을 유발하고 배경이 계속 바뀜 */
body {
    height: 300vh; /* 엄청나게 긴 스크롤 길이 */
    /* 사용자 요청: 2번째 사진을 배경에 넣기 (로컬 실행 시 경로 수정 필요) */
    background-image: url('./src/3.png');
    background-size: cover; /* 배경 전체 덮기 */
    background-attachment: fixed; /* 스크롤해도 배경 고정 */
    background-repeat: no-repeat;
    background-position: center center;
    position: relative; 
    z-index: 1; /* 콘텐츠보다 아래에 위치 */

    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    /* 커서를 💥 이모지로 변경 */
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='30' fill='red'>💥</text></svg>") 20 20, auto;
}

/* 난잡함을 위해 무지개 그라데이션 오버레이를 배경 위에 얇게 추가 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 투명도를 낮춘 무지개 그라데이션 */
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 127, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 255, 0, 0.2), rgba(0, 0, 255, 0.2), rgba(75, 0, 130, 0.2), rgba(148, 0, 211, 0.2));
    background-size: 400% 400%;
    animation: gradient-shift 10s ease infinite;
    z-index: -1; /* 이미지 배경보다 위에, 콘텐츠보다는 아래에 */
    pointer-events: none;
}


/* 텍스트 흔들기 애니메이션 */
@keyframes shake {
    0%, 100% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
}

/* 폰트 크기 무작위 변동 애니메이션 */
@keyframes sizeWobble {
    0% { font-size: 1rem; }
    25% { font-size: 3rem; }
    50% { font-size: 0.5rem; }
    75% { font-size: 4rem; }
    100% { font-size: 1rem; }
}

/* 3. 중앙 요소 깜빡임 (무지개 테마로 변경) */
@keyframes strobe {
    0% { background-color: #ff0000; border-color: #00ffff; }
    14% { background-color: #ff7f00; border-color: #0000ff; }
    28% { background-color: #ffff00; border-color: #4b0082; }
    56% { background-color: #0000ff; border-color: #ff7f00; }
    70% { background-color: #4b0082; border-color: #ffff00; }
    84% { background-color: #9400d3; border-color: #00ff00; }
    100% { background-color: #ff0000; border-color: #00ffff; }
}


.chaotic-text {
    /* 텍스트 흔들기, 크기 변동, 무지개 색상 변동 애니메이션 적용 */
    animation: shake 0.5s infinite, sizeWobble 2s infinite alternate, rainbow-shift 3s linear infinite;
    position: absolute;
    white-space: nowrap;
    padding: 8px;
    border-radius: 8px;
    text-shadow: 2px 2px 0 #000;
    filter: drop-shadow(0 0 5px currentColor); /* 무지개 색상에 맞춘 그림자 */
    z-index: 10;
}

.chaotic-img {
    position: absolute;
    object-fit: contain; /* 이미지 비율 유지 */
    transition: all 0.05s ease-out; /* 부드러운 이동 */
    z-index: 10;
}

.flashing-box {
    animation: strobe 0.1s infinite;
    border: 5px dashed yellow;
    position: absolute;
    padding: 1rem;
    text-align: center;
    font-weight: bold;
    transform: rotate(15deg);
    z-index: 50; /* Z-index 높임 */
}

/* 커서 추적기 스타일 */
.cursor-follower {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #ff00ff; /* 마젠타 */
    border: 5px solid #00ffff; /* 시안 */
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    z-index: 9999;
    box-shadow: 0 0 20px #ff00ff;
    /* 커서 추적기에도 무지개 애니메이션 적용 */
    animation: rainbow-shift 1s linear infinite; 
    border-color: currentColor !important; /* 애니메이션으로 경계선 색상 제어 */
}