/* The Player listens (D237, D241: frozen as it is, the owner's state of 2026-10-26 17:36): the designer's final line, taken
   exactly from W/design/contexts/mark/cycle1/design/listen3/listen3.css (the F rules and the ones they stand on), on the
   game's own hooks: .hud-avatar.mk-hearing[data-hear="far|near|close"] (app.js setAvatarExpression). The player is
   js/mark/listen-player.js (listen3/player.js as it is). Only the Player (look B) wears it: .v-f is set on his avatar alone, so
   every rule here is scoped to it and the other looks keep their own listening tilt (css/mark.css). */

/* the drawings */
.l3-faces { position: absolute; inset: 0; transform-origin: 50% 100%; pointer-events: none; }
.l3-faces img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transition: opacity .2s ease-out; pointer-events: none; }
.hud-avatar.v-f.mk-hearing .av-face > img { visibility: hidden; }
/* the final line's frame player (player.js): one picture on at a time, it fades itself in */
.l3-faces .fr { transition: none; will-change: opacity, transform; transform-origin: 50% 100%; }
.l3-faces .fr.on { opacity: 1; }
/* the body's continuous take lives on its own wrapper; the base face stays under the first drawing until that drawing is
   solid (player.js solid()), so entering and leaving the listening state dissolves, never blanks */
.l3-move { position: absolute; inset: 0; transform-origin: 50% 100%; }
.hud-avatar.v-f.mk-hearing:not(.l3-solid) .av-face > img { visibility: visible; }
/* the visible region: the disc's circle below its centre line plus everything above that line (ears, head, a raised paw);
   the box wide and tall enough that no drawing reaches its edge; every picture keeps its old place */
.hud-avatar.v-f .av-bust { left: calc(var(--u) * -40); width: calc(var(--u) * 230); height: calc(var(--u) * 193);
  -webkit-mask: linear-gradient(#000 calc(var(--u) * 123), transparent calc(var(--u) * 131)) 0 0 / 100% calc(var(--u) * 131) no-repeat, radial-gradient(circle calc(var(--u) * 63) at calc(var(--u) * 115) calc(var(--u) * 131), #000 98.5%, transparent 100%);
  mask: linear-gradient(#000 calc(var(--u) * 123), transparent calc(var(--u) * 131)) 0 0 / 100% calc(var(--u) * 131) no-repeat, radial-gradient(circle calc(var(--u) * 63) at calc(var(--u) * 115) calc(var(--u) * 131), #000 98.5%, transparent 100%); }
.hud-avatar.v-f .av-head img { left: calc(var(--u) * 40); width: calc(var(--u) * 150); }
.hud-avatar.v-f .l3-faces .fr { left: calc(var(--u) * 15.172); width: calc(var(--u) * 199.655); bottom: calc(var(--u) * -23.017); }
.hud-avatar.v-f:not(.mk-hearing) .av-head, .hud-avatar.v-f .av-sway { transform-origin: 50% calc(100% - var(--u) * 29.34); }
.hud-avatar.v-f .av-face { transform-origin: 50% calc(100% - var(--u) * 32.6); }
.hud-avatar.v-f .av-head, .hud-avatar.v-f .l3-faces, .hud-avatar.v-f .l3-move { will-change: transform, rotate, translate, scale; }

/* the idle life of each phase, on the head: far a gentle curious bob and tilt toward the sound, near a slow lean in that
   holds, close a happy little rock (the bounce itself lands on every hum) */
.hud-avatar.v-f.mk-hearing .av-head { transform-origin: 50% 100%; animation: none; }
.v-f.mk-hearing[data-hear="far"] .av-head { animation: l3fFar 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes l3fFar { 0%, 100% { rotate: 0deg; translate: 0 0; scale: 1 1; } 25% { rotate: 1.4deg; translate: 0 0; scale: .996 1.012; }
  50% { rotate: 2deg; translate: 0 0; scale: 1 1.003; } 75% { rotate: .4deg; translate: 0 0; scale: .997 1.01; } }
.v-f.mk-hearing[data-hear="near"] .av-head { animation: l3fNear 4.2s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes l3fNear { 0%, 100% { rotate: 0deg; translate: 0 0; scale: 1 1; } 38%, 72% { rotate: 2.2deg; translate: calc(var(--u) * 2.4) calc(var(--u) * .8); scale: 1 1; } }
.v-f.mk-hearing[data-hear="close"] .av-head { animation: l3fClose 1.7s ease-in-out infinite; }
@keyframes l3fClose { 0%, 100% { rotate: 0deg; translate: 0 0; scale: 1 1; } 25% { rotate: -1.4deg; translate: 0 0; scale: 1 1.004; }
  75% { rotate: 1.4deg; translate: 0 0; scale: .996 1.01; } }
.hud-avatar.v-f.l3-idle-off .av-head { animation: none !important; }

/* the sound glow beside her ear (the Scout's golden arcs): it grows from phase 1 to 3 */
.l3-glow { position: absolute; left: calc(var(--u) * 130); top: calc(var(--u) * -14); width: calc(var(--u) * 78); height: calc(var(--u) * 118);
  pointer-events: none; opacity: 0; scale: var(--gs, .6); transform-origin: 8% 50%; transition: opacity .5s ease, scale .6s cubic-bezier(.3, 1.3, .5, 1); }
.l3-glow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 0 50%; opacity: .95;
  filter: brightness(1.3) drop-shadow(0 0 calc(var(--u) * 1.5) rgba(255, 244, 210, 1)) drop-shadow(0 0 calc(var(--u) * 5) rgba(255, 190, 80, .95)) drop-shadow(0 0 calc(var(--u) * 12) rgba(255, 160, 50, .5)); }
.l3-glow::before { content: ""; position: absolute; inset: 6% -6% 6% -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(50, 18, 90, .42), transparent); }
.l3-glow .l3-ring { opacity: 0; }
.l3-halo { position: absolute; left: calc(var(--u) * -16); top: 50%; width: calc(var(--u) * 44); height: calc(var(--u) * 44); margin-top: calc(var(--u) * -22); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .55), rgba(255, 200, 120, .18) 55%, transparent); }
.hud-avatar.v-f.mk-hearing .l3-glow { opacity: var(--go, .5); }
.hud-avatar.v-f[data-hear="far"] .l3-glow { --gs: .72; --go: .78; }
.hud-avatar.v-f[data-hear="near"] .l3-glow { --gs: .9; --go: .92; }
.hud-avatar.v-f[data-hear="close"] .l3-glow { --gs: 1.08; --go: 1; }
.hud-avatar.v-f[data-hear="close"] .l3-halo { animation: l3halo .85s ease-in-out infinite; }
@keyframes l3halo { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
/* (the head tilt of the first build is the other looks' own; the Player's final line has its own idle above) */
.hud-avatar.v-f.mk-hearing .av-head { rotate: none; }

@media (prefers-reduced-motion: reduce) {
  .hud-avatar.v-f.mk-hearing .av-head, .hud-avatar.v-f[data-hear="close"] .l3-halo { animation: none !important; }
}