@property --orb-core {
    syntax: '<color>';
    inherits: false;
    initial-value: #4040e0;
}
@property --orb-glow {
    syntax: '<color>';
    inherits: false;
    initial-value: #1a1aff;
}
@property --orb-outer {
    syntax: '<color>';
    inherits: false;
    initial-value: #0a0a40;
}

#orb-scene {
    position: relative;
    width: 80vmin;
    height: 80vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#orb-scene.shrunk {
    transform: scale(0.3) translateY(-30vmin);
    pointer-events: none;
}

#processing-arcs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vmin;
    height: 80vmin;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

#orb.processing ~ #processing-arcs { opacity: 1; }

#orb {
    width: 65vmin;
    height: 65vmin;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,0.15) 0%,
        var(--orb-core) 40%,
        var(--orb-outer) 100%
    );
    box-shadow: 0 0 60px 20px var(--orb-glow), 0 0 120px 40px var(--orb-outer);
    transition: --orb-core 1.4s cubic-bezier(0.4, 0, 0.2, 1), --orb-glow 1.4s cubic-bezier(0.4, 0, 0.2, 1), --orb-outer 1.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 1.2s cubic-bezier(0.4, 0, 0.2, 1), height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, border-radius;
    animation: orb-breathe 4s ease-in-out infinite, orb-wobble 6s ease-in-out infinite;
    overflow: hidden;
}

#orb.speaking {
    width: 55vmin;
    height: 55vmin;
}

#orb::before {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--orb-glow), transparent 70%);
    filter: blur(40px);
    opacity: 0.4;
    pointer-events: none;
}

@keyframes orb-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes orb-wobble {
    0%, 100% { border-radius: 50%; }
    25% { border-radius: 48% 52% 50% 50%; }
    50% { border-radius: 50% 48% 52% 50%; }
    75% { border-radius: 52% 50% 48% 52%; }
}

#voice-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 30%;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#orb.listening #voice-wave { opacity: 1; }
#orb.narrator.speaking #voice-wave { opacity: 1; }

#orb.narrator {
    --orb-core: #e8956a;
    --orb-glow: #ffb088;
    --orb-outer: #5a2a15;
    animation: orb-breathe 4s ease-in-out infinite, orb-wobble 6s ease-in-out infinite;
}

#orb.listening {
    --orb-core: #e0a040;
    --orb-glow: #ffd700;
    --orb-outer: #403000;
    animation: orb-breathe 2.5s ease-in-out infinite, orb-wobble 3.5s ease-in-out infinite;
}

#orb.processing {
    --orb-core: #7040c0;
    --orb-glow: #9060ff;
    --orb-outer: #2a1060;
    width: 45vmin;
    height: 45vmin;
    animation: orb-pulse-rapid 1.2s ease-in-out infinite;
}

#processing-spinner {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    border: 2px dashed rgba(144,96,255,0.5);
    opacity: 0;
    pointer-events: none;
    animation: none;
}

#orb.processing #processing-spinner {
    opacity: 1;
    animation: spin-ring 2s linear infinite;
}

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

@keyframes orb-pulse-rapid {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.02); opacity: 1; }
}

.orb-theme-blue #orb {
    --orb-core: #4040e0;
    --orb-glow: #1a1aff;
    --orb-outer: #0a0a40;
}

.orb-theme-narrator #orb {
    --orb-core: #e8956a;
    --orb-glow: #ffb088;
    --orb-outer: #5a2a15;
}

.orb-theme-purple #orb {
    --orb-core: #7040c0;
    --orb-glow: #9060ff;
    --orb-outer: #2a1060;
}

@media (prefers-reduced-motion: reduce) {
    #orb, #processing-spinner {
        animation: none !important;
    }
    #orb { border-radius: 50% !important; }
}