/* ========================================
   3D Visualization Effect
   ======================================== */

.visualizer-3d #visualizer-container,
.visualizer-3d .step-visualizer,
.visualizer-3d .compare-visualizer {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.visualizer-3d .bar {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-10deg) rotateY(-15deg);
    background: linear-gradient(180deg,
            var(--bar-default) 0%,
            color-mix(in srgb, var(--bar-default) 70%, black) 100%);
    border-radius: 2px 2px 0 0;
}

.visualizer-3d .bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 12px;
    height: 100%;
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--bar-default) 60%, black) 0%,
            color-mix(in srgb, var(--bar-default) 40%, black) 100%);
    transform: skewY(-45deg);
    transform-origin: top left;
}

.visualizer-3d .bar::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 12px;
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bar-default) 90%, white) 0%,
            var(--bar-default) 100%);
    transform: skewX(-45deg);
    transform-origin: bottom left;
}

.visualizer-3d .bar.compare {
    background: linear-gradient(180deg,
            var(--bar-compare) 0%,
            color-mix(in srgb, var(--bar-compare) 70%, black) 100%);
}

.visualizer-3d .bar.compare::before {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--bar-compare) 60%, black) 0%,
            color-mix(in srgb, var(--bar-compare) 40%, black) 100%);
}

.visualizer-3d .bar.compare::after {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bar-compare) 90%, white) 0%,
            var(--bar-compare) 100%);
}

.visualizer-3d .bar.swap {
    background: linear-gradient(180deg,
            var(--bar-swap) 0%,
            color-mix(in srgb, var(--bar-swap) 70%, black) 100%);
}

.visualizer-3d .bar.swap::before {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--bar-swap) 60%, black) 0%,
            color-mix(in srgb, var(--bar-swap) 40%, black) 100%);
}

.visualizer-3d .bar.swap::after {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bar-swap) 90%, white) 0%,
            var(--bar-swap) 100%);
}

.visualizer-3d .bar.sorted {
    background: linear-gradient(180deg,
            var(--bar-sorted) 0%,
            color-mix(in srgb, var(--bar-sorted) 70%, black) 100%);
}

.visualizer-3d .bar.sorted::before {
    background: linear-gradient(90deg,
            color-mix(in srgb, var(--bar-sorted) 60%, black) 0%,
            color-mix(in srgb, var(--bar-sorted) 40%, black) 100%);
}

.visualizer-3d .bar.sorted::after {
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--bar-sorted) 90%, white) 0%,
            var(--bar-sorted) 100%);
}

.visualizer-3d #visualizer-container,
.visualizer-3d .step-visualizer {
    padding: 20px 30px 10px 10px;
}