/* ═══════════════════════════════════════════════════════════════
   Ezzy v2 — Neon orb avatar (Tier 1 motion)
   ─────────────────────────────────────────────────────────────
   Dual-tone glowing sphere with cyan/magenta bloom halos,
   plasma mesh interior, asymmetric glowing eyes and smile.
   Pure SVG + CSS. Zero external assets.
   ═══════════════════════════════════════════════════════════════ */

.ezzy-av {
    --ezzy-size: 140px;
    position: relative;
    display: inline-block;
    width: var(--ezzy-size);
    height: var(--ezzy-size);
    flex-shrink: 0;
    line-height: 0;
}

/* Main SVG — breathes + floats */
.ezzy-av__img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    animation: ezzy-float 5s ease-in-out infinite,
               ezzy-breathe 4.2s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* Optional extra halo (outside the SVG) — can be empty now, SVG brings its own */
.ezzy-av__glow {
    position: absolute;
    z-index: 1;
    inset: 5%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 40%, rgba(34, 211, 238, 0.22) 0%, transparent 55%),
                radial-gradient(circle at 70% 60%, rgba(217, 70, 239, 0.22) 0%, transparent 55%);
    filter: blur(16px);
    opacity: 0.9;
    animation: ezzy-glow 4.2s ease-in-out infinite;
    pointer-events: none;
}

/* Whole-body breathing */
@keyframes ezzy-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

/* Vertical float */
@keyframes ezzy-float {
    0%, 100% { margin-top: 0; }
    50%      { margin-top: -4px; }
}

/* Halo breathing */
@keyframes ezzy-glow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* ═══════════════════════════════════════════════════════════════
   INNER SVG PART ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

/* Bloom halos drift — rotate opposite directions for aurora feel */
.ezzy-av .ez-bloom-cyan {
    transform-origin: 120px 120px;
    animation: ezzy-bloom-rotate 16s linear infinite;
}
.ezzy-av .ez-bloom-magenta {
    transform-origin: 120px 120px;
    animation: ezzy-bloom-rotate-reverse 20s linear infinite;
}
@keyframes ezzy-bloom-rotate         { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ezzy-bloom-rotate-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Eye blink — subtle squeeze every ~6s */
.ezzy-av .ez-eye {
    transform-origin: center;
    transform-box: fill-box;
    animation: ezzy-eye-blink 6s infinite;
}
.ezzy-av .ez-eye-right { animation-delay: 0.05s; }
@keyframes ezzy-eye-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    94%, 97%      { transform: scaleY(0.15); }
}

/* Eye glow pulse */
.ezzy-av .ez-eye-left circle:first-child,
.ezzy-av .ez-eye-right circle:first-child {
    animation: ezzy-eye-pulse 3s ease-in-out infinite;
}
.ezzy-av .ez-eye-right circle:first-child { animation-delay: 1.5s; }
@keyframes ezzy-eye-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* ── Mouth states ─────────────────────────────────────────────
   All four mouth variants overlap in the same position.
   Visibility is controlled by opacity (so SVG keeps laid out).
   Default: only the smile is visible. */
.ezzy-av .ez-mouth { opacity: 0; transition: opacity 0.18s ease; }
.ezzy-av .ez-mouth-smile { opacity: 1; }

/* Smile breathes gently when idle */
.ezzy-av .ez-mouth-smile {
    animation: ezzy-smile-pulse 4.2s ease-in-out infinite;
}
@keyframes ezzy-smile-pulse {
    0%, 100% { stroke: #5eead4; }
    50%      { stroke: #67e8f9; }
}

/* Rim colour rotation — shifts the cyan→magenta gradient feel */
.ezzy-av .ez-rim {
    animation: ezzy-rim-pulse 4s ease-in-out infinite;
}
@keyframes ezzy-rim-pulse {
    0%, 100% { opacity: 0.75; stroke-width: 1.5; }
    50%      { opacity: 1;    stroke-width: 2; }
}

/* Plasma rings — each ring pulses at slightly different tempo */
.ezzy-av .ez-ring-1 { animation: ezzy-ring-1 3.7s ease-in-out infinite; transform-origin: 120px 120px; transform-box: fill-box; }
.ezzy-av .ez-ring-2 { animation: ezzy-ring-2 5.1s ease-in-out infinite; transform-origin: 120px 120px; transform-box: fill-box; }
.ezzy-av .ez-ring-3 { animation: ezzy-ring-3 4.3s ease-in-out infinite; transform-origin: 120px 120px; transform-box: fill-box; }
@keyframes ezzy-ring-1 { 0%,100%{opacity:0.35;transform:scale(1);} 50%{opacity:0.55;transform:scale(1.04);} }
@keyframes ezzy-ring-2 { 0%,100%{opacity:0.3;transform:scale(1);}  50%{opacity:0.5;transform:scale(1.06);} }
@keyframes ezzy-ring-3 { 0%,100%{opacity:0.25;transform:scale(1);} 50%{opacity:0.45;transform:scale(1.08);} }

/* Sparkle twinkles — independent timing gives organic feel */
.ezzy-av .ez-sparkle { animation: ezzy-twinkle 3s ease-in-out infinite; }
.ezzy-av .ez-sparkle.s1 { animation-delay: 0s; }
.ezzy-av .ez-sparkle.s2 { animation-delay: 0.7s; }
.ezzy-av .ez-sparkle.s3 { animation-delay: 1.4s; }
.ezzy-av .ez-sparkle.s4 { animation-delay: 2.1s; }
.ezzy-av .ez-sparkle.s5 { animation-delay: 0.35s; }
.ezzy-av .ez-sparkle.s6 { animation-delay: 1.75s; }
@keyframes ezzy-twinkle {
    0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
    40%           { opacity: 1;   transform: scale(1.8); }
}

/* ═══════════════════════════════════════════════════════════════
   STATES (whole-avatar)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   SPEAKING — mouth cycles through smile → mid → O for lip-sync
   ═══════════════════════════════════════════════════════════════ */
.ezzy-av.is-speaking .ezzy-av__img {
    animation: ezzy-float 5s ease-in-out infinite,
               ezzy-speak-pulse 0.65s ease-in-out infinite;
}
.ezzy-av.is-speaking .ez-eye { animation: ezzy-eye-blink 3s infinite; }
.ezzy-av.is-speaking .ez-rim { animation: ezzy-rim-pulse 1.5s ease-in-out infinite; }

/* Three mouth shapes cycle through a 900ms loop */
.ezzy-av.is-speaking .ez-mouth-smile { animation: ez-mouth-cycle-1 0.9s infinite; }
.ezzy-av.is-speaking .ez-mouth-mid   { animation: ez-mouth-cycle-2 0.9s infinite; }
.ezzy-av.is-speaking .ez-mouth-o     { animation: ez-mouth-cycle-3 0.9s infinite; }

@keyframes ez-mouth-cycle-1 { 0%, 25%, 100% { opacity: 1; } 26%, 99% { opacity: 0; } }
@keyframes ez-mouth-cycle-2 { 0%, 25% { opacity: 0; } 26%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes ez-mouth-cycle-3 { 0%, 60% { opacity: 0; } 61%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes ezzy-speak-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* ═══════════════════════════════════════════════════════════════
   THINKING — eyes look up-right, mouth becomes "hmm" line,
   rim dims, body sways gently.
   ═══════════════════════════════════════════════════════════════ */
.ezzy-av.is-thinking .ezzy-av__img {
    animation: ezzy-float 5s ease-in-out infinite,
               ezzy-think-sway 2.6s ease-in-out infinite;
}
/* Eyes gently look up-and-right (keeps blinking via merged keyframes) */
.ezzy-av.is-thinking .ez-eye {
    transform-box: view-box;
    transform-origin: center;
    animation: ezzy-eye-blink-thinking 6s infinite;
}
@keyframes ezzy-eye-blink-thinking {
    0%, 92%, 100% { transform: translate(3px, -2.5px) scaleY(1); }
    94%, 97%      { transform: translate(3px, -2.5px) scaleY(0.15); }
}
/* Swap to thinking mouth */
.ezzy-av.is-thinking .ez-mouth-smile { opacity: 0; animation: none; }
.ezzy-av.is-thinking .ez-mouth-think { opacity: 1; }
.ezzy-av.is-thinking .ez-rim { opacity: 0.5; animation: none; }
@keyframes ezzy-think-sway {
    0%, 100% { transform: translateX(-2px) rotate(-2deg); }
    50%      { transform: translateX(2px)  rotate(2deg); }
}

/* Entering */
.ezzy-av.is-entering .ezzy-av__img {
    animation: ezzy-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
               ezzy-float 5s ease-in-out infinite 0.9s,
               ezzy-breathe 4.2s ease-in-out infinite 0.9s;
}
.ezzy-av.is-entering .ezzy-av__glow {
    animation: ezzy-enter-glow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
               ezzy-glow 4.2s ease-in-out infinite 0.9s;
}
@keyframes ezzy-enter {
    0%   { opacity: 0; transform: translateY(30px) scale(0.6); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes ezzy-enter-glow {
    0%   { opacity: 0; transform: scale(0.4); }
    100% { opacity: 0.9; transform: scale(1); }
}

/* Happy — one-shot wiggle */
.ezzy-av.is-happy .ezzy-av__img {
    animation: ezzy-happy 0.8s ease-in-out,
               ezzy-float 5s ease-in-out infinite 0.8s,
               ezzy-breathe 4.2s ease-in-out infinite 0.8s;
}
@keyframes ezzy-happy {
    0%   { transform: rotate(0) scale(1); }
    20%  { transform: rotate(-10deg) scale(1.1); }
    40%  { transform: rotate(10deg)  scale(1.1); }
    60%  { transform: rotate(-7deg)  scale(1.05); }
    80%  { transform: rotate(7deg)   scale(1.05); }
    100% { transform: rotate(0)      scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════ */
.ezzy-av.size-hero  { --ezzy-size: 180px; }

/* 3D-orb avatar variant — canvas positions absolutely inside */
.ezzy-av--3d {
    position: relative;
    overflow: visible;       /* bloom spills outside the element bounds */
}
.ezzy-av--3d canvas {
    display: block;
    width: 100%  !important;
    height: 100% !important;
}
/* Pill-size orb — let bloom extend slightly past the pill without clipping */
.ezzy-av.size-pill.ezzy-av--3d {
    overflow: visible;
}
.ezzy-av.size-pill.ezzy-av--3d canvas {
    /* tiny overdraw so the rim doesn't hard-clip at the pill radius */
    margin: -4px;
    width: calc(100% + 8px)  !important;
    height: calc(100% + 8px) !important;
}
.ezzy-av.size-modal { --ezzy-size: 64px; }
.ezzy-av.size-pill  { --ezzy-size: 44px; }
.ezzy-av.size-msg   { --ezzy-size: 64px; }
.ezzy-av.size-pill .ezzy-av__glow,
.ezzy-av.size-msg  .ezzy-av__glow { display: none; }

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — respect reduced motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ezzy-av__img,
    .ezzy-av__glow,
    .ezzy-av *[class^="ez-"] {
        animation: none !important;
    }
}