/* The guide's face: aurora or softcore (client/avatar.ts), in the accent color, moving with its state.
   The demo page and the console's preview both use it. */
.pl-av {
  --pl-accent: var(--accent-bright, #14b8a6);
  --pl-tint: color-mix(in srgb, var(--pl-accent) 10%, #fff);
  --pl-edge: color-mix(in srgb, var(--pl-accent) 35%, #fff);
  --pl-mid: color-mix(in srgb, var(--pl-accent) 60%, #fff);
  --pl-hue2: color-mix(in srgb, var(--pl-accent) 45%, #a855f7);
  --pl-hue3: color-mix(in srgb, var(--pl-accent) 45%, #06b6d4);
}
.pl-av svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pl-av svg * { transform-box: fill-box; transform-origin: center; }
.pl-av .f-tint { fill: var(--pl-tint); }
.pl-av .s-edge { fill: none; stroke: var(--pl-edge); stroke-width: 1.5; }
.pl-av .f-ac { fill: var(--pl-accent); }

/* Softcore */
.pl-av .sc-ring { fill: none; stroke-linecap: round; }
.pl-av .sc-r1 { stroke: var(--pl-mid); stroke-width: 2.5; stroke-dasharray: 46 22; }
.pl-av .sc-r2 { stroke: var(--pl-accent); stroke-width: 3; stroke-dasharray: 70 50; transition: opacity 0.12s; }
.pl-av[data-state=idle] .sc-r1 { animation: pl-rot 16s linear infinite; }
.pl-av[data-state=idle] .sc-r2 { animation: pl-rotr 11s linear infinite; }
.pl-av[data-state=thinking] .sc-r1 { animation: pl-rot 2.4s linear infinite; }
.pl-av[data-state=thinking] .sc-r2 { animation: pl-rotr 1.6s linear infinite; }
.pl-av[data-state=talking] .sc-r1 { animation: pl-rot 8s linear infinite; }
.pl-av[data-state=talking] .sc-r2 { animation: pl-rotr 6s linear infinite; }
.pl-av .sc-coreg { transition: transform 0.12s ease-out; }
.pl-av[data-state=idle] .sc-coreg { animation: pl-breathe 3.4s ease-in-out infinite; }
.pl-av[data-state=listening] .sc-coreg { transform: scale(1.06); }
.pl-av .sc-eye { animation: pl-blink 4.2s infinite; }
.pl-av .sc-eyes { transition: transform 0.3s ease; }
.pl-av[data-state=listening] .sc-eyes { transform: translate(-1.5px, 1.5px); }
.pl-av[data-state=thinking] .sc-eyes { animation: pl-glance 2.2s ease-in-out infinite; }

/* Aurora */
.pl-av .au-blobs { transform-box: view-box; transform-origin: 48px 48px; transition: transform 0.3s ease; }
.pl-av .au-blob { transition: transform 0.14s ease-out; }
.pl-av[data-state=idle] .au-a { animation: pl-drift1 7s ease-in-out infinite; }
.pl-av[data-state=idle] .au-b { animation: pl-drift2 9s ease-in-out infinite; }
.pl-av[data-state=idle] .au-c { animation: pl-drift3 8s ease-in-out infinite; }
.pl-av[data-state=listening] .au-blobs { transform: scale(0.88); }
.pl-av[data-state=thinking] .au-blobs { animation: pl-rot 2.2s linear infinite; }
.pl-av .au-s1 { stop-color: var(--pl-accent); }
.pl-av .au-s2 { stop-color: var(--pl-hue2); }
.pl-av .au-s3 { stop-color: var(--pl-hue3); }

@keyframes pl-breathe { 50% { transform: scale(1.06); } }
@keyframes pl-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes pl-glance { 0%, 100% { transform: translate(0, 0); } 40%, 60% { transform: translate(4px, -4px); } }
@keyframes pl-rot { to { transform: rotate(360deg); } }
@keyframes pl-rotr { to { transform: rotate(-360deg); } }
@keyframes pl-drift1 { 50% { transform: translate(8px, 6px); } }
@keyframes pl-drift2 { 50% { transform: translate(-7px, 5px); } }
@keyframes pl-drift3 { 50% { transform: translate(4px, -8px); } }

@media (prefers-reduced-motion: reduce) { .pl-av * { animation: none !important; transition: none !important; } }