/* Realistic Quato presenter — Copilot animation states on portrait */

.qcw-quato-aura-glow,
.qcw-quato-aura-mist,
.qcw-quato-sparkle {
  display: none !important;
}

.qcw-quato-presenter-rig {
  position: relative;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  isolation: isolate;
}

.qcw-quato-portrait-frame {
  position: relative;
  background: transparent;
  overflow: visible;
  transform-origin: 50% 92%;
  will-change: transform;
  animation: quato-breathe 4.2s ease-in-out infinite;
}

.qcw-quato-portrait {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  vertical-align: middle;
}

.qcw-quato-aura-glow {
  position: absolute;
  inset: 8% 0 -8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 85% 70% at 50% 55%,
    rgba(91, 168, 255, calc(0.22 * var(--quato-aura, 0.3))) 0%,
    rgba(91, 168, 255, 0) 68%
  );
  pointer-events: none;
  z-index: 0;
  animation: quato-aura-pulse 4.5s ease-in-out infinite;
}

.qcw-quato-aura-mist {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 18%;
  height: 42%;
  pointer-events: none;
  z-index: 3;
  opacity: calc(0.35 + var(--quato-aura, 0.3) * 0.5);
  background:
    radial-gradient(ellipse 40% 55% at 22% 70%, rgba(91, 168, 255, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 40% 55% at 78% 70%, rgba(91, 168, 255, 0.4) 0%, transparent 70%);
  filter: blur(8px);
  animation: quato-mist-drift 7s ease-in-out infinite;
}

.qcw-quato-eye-glow {
  position: absolute;
  top: 22%;
  left: 18%;
  right: 18%;
  height: 14%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(125, 211, 252, 0.35) 0%, transparent 72%);
  transition: opacity 0.6s ease;
}

.qcw-quato-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(125, 211, 252, 0.8);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: quato-sparkle 3.2s ease-in-out infinite;
}

.qcw-quato-sparkle:nth-child(1) { top: 38%; left: 12%; animation-delay: 0s; }
.qcw-quato-sparkle:nth-child(2) { top: 52%; right: 10%; animation-delay: 1.1s; }
.qcw-quato-sparkle:nth-child(3) { top: 44%; left: 48%; animation-delay: 2.2s; }

.qcw-quato-lightning-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(125, 211, 252, 0.15) 50%, transparent 60%);
}

.qcw-quato-speaking-pulse {
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: 28%;
  height: 4%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: rgba(125, 211, 252, 0.25);
  filter: blur(3px);
}

/* —— Animation states (Copilot) —— */
.qcw-quato-presenter-rig.state-idle .qcw-quato-sparkle {
  opacity: 0.5;
}

.qcw-quato-presenter-rig.state-scanning .qcw-quato-eye-glow {
  opacity: 0.85;
  animation: quato-eye-scan 5s ease-in-out infinite;
}

.qcw-quato-presenter-rig.state-scanning .qcw-quato-portrait-frame {
  animation: quato-breathe 4.2s ease-in-out infinite, quato-head-scan 6s ease-in-out infinite;
}

.qcw-quato-presenter-rig.state-alert .qcw-quato-aura-glow {
  animation: quato-aura-alert 1.5s ease-in-out infinite;
}

.qcw-quato-presenter-rig.state-alert .qcw-quato-lightning-flash {
  animation: quato-lightning 2.6s ease-in-out infinite;
}

.qcw-quato-presenter-rig.state-alert .qcw-quato-portrait-frame {
  animation: quato-breathe 3.4s ease-in-out infinite;
}

.qcw-quato-presenter-rig.severity-severe {
  --quato-aura: 1;
}

.qcw-quato-presenter-rig.severity-elevated {
  --quato-aura: 0.6;
}

.qcw-quato-presenter-rig.severity-normal {
  --quato-aura: 0.3;
}

.qcw-quato-presenter-rig.is-speaking .qcw-quato-portrait-frame {
  animation: quato-breathe 4.2s ease-in-out infinite, quato-speak-nod 0.5s ease-in-out infinite alternate;
}

.qcw-quato-presenter-rig.is-speaking .qcw-quato-speaking-pulse {
  opacity: 1;
  animation: quato-mouth-pulse 0.22s ease-in-out infinite alternate;
}

.qcw-quato-presenter-rig.is-speaking .qcw-quato-aura-mist {
  animation: quato-mist-drift 4s ease-in-out infinite;
}

/* Weather tint on aura */
.qcw-quato-presenter-rig.condition-storm .qcw-quato-aura-glow {
  background: radial-gradient(
    ellipse 85% 70% at 50% 55%,
    rgba(0, 255, 170, calc(0.12 * var(--quato-aura, 0.3))) 0%,
    rgba(91, 168, 255, calc(0.2 * var(--quato-aura, 0.3))) 40%,
    transparent 68%
  );
}

.qcw-quato-presenter-rig.condition-rain .qcw-quato-aura-glow {
  filter: hue-rotate(-8deg) saturate(1.1);
}

.qcw-quato-presenter-rig.condition-heat .qcw-quato-aura-glow {
  background: radial-gradient(
    ellipse 85% 70% at 50% 55%,
    rgba(255, 179, 71, calc(0.15 * var(--quato-aura, 0.3))) 0%,
    transparent 68%
  );
}

@keyframes quato-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.008) translateY(-2px); }
}

@keyframes quato-aura-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes quato-aura-alert {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes quato-mist-drift {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(4px) scale(1.02); }
}

@keyframes quato-eye-scan {
  0%, 100% { transform: translateX(-3px); opacity: 0.65; }
  50% { transform: translateX(3px); opacity: 0.95; }
}

@keyframes quato-head-scan {
  0%, 100% { transform: scale(1.008) translateY(-2px) rotate(-0.6deg); }
  50% { transform: scale(1.008) translateY(-2px) rotate(0.6deg); }
}

@keyframes quato-speak-nod {
  0% { transform: scale(1.01) translateY(-1px); }
  100% { transform: scale(1.014) translateY(-3px); }
}

@keyframes quato-mouth-pulse {
  0% { transform: scaleY(0.4); opacity: 0.35; }
  100% { transform: scaleY(1); opacity: 0.7; }
}

@keyframes quato-sparkle {
  0%, 70%, 100% { opacity: 0; transform: scale(0.5); }
  78%, 88% { opacity: 0.9; transform: scale(1); }
}

@keyframes quato-lightning {
  0%, 86%, 100% { opacity: 0; }
  88%, 92% { opacity: 0.55; }
}