/*
 * Rigo avatars, shared by the website guide, the backend assistant and the "Nastavení Riga" module
 * (kit erigo-rigo-premium, 2026-10-04).
 *  - .ailla-avatar  : Ailla plush avatar (ailla-avatar.js), colours live in the SVG itself
 *  - .erigo-rigo-av : vector Rigo (rigo-avatar.js); on the website rigo-guide.css carries the same rules
 *    with the site-token fallbacks, here they use --rigo-av-body / --rigo-av-eye set by the host element.
 * Motion only via transform/opacity; prefers-reduced-motion = static.
 */

/* ------------------------------------------------------------------ wrapper (both families) */
.erigo-rigo-av {
  position: relative;
  display: block;
  pointer-events: none;
}

.erigo-rigo-av__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 56%;
}

.erigo-rigo-av.is-tracking .erigo-rigo-av__svg {
  will-change: transform;
}

.erigo-rigo-av__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.erigo-rigo-av.is-3d .erigo-rigo-av__canvas {
  opacity: 1;
}

.erigo-rigo-av.is-3d .erigo-rigo-av__svg {
  opacity: 0;
}

/* ------------------------------------------------------------------ Ailla */
.ailla-avatar .ailla-av-body,
.ailla-avatar .ailla-av-eyes,
.ailla-avatar .ailla-av-mouth,
.ailla-avatar .ailla-av-ring,
.ailla-avatar .ailla-av-ears,
.ailla-avatar .ailla-av-dots circle {
  transform-box: fill-box;
  transform-origin: center;
}

.ailla-avatar .ailla-av-look,
.ailla-avatar .ailla-av-gloss {
  transform-box: view-box;
}

.ailla-avatar .ailla-av-fabric {
  mix-blend-mode: soft-light;
}

.ailla-avatar .ailla-av-dots {
  opacity: 0;
}

.ailla-avatar .ailla-av-eyes {
  transition: transform 0.07s ease-in;
}

/* blink (driven by ailla-avatar.js every 4-8 s) */
.erigo-rigo-av.is-blink .ailla-av-eyes {
  transform: scaleY(0.12);
}

/* thinking: ring pulse, glancing eyes, typing dots */
.ailla-avatar--thinking .ailla-av-ring {
  animation: ailla-av-pulse 1.4s ease-in-out infinite;
}

.ailla-avatar--thinking .ailla-av-face-parts {
  transform-box: fill-box;
  transform-origin: center;
  animation: ailla-av-glance 3.2s ease-in-out infinite;
}

.ailla-avatar--thinking .ailla-av-dots {
  opacity: 1;
}

.ailla-avatar--thinking .ailla-av-mouth {
  opacity: 0;
}

.ailla-avatar--thinking .ailla-av-dots circle {
  animation: ailla-av-dot 1.2s ease-in-out infinite;
}

.ailla-avatar--thinking .ailla-av-dots circle:nth-child(2) {
  animation-delay: 0.18s;
}

.ailla-avatar--thinking .ailla-av-dots circle:nth-child(3) {
  animation-delay: 0.36s;
}

/* speaking: mouth opens and closes, ear lights glow with the voice */
.ailla-avatar--speaking .ailla-av-mouth {
  animation: ailla-av-talk 0.36s ease-in-out 6 alternate;
}

.ailla-avatar--speaking .ailla-av-earlight,
.ailla-avatar--thinking .ailla-av-earlight {
  animation: ailla-av-pulse 1.1s ease-in-out infinite;
}

/* error: one short shake (amber colours come from the script) */
.ailla-avatar--error .ailla-av-body {
  animation: ailla-av-shake 0.5s ease-in-out 1;
}

/* gallery / preview stages can opt into the original soft float */
.ailla-float .ailla-av-body {
  animation: ailla-av-float 4.2s ease-in-out infinite;
}

@keyframes ailla-av-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.2%);
  }
}

@keyframes ailla-av-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes ailla-av-glance {
  0%,
  100% {
    transform: translateX(0);
  }

  30%,
  45% {
    transform: translateX(6%);
  }

  70%,
  85% {
    transform: translateX(-6%);
  }
}

@keyframes ailla-av-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-30%);
  }
}

@keyframes ailla-av-talk {
  from {
    transform: scaleY(0.55);
  }

  to {
    transform: scaleY(1.25);
  }
}

@keyframes ailla-av-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-3%);
  }

  40% {
    transform: translateX(3%);
  }

  60% {
    transform: translateX(-2%);
  }

  80% {
    transform: translateX(1.5%);
  }
}

/* ------------------------------------------------------------------ vector Rigo (backend + module previews) */
.erigo-rigo-av__s-light {
  stop-color: color-mix(in oklab, var(--rigo-av-body, #15151d) 64%, #fff);
}

.erigo-rigo-av__s-base {
  stop-color: var(--rigo-av-body, #15151d);
}

.erigo-rigo-av__s-dark {
  stop-color: color-mix(in oklab, var(--rigo-av-body, #15151d) 52%, #000);
}

.erigo-rigo-av__s-eye {
  stop-color: var(--rigo-av-eye, #ff4fa8);
}

.erigo-rigo-av__ring,
.erigo-rigo-av__mouth {
  stroke: var(--rigo-av-eye, #ff4fa8);
}

.erigo-rigo-av__eye,
.erigo-rigo-av__glow,
.erigo-rigo-av__bubbles {
  fill: var(--rigo-av-eye, #ff4fa8);
}

.erigo-rigo-av__pupil {
  fill: color-mix(in oklab, var(--rigo-av-eye, #ff4fa8) 30%, #fff);
}

.erigo-rigo-av__lid {
  fill: color-mix(in oklab, var(--rigo-av-body, #15151d) 70%, #000);
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: transform 0.07s ease-in;
}

.erigo-rigo-av.is-blink .erigo-rigo-av__lid {
  transform: scaleY(1);
}

.erigo-rigo-av__face,
.erigo-rigo-av__eyes,
.erigo-rigo-av__pupils,
.erigo-rigo-av__gloss,
.erigo-rigo-av__ring {
  transform-box: view-box;
}

/* thinking state of the vector Rigo: the ring and the eyes breathe */
.is-thinking .erigo-rigo-av--svg .erigo-rigo-av__ring,
.is-thinking .erigo-rigo-av--3d .erigo-rigo-av__ring {
  animation: ailla-av-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .erigo-rigo-av,
  .erigo-rigo-av *,
  .ailla-avatar,
  .ailla-avatar * {
    animation: none !important;
    transition: none !important;
  }
}