/**
 * 算法缩略图 SVG 样式和动画
 * @author daichangya
 */

/* SVG 图标容器 */
.algo-icon {
    width: 60px;
    height: 40px;
    margin-bottom: 8px;
    display: block;
}

.algo-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ===== 通用动画 ===== */

/* 柱状图元素 */
.algo-icon .bar {
    transition: all 0.3s ease;
}

/* 节点元素 */
.algo-icon .node {
    transition: all 0.3s ease;
}

/* 路径元素 */
.algo-icon .path-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s ease;
}

/* 悬停时路径动画 */
.algorithm-card:hover .path-line {
    stroke-dashoffset: 0;
}

/* ===== 冒泡排序动画 ===== */
.algorithm-card.bubble:hover .bar:nth-child(1) { transform: translateY(-2px); }
.algorithm-card.bubble:hover .bar:nth-child(2) { transform: translateY(-4px); transition-delay: 0.05s; }
.algorithm-card.bubble:hover .bar:nth-child(3) { transform: translateY(-3px); transition-delay: 0.1s; }
.algorithm-card.bubble:hover .bar:nth-child(4) { transform: translateY(-5px); transition-delay: 0.15s; }
.algorithm-card.bubble:hover .bar:nth-child(5) { transform: translateY(-2px); transition-delay: 0.2s; }

/* ===== 堆排序动画 ===== */
.algorithm-card.heap:hover .node {
    filter: brightness(1.3);
}
.algorithm-card.heap:hover .node:nth-child(1) { transform: scale(1.1); }
.algorithm-card.heap:hover .node:nth-child(2) { transform: scale(1.05); transition-delay: 0.1s; }
.algorithm-card.heap:hover .node:nth-child(3) { transform: scale(1.05); transition-delay: 0.15s; }

/* ===== 快速排序动画 ===== */
.algorithm-card.quick:hover .pivot {
    filter: brightness(1.5);
    transform: scaleY(1.1);
}
.algorithm-card.quick:hover .partition-line {
    opacity: 1;
    stroke-dashoffset: 0;
}
.algo-icon .partition-line {
    opacity: 0.5;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: all 0.3s ease;
}

/* ===== 归并排序动画 ===== */
.algorithm-card.merge:hover .merge-group {
    transform: translateY(-2px);
}
.algorithm-card.merge:hover .merge-group:nth-child(1) { transition-delay: 0s; }
.algorithm-card.merge:hover .merge-group:nth-child(2) { transition-delay: 0.1s; }

/* ===== Myers Diff 动画 ===== */
.algorithm-card.myers:hover .diff-add {
    opacity: 1;
    transform: translateX(0);
}
.algorithm-card.myers:hover .diff-del {
    opacity: 1;
    transform: translateX(0);
}
.algo-icon .diff-add,
.algo-icon .diff-del {
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* ===== LCS 动画 ===== */
.algorithm-card.lcs:hover .lcs-cell.highlight {
    fill: var(--accent-pink);
    opacity: 1;
}
.algo-icon .lcs-cell {
    transition: all 0.3s ease;
}
.algo-icon .lcs-cell.highlight {
    opacity: 0.5;
}

/* ===== KMP 动画 ===== */
.algorithm-card.kmp:hover .kmp-arrow {
    transform: translateX(8px);
    opacity: 1;
}
.algo-icon .kmp-arrow {
    opacity: 0.5;
    transition: all 0.3s ease;
}

/* ===== Dijkstra 动画 ===== */
.algorithm-card.dijkstra:hover .dijkstra-path {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 4px var(--accent-orange));
}
.algo-icon .dijkstra-path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: all 0.5s ease;
}

/* ===== BFS/DFS 动画 ===== */
.algorithm-card.bfs:hover .wave {
    transform: scale(1.3);
    opacity: 0;
}
.algo-icon .wave {
    transform-origin: center;
    transition: all 0.4s ease;
}

/* ===== A* 寻路动画 ===== */
.algorithm-card.astar:hover .astar-path {
    stroke-dashoffset: 0;
}
.algo-icon .astar-path {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.6s ease;
}
.algorithm-card.astar:hover .astar-star {
    transform: rotate(72deg) scale(1.2);
    filter: drop-shadow(0 0 3px var(--accent-yellow));
}
.algo-icon .astar-star {
    transform-origin: center;
    transition: all 0.3s ease;
}

/* ===== 二分查找动画 ===== */
.algorithm-card.binary:hover .binary-pointer {
    transform: translateX(8px);
}
.algorithm-card.binary:hover .binary-range {
    transform: scaleX(0.5);
    transform-origin: center;
}
.algo-icon .binary-pointer,
.algo-icon .binary-range {
    transition: all 0.3s ease;
}

/* ===== 背包动画 ===== */
.algorithm-card.knapsack:hover .knapsack-item {
    transform: translateY(-3px);
    opacity: 1;
}
.algo-icon .knapsack-item {
    opacity: 0.7;
    transition: all 0.3s ease;
}
.algo-icon .knapsack-item:nth-child(2) { transition-delay: 0.1s; }
.algo-icon .knapsack-item:nth-child(3) { transition-delay: 0.2s; }

/* ===== 凸包动画 ===== */
.algorithm-card.convex:hover .convex-hull {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 3px var(--accent-green));
}
.algo-icon .convex-hull {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition: all 0.6s ease;
}
.algorithm-card.convex:hover .convex-point {
    transform: scale(1.3);
}
.algo-icon .convex-point {
    transition: all 0.3s ease;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .algo-icon {
        width: 50px;
        height: 35px;
    }
}