/* animations.css - 애니메이션 관련 스타일 */

/* 로고 그라디언트 애니메이션 */
@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 페이드아웃 애니메이션 */
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}

/* 펄스 애니메이션 (디자인 카테고리 원형) */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.3; }
}

/* 뉴스 로딩 애니메이션 */
@keyframes newsLoad {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* 뉴런 펄스 애니메이션 */
@keyframes neuronPulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* 트렌드 그래프 애니메이션 */
@keyframes graphGrow {
    0% { height: 0; opacity: 0; }
    100% { height: var(--graph-height); opacity: 1; }
}

/* 코드 타이핑 애니메이션 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* 커서 깜빡임 애니메이션 */
@keyframes blink {
    50% { border-color: transparent }
}

/* 슬라이드인 애니메이션 */
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 회전 애니메이션 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 심장 박동 애니메이션 (좋아요 버튼) */
@keyframes heartbeat {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 반짝임 애니메이션 */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 물결 애니메이션 */
@keyframes wave {
    0% {
        transform: translateX(-100%) scaleY(0.5);
    }
    50% {
        transform: translateX(0) scaleY(1);
    }
    100% {
        transform: translateX(100%) scaleY(0.5);
    }
}

/* 바운스 애니메이션 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 페이드인 위로 애니메이션 (태그에 사용) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 카드 애니메이션 효과 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
}

/* 이미지 확대 효과 */
.card-image img {
    transition: transform 0.5s ease;
}

.card:hover .card-image img {
    transform: scale(1.05);
}

/* 좋아요 버튼 애니메이션 */
.like-button.active i {
    animation: heartbeat 0.8s ease-in-out;
}

/* 필터 버튼 애니메이션 */
.filter-btn {
    transition: all 0.2s ease;
}

.filter-btn:hover {
    transform: translateY(-1px);
}

/* 토스트 메시지 애니메이션 */
.toast {
    transition: all 0.3s ease;
}

.toast.show {
    animation: fadeInUp 0.3s forwards;
}

/* animations.css 파일에 필터 버튼 관련 애니메이션 추가 */

/* 필터 선택 효과 애니메이션 */
@keyframes filterPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 테두리 강조 애니메이션 */
@keyframes borderGlow {
    0% { box-shadow: 0 0 0 rgba(121, 80, 242, 0); }
    50% { box-shadow: 0 0 8px rgba(121, 80, 242, 0.6); }
    100% { box-shadow: 0 0 0 rgba(121, 80, 242, 0); }
}

/* VibeCoding 선택 애니메이션 */
@keyframes vibeSelect {
    0% {
        border-color: transparent;
        transform: translateY(0);
    }
    40% {
        border-color: var(--vibecoding-color);
        transform: translateY(-3px);
    }
    100% {
        border-color: var(--vibecoding-color);
        transform: translateY(0);
    }
}

/* VibeCoding 해제 애니메이션 */
@keyframes vibeDeselect {
    0% {
        border-color: var(--vibecoding-color);
        transform: translateY(0);
    }
    40% {
        border-color: var(--gray);
        transform: translateY(-1px);
    }
    100% {
        border-color: transparent;
        transform: translateY(0);
    }
}

/* 필터 버튼 선택 시 애니메이션 클래스 */
.filter-btn.selecting {
    animation: filterPulse 0.3s ease;
}

/* VibeCoding 필터 버튼 특별 선택 애니메이션 */
.filter-btn.vibecoding-btn.selecting {
    animation: vibeSelect 0.4s ease forwards;
}

/* VibeCoding 필터 버튼 해제 애니메이션 */
.filter-btn.vibecoding-btn.deselecting {
    animation: vibeDeselect 0.4s ease forwards;
}