@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes counter-spin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(-360deg); }
}

.bg-vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, #040109 95%);
}

.glyph-grid {
    background-image: 
        linear-gradient(rgba(140, 80, 220, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 80, 220, 0.08) 1px, transparent 1px);
    background-size: 45px 45px;
    mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);
}

.archetype-bubble {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.archetype-bubble.selected {
    transform: scale(1.65);
    border-color: #e3b6ff;
    box-shadow: 0 0 70px 25px rgba(200, 80, 255, 0.8);
    z-index: 100;
}

.archetype-bubble.dimmed {
    opacity: 0.2;
    filter: grayscale(1);
    transform: scale(0.75);
    pointer-events: none;
}

.archetype-bubble:hover:not(.selected):not(.dimmed) {
    transform: scale(1.18);
    border-color: rgba(192, 132, 252, 0.7);
    box-shadow: 0 0 45px 12px rgba(190, 80, 255, 0.5);
}