/* ======================
   기본 애니메이션
   ====================== */

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ======================
   그라데이션 애니메이션
   ====================== */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 애니메이션 그라데이션 텍스트 (기본) */
.animated-gradient-text {
    background: linear-gradient(
        90deg,
        #00FF00 0%,
        #00DDAA 25%,
        #00BFFF 50%,
        #00DDAA 75%,
        #00FF00 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    font-weight: 700;
}

/* 애니메이션 그라데이션 텍스트 (대체) */
.animated-gradient-text-alt {
    background: linear-gradient(
        90deg,
        #00BFFF 0%,
        #00DDAA 25%,
        #00FF00 50%,
        #00DDAA 75%,
        #00BFFF 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    animation-delay: 0.5s;
    font-weight: 600;
}

/* 애니메이션 그라데이션 버튼 */
.animated-gradient-btn {
    background: linear-gradient(
        90deg,
        #00FF00 0%,
        #00DDAA 25%,
        #00BFFF 50%,
        #00DDAA 75%,
        #00FF00 100%
    );
    background-size: 200% auto;
    animation: gradientShift 3s ease infinite;
    color: #000000;
}

.animated-gradient-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.4);
}

.animated-gradient-btn svg {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));
}

/* ======================
   버튼 호버 효과
   ====================== */

.btn-hover:hover {
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ======================
   사이드바 애니메이션
   ====================== */

.sidebar-enter {
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
}

.sidebar-enter-active {
    transform: translateX(0);
}