/* Character life — micro-motion only. Tokens from Design System v1. */

.avatar-life { --agent-delay: 0s; overflow: visible; }
.avatar-life .av-stage {
  position: absolute; inset: 0; z-index: 1;
  display: block; border-radius: inherit;
}
.avatar-life .av-layer,
.avatar-life .av-solo,
.avatar-life .av-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
}
.avatar-life .av-layer {
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  will-change: opacity, transform;
}
.avatar-life .av-layer.on { opacity: 1; transform: scale(1); }
.avatar-life .av-layer.off { opacity: 0; transform: scale(.985); }

.avatar-life .av-stage {
  filter:
    drop-shadow(0 0 10px rgb(var(--agent-rgb, 59 140 255) / .25))
    drop-shadow(0 0 22px rgb(var(--agent-rgb, 59 140 255) / .12));
}

.avatar-life.sz-sm .av-stage { filter: drop-shadow(0 0 6px rgb(var(--agent-rgb, 59 140 255) / .18)); }
.avatar-life.sz-sm .av-layer { transition: none; transform: none; }
.avatar-life.is-concept .av-stage { filter: none; animation: none !important; }
.avatar-life.is-concept { animation: none !important; }

/* Idle — slow breath, staggered, no bounce */
.avatar-life.sz-md.av-idle .av-stage,
.avatar-life.sz-lg.av-idle .av-stage {
  animation: avIdle 5.2s ease-in-out var(--agent-delay) infinite;
}
.avatar-life.sz-lg.av-idle .av-stage { animation-duration: 5.8s; }
@keyframes avIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Thinking — tiny vertical drift + glow pulse, no tilt */
.avatar-life.sz-md.av-thinking .av-stage,
.avatar-life.sz-lg.av-thinking .av-stage {
  animation: avThink 3.2s ease-in-out var(--agent-delay) infinite;
}
.avatar-life.sz-lg.av-thinking .av-stage { animation-duration: 3.6s; }
@keyframes avThink {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 10px rgb(var(--agent-rgb) / .22)) drop-shadow(0 0 20px rgb(var(--agent-rgb) / .10)); }
  50% { transform: translateY(-2px); filter: drop-shadow(0 0 14px rgb(var(--agent-rgb) / .32)) drop-shadow(0 0 26px rgb(var(--agent-rgb) / .14)); }
}

/* Working — glow pulse, stay planted */
.avatar-life.sz-md.av-working .av-stage,
.avatar-life.sz-lg.av-working .av-stage {
  animation: avWork 2.8s ease-in-out var(--agent-delay) infinite;
}
@keyframes avWork {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 10px rgb(var(--agent-rgb) / .28)) drop-shadow(0 0 22px rgb(var(--agent-rgb) / .12)); }
  50% { transform: translateY(-1px); filter: drop-shadow(0 0 16px rgb(var(--agent-rgb) / .40)) drop-shadow(0 0 30px rgb(var(--agent-rgb) / .16)); }
}

/* Success — once */
.avatar-life.av-success .av-stage {
  animation: avSuccess 760ms var(--ease) 1 both;
}
@keyframes avSuccess {
  0% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 10px rgb(var(--agent-rgb) / .25)) drop-shadow(0 0 22px rgb(var(--agent-rgb) / .12)); }
  40% { transform: translateY(-4px) scale(1.025); filter: drop-shadow(0 0 18px rgb(var(--agent-rgb) / .42)) drop-shadow(0 0 36px rgb(var(--agent-rgb) / .18)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 12px rgb(var(--agent-rgb) / .28)) drop-shadow(0 0 24px rgb(var(--agent-rgb) / .12)); }
}

/* Concern — still, dimmer glow only */
.avatar-life.sz-md.av-concern .av-stage,
.avatar-life.sz-lg.av-concern .av-stage {
  filter: drop-shadow(0 0 8px rgb(var(--agent-rgb) / .14)) drop-shadow(0 0 16px rgb(var(--agent-rgb) / .06));
}
.avatar-life.av-shake .av-stage { animation: avShake 280ms var(--ease) 1; }
@keyframes avShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
}

/* Attention — one pulse, then still */
.avatar-life.av-attention .av-stage {
  animation: avAttention 700ms var(--ease) 1 both;
}
@keyframes avAttention {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgb(var(--agent-rgb) / .25)) drop-shadow(0 0 22px rgb(var(--agent-rgb) / .12)); }
  40% { transform: scale(1.02); filter: drop-shadow(0 0 16px rgb(var(--agent-rgb) / .38)) drop-shadow(0 0 32px rgb(var(--agent-rgb) / .16)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 12px rgb(var(--agent-rgb) / .30)) drop-shadow(0 0 24px rgb(var(--agent-rgb) / .14)); }
}

/* Desktop hover — interactive only */
@media (hover: hover) and (pointer: fine) {
  .avatar-life.is-interactive:hover {
    transform: translateY(-4px) scale(1.03);
    transition: transform 220ms var(--ease);
    z-index: 2;
  }
  .avatar-life.is-interactive.sz-sm:hover { transform: translateY(-2px) scale(1.02); }
  .avatar-life.is-interactive:hover .av-stage {
    filter:
      drop-shadow(0 0 14px rgb(var(--agent-rgb) / .36))
      drop-shadow(0 0 28px rgb(var(--agent-rgb) / .16));
  }
  .avatar-life.is-interactive:hover::before { --aura: .28; }
  a.agent-card:hover { border-color: rgb(var(--agent-rgb, 59 140 255) / .40); }
  a.agent-card:hover::before {
    content: ""; position: absolute; inset: 8% 12% 28%; border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--agent-rgb) / .10), transparent 70%);
    pointer-events: none; z-index: 0;
  }
}

.avatar-life.is-interactive:active { transform: scale(.98); }

.ag-portrait { overflow: visible; }

/* Cards must not clip glow / hover rise */
.agent-card { overflow: visible; }
.hero.agents { overflow: visible; }
.director-hero { overflow: visible; }
.wf-concept { overflow: visible; }

/* Dev preview */
.av-lab { display: grid; gap: 18px; }
.av-lab-row { display: grid; gap: 10px; padding: 12px; }
.av-lab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.av-lab-states { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; justify-items: center; }
.av-lab-cell { display: grid; justify-items: center; gap: 4px; min-height: 96px; }
.av-lab-cell .tiny { color: var(--text-3); }

/* Restore short opacity fades when the global reduced-motion kill-switch is on */
@media (prefers-reduced-motion: reduce) {
  .avatar-life, .avatar-life .av-stage, .avatar-life .av-layer {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(0 0 8px rgb(var(--agent-rgb, 59 140 255) / .18)) !important;
  }
  .avatar-life .av-layer {
    transition: opacity 130ms ease !important;
  }
  .avatar-life.is-interactive:hover,
  .avatar-life.is-interactive:active,
  a.agent-card:hover {
    transform: none !important;
  }
  .card.illuminate { animation: none !important; }
}