/**
 * 버튼 애니메이션 효과 유틸리티 클래스
 *
 * 사용법:
 * - 버튼이나 아이콘에 .button-animation-effect 클래스를 추가
 * - 예: <button class="btn button-animation-effect">...</button>
 * - 예: <span class="button-animation-effect admin-icon"><i class="fa-solid fa-shield"></i></span>
 */

.button-animation-effect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0d6efd, #0056d3);
    border: none;
    color: white !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    /* 무한 반복 애니메이션 */
    animation: pulse-glow-infinite 3s ease-in-out infinite;
}

/* 호버 ripple 효과를 위한 pseudo element */
.button-animation-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

/* Hover 시 ripple 효과 */
.button-animation-effect:hover::before {
    width: 50px;
    height: 50px;
}

/* Hover 스타일 */
.button-animation-effect:hover {
    transform: scale(1.15) translateY(-2px);
    background: linear-gradient(135deg, #0056d3, #003d9a);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    color: white !important;
    /* 호버 시 애니메이션 일시 정지 */
    animation-play-state: paused;
}

/* Active 스타일 */
.button-animation-effect:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 내부 아이콘 스타일 */
.button-animation-effect i,
.button-animation-effect svg {
    z-index: 1;
    color: white !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover 시 아이콘 회전 - admin-icon은 제외 */
.button-animation-effect:not(.admin-icon):hover i,
.button-animation-effect:not(.admin-icon):hover svg {
    transform: rotate(90deg) scale(1.1);
    color: white !important;
}

/* Focus 스타일 */
.button-animation-effect:focus,
.button-animation-effect:focus-visible {
    outline: none;
    box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3),
                0 0 0 3px rgba(13, 110, 253, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white !important;
}

/* 무한 반복 펄스 애니메이션 */
@keyframes pulse-glow-infinite {
    0%, 100% {
        box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3),
                    0 0 0 0 rgba(13, 110, 253, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    25% {
        box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3),
                    0 0 0 6px rgba(13, 110, 253, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3),
                    0 0 0 10px rgba(13, 110, 253, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3),
                    0 0 0 6px rgba(13, 110, 253, 0.03),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* 드롭다운 액션 버튼 스타일 (작은 크기 dropdown-action-btn과 함께) */
.dropdown-action-btn.button-animation-effect {
    width: 30px;
    height: 30px;
    padding: 0;
}

/* 드롭다운 메뉴 스타일 */
.button-animation-effect + .dropdown-menu,
.dropdown-action-btn + .dropdown-menu {
    border-radius: 8px;
    margin-top: 6px;
    border: 1px solid rgba(13, 110, 253, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 관리자 아이콘용 특별 스타일 - span 컨테이너용 */
span.button-animation-effect.admin-icon {
    background: linear-gradient(135deg, #dc3545, #b02a37) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 기본 파란색 애니메이션 대신 빨간색 애니메이션 사용 */
    animation: pulse-glow-admin 3s ease-in-out infinite !important;
}

/* 관리자 아이콘 펄스 애니메이션 (빨간색 테마) */
@keyframes pulse-glow-admin {
    0%, 100% {
        box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3),
                    0 0 0 0 rgba(220, 53, 69, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    25% {
        box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3),
                    0 0 0 6px rgba(220, 53, 69, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    50% {
        box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3),
                    0 0 0 10px rgba(220, 53, 69, 0.08),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    75% {
        box-shadow: 0 3px 6px rgba(220, 53, 69, 0.3),
                    0 0 0 6px rgba(220, 53, 69, 0.03),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

/* 관리자 아이콘 내부 FontAwesome 아이콘 스타일 */
span.button-animation-effect.admin-icon i {
    font-size: 14px !important;
    color: white !important;
    line-height: 1 !important;
    /* 회전 효과 제거 */
    transform: none !important;
}

/* 관리자 아이콘 호버 상태 */
span.button-animation-effect.admin-icon:hover {
    background: linear-gradient(135deg, #b02a37, #842029) !important;
    transform: scale(1.15) !important;
    /* 호버 시 애니메이션 일시 정지 */
    animation-play-state: paused !important;
}

/* 관리자 아이콘 호버 시에도 아이콘 회전 없음 */
span.button-animation-effect.admin-icon:hover i {
    transform: none !important;
    color: white !important;
}