/* Maya's animated character. Colours are Sunset Grove navy #143860 and gold #bb9668 with an electric-blue rim light #5b9dff. */
.maya-av { --maya-px: 96px; display: inline-block; position: relative; width: var(--maya-px); height: var(--maya-px); line-height: 0; vertical-align: middle; }
.maya-av--sm { --maya-px: 40px; }
.maya-av--md { --maya-px: 96px; }
.maya-av--lg { --maya-px: 180px; }
.maya-av__pic { display: block; width: 100%; height: 100%; }
.maya-av__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.maya-av__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.maya-av__all, .maya-av__head, .maya-av__body, .maya-av__eye, .maya-av__hand, .maya-av__mouth, .maya-av__dot, .maya-av__bubble, .maya-av__waves, .maya-av__led, .maya-av__glow, .maya-av__eyes { transition: transform .35s ease, opacity .35s ease; }
.maya-av__eye { transform-box: fill-box; transform-origin: center; }
.maya-av__head { transform-origin: 100px 128px; }
.maya-av__body { transform-origin: 100px 190px; }
.maya-av__mouth { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scaleY(.2); }
.maya-av__bubble { opacity: 0; transform: translateY(6px) scale(.8); transform-box: fill-box; transform-origin: 10% 100%; }
.maya-av__waves { opacity: 0; }
.maya-av__glow { opacity: 0; }
.maya-av__led { opacity: .75; }
.maya-av__hand { transform-box: fill-box; transform-origin: center; }
.maya-av.is-blink .maya-av__eye { transform: scaleY(.08); transition-duration: .06s; }

/* idle: gentle breathing */
.maya-av[data-state="idle"] .maya-av__body { animation: maya-breathe 4.2s ease-in-out infinite; }
.maya-av[data-state="idle"] .maya-av__head { animation: maya-head-idle 4.2s ease-in-out infinite; }
.maya-av[data-state="idle"] .maya-av__led { animation: maya-led-soft 3.2s ease-in-out infinite; }

/* listening: head tilt, headphone light pulses, sound arcs */
.maya-av[data-state="listening"] .maya-av__head { transform: rotate(-6deg) translateX(-1px); }
.maya-av[data-state="listening"] .maya-av__body { animation: maya-breathe 4.2s ease-in-out infinite; }
.maya-av[data-state="listening"] .maya-av__led { animation: maya-led-pulse 1s ease-in-out infinite; }
.maya-av[data-state="listening"] .maya-av__waves { opacity: 1; animation: maya-waves 1.4s ease-in-out infinite; }

/* typing: hands tap, three-dot bubble, eyes look down */
.maya-av[data-state="typing"] .maya-av__head { transform: rotate(2deg) translateY(2px); }
.maya-av[data-state="typing"] .maya-av__eyes { transform: translateY(2px); }
.maya-av[data-state="typing"] .maya-av__hand--l { animation: maya-tap .34s ease-in-out infinite; }
.maya-av[data-state="typing"] .maya-av__hand--r { animation: maya-tap .34s ease-in-out .17s infinite; }
.maya-av[data-state="typing"] .maya-av__bubble { opacity: 1; transform: none; }
.maya-av[data-state="typing"] .maya-av__dot { animation: maya-dot 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.maya-av[data-state="typing"] .maya-av__dot:nth-child(2) { animation-delay: .15s; }
.maya-av[data-state="typing"] .maya-av__dot:nth-child(3) { animation-delay: .3s; }
.maya-av[data-state="typing"] .maya-av__led { animation: maya-led-soft 1.2s ease-in-out infinite; }

/* speaking: mouth animates, soft glow */
.maya-av[data-state="speaking"] .maya-av__smile { opacity: 0; }
.maya-av[data-state="speaking"] .maya-av__mouth { opacity: 1; animation: maya-talk .62s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__glow { opacity: .9; animation: maya-glow 1.8s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__body { animation: maya-breathe 3s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__head { animation: maya-nod 2.4s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__led { opacity: 1; }

/* offline: desaturated and still */
.maya-av[data-state="offline"] .maya-av__all { filter: grayscale(1) brightness(.75); opacity: .6; }
.maya-av[data-state="offline"] .maya-av__eye { transform: scaleY(.25); }
.maya-av[data-state="offline"] .maya-av__head { transform: rotate(3deg) translateY(2px); }
.maya-av[data-state="offline"] .maya-av__led { opacity: .15; }

@keyframes maya-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(1.6px) scale(1.008); } }
@keyframes maya-head-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1.2px) rotate(.6deg); } }
@keyframes maya-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.4deg) translateY(1px); } 65% { transform: rotate(-1.2deg); } }
@keyframes maya-led-soft { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes maya-led-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes maya-waves { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes maya-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.2px); } }
@keyframes maya-dot { 0%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes maya-talk { 0%, 100% { transform: scaleY(.25); } 20% { transform: scaleY(1); } 45% { transform: scaleY(.45); } 70% { transform: scaleY(.9); } }
@keyframes maya-glow { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  .maya-av *, .maya-av { animation: none !important; transition: none !important; }
  .maya-av.is-blink .maya-av__eye { transform: none !important; }
  .maya-av[data-state="speaking"] .maya-av__mouth { transform: scaleY(.6) !important; }
}
/* Oct 16 (Roman: "make Maya more 3D, live"): depth without a new model. A perspective sway, a lit rim, a floor shadow and a soft
   parallax on the head make the flat character read as a figure in space. Honours reduced motion. */
.maya-av { perspective: 420px; }
.maya-av__svg { transform-style: preserve-3d; animation: maya-3d-sway 7s ease-in-out infinite; filter: drop-shadow(0 calc(var(--maya-px) * .06) calc(var(--maya-px) * .08) rgba(4, 10, 24, .55)) drop-shadow(0 0 calc(var(--maya-px) * .05) rgba(91, 157, 255, .35)); }
.maya-av::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 10, 24, .55), transparent); animation: maya-3d-floor 7s ease-in-out infinite; pointer-events: none; }
.maya-av:hover .maya-av__svg { animation-duration: 3.5s; }
@keyframes maya-3d-sway { 0%, 100% { transform: rotateY(-9deg) rotateX(3deg) translateZ(0); } 50% { transform: rotateY(9deg) rotateX(-2deg) translateZ(6px); } }
@keyframes maya-3d-floor { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.86); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .maya-av__svg, .maya-av::after { animation: none; } }
/* Oct 16: rendered 3D portrait replaces the SVG once deployed; states show as a ring and motion, never colour alone (the live region still speaks). */
.maya-av.maya-av--render .maya-av__svg, .maya-comp__btn .maya-av--render .maya-av__svg { display: none; }
.maya-av__render { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--sg-border-strong, #2a3d66); animation: maya-breathe 4.5s ease-in-out infinite; }
.maya-av--render::after { display: none; }
.maya-av--render[data-state="typing"] .maya-av__render, .maya-av--render[data-state="listening"] .maya-av__render { box-shadow: 0 0 0 2px #5b9dff, 0 0 calc(var(--maya-px) * .18) rgba(91, 157, 255, .6); animation: maya-breathe 1.6s ease-in-out infinite; }
.maya-av--render[data-state="speaking"] .maya-av__render { box-shadow: 0 0 0 2px #bb9668, 0 0 calc(var(--maya-px) * .16) rgba(187, 150, 104, .55); }
.maya-av--render[data-state="offline"] .maya-av__render { filter: grayscale(.8); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .maya-av__render { animation: none; } }