/*
 * AMG VOICE PRESENCE V2 — motion + compositing CSS (WO-105)
 *
 * Art = Solon-approved PNGs (atlas-medallion / atlas-face). Motion is CSS
 * treatment ONLY — the PNG is never filtered, grayed, or redrawn:
 *   idle      slow scale breathing + glow-bloom breathing
 *   listening soft ripple ring + quicker attentive breath + brighter bloom
 *   speaking  amplitude-driven pulse (±3% scale at --amg-amp), subtle rhythm
 *             wobble, gentle head-bob in face mode, bloom tracks amplitude
 *
 * Contract consumed (set by amg-voice-presence-v2.js): --amg-amp 0.0-1.0 and
 * data-state="idle|listening|speaking" on the .amg-vp2 root.
 *
 * Sizing utilities (amg-vp-*) are the WO-93 steps, carried forward unchanged
 * so hosts keep their footprint classes.
 */

:root {
  --amg-vp-size: 64px; /* default chat-adjacent footprint (WO-93 default, unchanged) */

  /* art-matched glow palette: deep glassy gold body tone, bright emission
     rgb(254,237,126), amber rim — blooms stay inside the art's own hues */
  --vp2-glow: 255, 196, 84;
  --vp2-glow-hi: 255, 226, 145;
  --vp2-ring: 255, 205, 105;
  --vp2-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- sanctioned size steps (8px rhythm — WO-93, unchanged) ---- */
.amg-vp-32  { --amg-vp-size: 32px; }  /* inline roster / compact header */
.amg-vp-48  { --amg-vp-size: 48px; }  /* chat header presence */
.amg-vp-54  { --amg-vp-size: 54px; }  /* kids portal chat window (WO-92 footprint) */
.amg-vp-64  { --amg-vp-size: 64px; }  /* default beside chat window */
.amg-vp-96  { --amg-vp-size: 96px; }  /* voice-first panel */
.amg-vp-128 { --amg-vp-size: 128px; } /* hero / onboarding / operator companion */

/* ---- root ---- */
.amg-vp2 {
  position: relative;
  display: inline-block;
  width: var(--amg-vp-size);
  height: var(--amg-vp-size);
  flex: none;
  line-height: 0;
  pointer-events: none; /* presence is ambient; never intercepts chat clicks */
  user-select: none;
}

.amg-vp2 > span { position: absolute; }

/* ---- legibility pad (light grounds only) — soft navy vignette that anchors
       the glow so bright emissions read on warm kid-skin pages. Never a box:
       it fades to fully transparent well inside the footprint. ---- */
.vp2-pad {
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 22, 40, 0.16) 0%, rgba(10, 22, 40, 0.07) 46%, rgba(10, 22, 40, 0) 70%);
  opacity: 0;
  transition: opacity 220ms var(--vp2-ease);
}
.amg-vp2[data-vp2-ground="light"] .vp2-pad { opacity: 1; }

/* ---- glow bloom: layered radial-gradient sprites BEHIND the art (no filter
       ever sits on the PNG itself) ---- */
.vp2-bloom {
  inset: -30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--vp2-glow), 0.34) 0%, rgba(var(--vp2-glow), 0.14) 44%, rgba(var(--vp2-glow), 0) 70%);
  filter: blur(3px); /* on the sprite, not the art */
  opacity: 0.6;
  animation: vp2-bloom-breath 6s ease-in-out infinite;
}
.vp2-bloom-core {
  inset: -6%;
  background: radial-gradient(circle at 50% 46%, rgba(var(--vp2-glow-hi), 0.26) 0%, rgba(var(--vp2-glow), 0.08) 55%, rgba(var(--vp2-glow), 0) 78%);
  filter: none;
  animation: none;
}

/* ---- listening ripple ring ---- */
.vp2-ring {
  inset: 1%;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--vp2-ring), 0.6);
  box-shadow: 0 0 0 1px rgba(var(--vp2-ring), 0.12);
  opacity: 0;
}
.amg-vp2[data-state="listening"] .vp2-ring { animation: vp2-ripple 1.9s var(--vp2-ease) infinite; }

/* ---- art stack: bob (keyframes) > lift (amplitude) > art (amplitude scale) ---- */
.vp2-bob, .vp2-lift, .vp2-art { position: static; display: block; width: 100%; height: 100%; }
.vp2-bob { animation: vp2-breath 6.4s ease-in-out infinite; will-change: transform; }
.vp2-lift { transition: transform 90ms linear; }
.vp2-art { object-fit: contain; transition: transform 90ms linear; }

/* ---- state: listening — attentive: quicker breath, brighter bloom ---- */
.amg-vp2[data-state="listening"] .vp2-bob { animation-duration: 3.2s; }
.amg-vp2[data-state="listening"] .vp2-bloom { opacity: 0.85; animation-duration: 3.2s; }

/* ---- state: speaking — the amplitude hook does the talking ---- */
.amg-vp2[data-state="speaking"] .vp2-art {
  transform: scale(calc(1 + var(--amg-amp, 0) * 0.03)); /* ±3% at full voice */
}
.amg-vp2[data-state="speaking"] .vp2-lift {
  transform: translateY(calc(var(--amg-amp, 0) * -2.5px)) rotate(calc(var(--amg-amp, 0) * 0.7deg));
}
.amg-vp2[data-state="speaking"] .vp2-bob {
  animation: vp2-sway 2.4s ease-in-out infinite; /* subtle rhythm wobble */
}
.amg-vp2[data-mode="face"][data-state="speaking"] .vp2-bob {
  animation: vp2-headbob 1.2s ease-in-out infinite, vp2-sway 2.4s ease-in-out infinite;
}
.amg-vp2[data-state="speaking"] .vp2-bloom {
  animation: none; /* amplitude owns the bloom now */
  opacity: calc(0.62 + var(--amg-amp, 0) * 0.38);
  transform: scale(calc(1 + var(--amg-amp, 0) * 0.06));
}
.amg-vp2[data-state="speaking"] .vp2-bloom-core {
  opacity: calc(0.7 + var(--amg-amp, 0) * 0.3);
}

/* ---- keyframes ---- */
@keyframes vp2-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.022); }
}
@keyframes vp2-bloom-breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
@keyframes vp2-ripple {
  0% { transform: scale(0.92); opacity: 0.55; }
  70% { opacity: 0.12; }
  100% { transform: scale(1.38); opacity: 0; }
}
@keyframes vp2-sway {
  0%, 100% { transform: rotate(-0.5deg) scale(1); }
  50% { transform: rotate(0.5deg) scale(1.012); }
}
@keyframes vp2-headbob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2.5%) rotate(-0.6deg); }
}

/* ---- standard placement (WO-93 amg-vp-dock, unchanged) ---- */
.amg-vp-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--amg-s-2, 8px);
}

/* ---- accessibility: motion collapses; amplitude reads as glow only ---- */
@media (prefers-reduced-motion: reduce) {
  .vp2-bob, .vp2-bloom, .amg-vp2 .vp2-ring { animation: none !important; }
  .amg-vp2[data-state="listening"] .vp2-ring { opacity: 0.4; }
}