/* Holographic 3D Card — interactive/auto-rotating shimmer card */
.holo-card {
    width: 48px;
    aspect-ratio: 2.5 / 3.5;
    border-radius: 10%;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.15s linear;
    transform: rotateY(calc(-12deg * var(--holo-rx, 0)))
               rotateX(calc(12deg * var(--holo-ry, 0)));
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    flex-shrink: 0;
}

.holo-card-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            ellipse at calc(70% - var(--holo-rx, 0) * 20%)
                        calc(30% - var(--holo-ry, 0) * 20%),
            rgba(255,255,255,0.5),
            var(--accent-1) 2%,
            var(--accent-2) 25%,
            transparent
        ),
        linear-gradient(
            110deg,
            var(--accent-1) calc(10% - var(--holo-rx, 0) * 15%),
            var(--accent-2) calc(35% - var(--holo-rx, 0) * 15%),
            var(--accent-1) calc(55% - var(--holo-rx, 0) * 15%),
            transparent calc(80% - var(--holo-rx, 0) * 15%)
        );
    mix-blend-mode: hard-light;
    opacity: 0.5;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.holo-card-dots {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0.12;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.holo-card-dots::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(
        circle,
        var(--accent-1) 0.4px,
        transparent 0.4px
    ) repeat;
    background-size: 4px 4px;
    transform: rotate(45deg);
}

.holo-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--accent-2);
    text-shadow: 0 0 6px var(--accent-2);
    z-index: 1;
    pointer-events: none;
}