.ers-voice-orb {
    --ers-orb-size: 210px;
    --ers-orb-accent: #55c8ff;
    position: relative;
    width: var(--ers-orb-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
    border-radius: 50%;
    animation: ers-orb-breathe 5.8s ease-in-out infinite;
    transition: filter .35s ease, transform .35s ease;
    will-change: transform;
}

.ers-voice-orb::before,
.ers-voice-orb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ers-voice-orb::before {
    inset: 4%;
    z-index: -2;
    background: rgba(48, 119, 228, .22);
    box-shadow:
        0 0 34px color-mix(in srgb, var(--ers-orb-accent) 54%, transparent),
        0 0 82px rgba(45, 105, 218, .34);
    animation: ers-orb-halo 4.6s ease-in-out infinite;
}

.ers-voice-orb::after {
    inset: -7%;
    z-index: -3;
    border: 1px solid rgba(133, 196, 255, .48);
    box-shadow: 0 0 0 10px rgba(62, 124, 225, .06);
    animation: ers-orb-ring 4.2s ease-in-out infinite;
}

.ers-voice-orb__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: url('/local/assets/images/ers-voice-orb-v3.webp?v=20260718-1') center / 126% 126% no-repeat;
    image-rendering: auto;
    filter: saturate(1.08) contrast(1.04);
    animation: ers-orb-flow 12s ease-in-out infinite alternate;
    transition: filter .4s ease;
    will-change: transform, filter;
}

.ers-voice-orb__sheen {
    position: absolute;
    inset: 9%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .56), transparent 18%),
        conic-gradient(from 25deg, transparent, rgba(94, 224, 255, .16), transparent 35%, rgba(125, 255, 202, .12), transparent 72%);
    mix-blend-mode: screen;
    animation: ers-orb-sheen 8s linear infinite;
    pointer-events: none;
}

.ers-voice-orb__mark {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38%;
    max-width: 78px;
    min-width: 48px;
    aspect-ratio: 1;
    padding: 16%;
    box-sizing: content-box;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(247, 251, 255, .86);
    box-shadow: 0 10px 30px rgba(5, 18, 43, .32), inset 0 1px 0 #fff;
    backdrop-filter: blur(8px);
    transition: transform .28s ease, box-shadow .28s ease;
}

.ers-voice-orb__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ers-voice-orb__wave {
    position: absolute;
    left: 50%;
    bottom: 15%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 42%;
    height: 22px;
    transform: translateX(-50%);
    opacity: .7;
}

.ers-voice-orb__wave span {
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 7px rgba(109, 219, 255, .7);
    transform: scaleY(.34);
    transform-origin: center;
    animation: ers-orb-eq .78s ease-in-out infinite;
    animation-play-state: paused;
}

.ers-voice-orb__wave span:nth-child(2),
.ers-voice-orb__wave span:nth-child(8) { animation-delay: .08s; }
.ers-voice-orb__wave span:nth-child(3),
.ers-voice-orb__wave span:nth-child(7) { animation-delay: .16s; }
.ers-voice-orb__wave span:nth-child(4),
.ers-voice-orb__wave span:nth-child(6) { animation-delay: .24s; }
.ers-voice-orb__wave span:nth-child(5) { animation-delay: .32s; }

.is-listening .ers-voice-orb { --ers-orb-accent: #40e3c0; }
.is-listening .ers-voice-orb__texture { filter: saturate(1.22) hue-rotate(38deg) brightness(1.06); }
.is-listening .ers-voice-orb__wave span,
.is-speaking .ers-voice-orb__wave span { animation-play-state: running; }
.is-listening .ers-voice-orb::after { animation-duration: 1.45s; }

.is-thinking .ers-voice-orb { --ers-orb-accent: #b895ff; }
.is-thinking .ers-voice-orb__texture {
    filter: saturate(1.1) hue-rotate(262deg) brightness(.98);
    animation-duration: 2.2s;
}
.is-thinking .ers-voice-orb__sheen { animation-duration: 2.1s; }
.is-thinking .ers-voice-orb__mark { transform: scale(.94); }

.is-speaking .ers-voice-orb { --ers-orb-accent: #6ddcff; }
.is-speaking .ers-voice-orb__texture {
    filter: saturate(1.28) brightness(1.08);
    animation-duration: 2.8s;
}
.is-speaking .ers-voice-orb__mark {
    transform: scale(1.045);
    box-shadow: 0 12px 36px rgba(5, 18, 43, .38), 0 0 24px rgba(131, 224, 255, .42), inset 0 1px 0 #fff;
}
.is-speaking .ers-voice-orb::after { animation-duration: 1s; }

@keyframes ers-orb-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.018); }
}

@keyframes ers-orb-flow {
    0% { transform: rotate(-2deg) scale(1.015); }
    50% { transform: rotate(3deg) scale(1.045); }
    100% { transform: rotate(-1deg) scale(1.025); }
}

@keyframes ers-orb-sheen {
    to { transform: rotate(360deg); }
}

@keyframes ers-orb-halo {
    0%, 100% { opacity: .72; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes ers-orb-ring {
    0%, 100% { opacity: .5; transform: scale(.98); }
    50% { opacity: .9; transform: scale(1.055); }
}

@keyframes ers-orb-eq {
    0%, 100% { transform: scaleY(.28); }
    35% { transform: scaleY(1.1); }
    65% { transform: scaleY(.58); }
}

@media (prefers-reduced-motion: reduce) {
    .ers-voice-orb,
    .ers-voice-orb::before,
    .ers-voice-orb::after,
    .ers-voice-orb__texture,
    .ers-voice-orb__sheen,
    .ers-voice-orb__wave span { animation: none !important; }
}