/* Fi, animated. Ported from ~/fi/avatar/index.html: layers cut from fi.png by
   build_layers.py; geometry in percent of the 578x565 image (geometry.json).
   --hx/--hy: head look direction, -1..1. --ex*/--ey*: iris direction per eye.
   Class names are prefixed fa- so they never collide with the page styles. */
@property --hx  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hy  { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --exl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --eyl { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --exr { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --eyr { syntax: '<number>'; inherits: true; initial-value: 0; }

.fi-avatar {
  /* tunables (values from the tuning panel's defaults) */
  --eye-tx: 1.2; --eye-ty: 1.2; --eye-right: .6; --eye-ease: .18s;
  --head-yaw: 5; --head-pitch: 3.5; --head-slide: 1; --head-ease: .6s;
  --wander-eye: .7; --wander-head: 1; --blink-period: 5.2s;
  --hx: 0; --hy: 0; --exl: 0; --eyl: 0; --exr: 0; --eyr: 0;
  --k-eye: 1; --k-head: 1;
  aspect-ratio: 578 / 565;
  perspective: 1100px;
  container-type: size;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  user-select: none; -webkit-user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}
.fa-head {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform:
    translate(calc(var(--hx) * var(--k-head) * var(--head-slide) * 0.8cqw),
              calc(var(--hy) * var(--k-head) * var(--head-slide) * 0.6cqw))
    rotateY(calc(var(--hx) * var(--k-head) * var(--head-yaw) * 1deg))
    rotateX(calc(var(--hy) * var(--k-head) * var(--head-pitch) * -1deg));
  transition: --hx var(--head-ease) cubic-bezier(.2, .8, .2, 1), --hy var(--head-ease) cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.fa-head img, .fa-head > div { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fa-eyes {
  -webkit-mask-image: url(/static/avatar/mask.png); mask-image: url(/static/avatar/mask.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.fa-head img.fa-iris {
  position: absolute; inset: auto; height: auto;
  transition: --exl var(--eye-ease) ease-out, --eyl var(--eye-ease) ease-out,
              --exr var(--eye-ease) ease-out, --eyr var(--eye-ease) ease-out;
  will-change: transform;
}
.fa-head img.fa-iris.l { left: 31.142%; top: 53.805%; width: 7.785%;
  transform: translate(
    calc((min(var(--exl), 0) + max(var(--exl), 0) * var(--eye-right)) * var(--k-eye) * var(--eye-tx) * 2.05cqw),
    calc(var(--eyl) * var(--k-eye) * var(--eye-ty) * 1.79cqw)); }
.fa-head img.fa-iris.r { left: 54.152%; top: 49.912%; width: 8.304%;
  transform: translate(
    calc((min(var(--exr), 0) + max(var(--exr), 0) * var(--eye-right)) * var(--k-eye) * var(--eye-tx) * 2.19cqw),
    calc(var(--eyr) * var(--k-eye) * var(--eye-ty) * 1.85cqw)); }
.fa-head div.fa-lid {
  position: absolute; inset: auto; background: #fff5ec; border-bottom: .45cqw solid #2c2a2a;
  transform-origin: 50% 0; transform: scaleY(0);
  animation: fa-blink var(--blink-period) ease-in infinite;
}
.fa-head div.fa-lid.l { left: 26%; top: 52%; width: 14.5%; height: 15%; }
.fa-head div.fa-lid.r { left: 51.5%; top: 48%; width: 15.8%; height: 15%; }
@keyframes fa-blink {
  0%, 91%   { transform: scaleY(0); }
  94%       { transform: scaleY(1); }
  97%, 100% { transform: scaleY(0); }
}
.fi-avatar.idle          { animation: fa-wander 11s ease-in-out infinite; --k-eye: var(--wander-eye); --k-head: var(--wander-head); }
.fi-avatar.idle .fa-head { transition-duration: 1.4s; }
@keyframes fa-wander {
  0%   { --hx: 0;    --hy: 0;    --exl: 0;    --eyl: 0;    --exr: 0;    --eyr: 0; }
  22%  { --hx: .3;   --hy: -.12; --exl: .9;   --eyl: -.3;  --exr: .9;   --eyr: -.3; }
  38%  { --hx: .22;  --hy: -.1;  --exl: .5;   --eyl: -.1;  --exr: .5;   --eyr: -.1; }
  58%  { --hx: -.32; --hy: .1;   --exl: -.9;  --eyl: .25;  --exr: -.9;  --eyr: .25; }
  74%  { --hx: -.22; --hy: .06;  --exl: -.6;  --eyl: .1;   --exr: -.6;  --eyr: .1; }
  100% { --hx: 0;    --hy: 0;    --exl: 0;    --eyl: 0;    --exr: 0;    --eyr: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fi-avatar.idle { animation: none; }
  .fa-head, .fa-iris { transition: none; }
}
/* tap: a small squish and one heart */
.fi-avatar.tap .fa-head { animation: fa-squish .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fa-squish {
  0% { scale: 1 1; } 30% { scale: 1.012 .985; } 60% { scale: .995 1.008; } 100% { scale: 1 1; }
}
.fa-heart {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: var(--sz, 40px); height: var(--sz, 40px); color: var(--c, #2c5be3);
  filter: drop-shadow(0 0 6px rgba(44, 91, 227, .35));
  animation: fa-fly var(--d, 1.6s) cubic-bezier(.2, .6, .3, 1) forwards;
  transform: translate(var(--x0), var(--y0)) scale(0);
}
.fa-heart svg { width: 100%; height: 100%; display: block; }
@keyframes fa-fly {
  0%   { transform: translate(var(--x0), var(--y0)) scale(0) rotate(0deg); opacity: 1; }
  12%  { transform: translate(calc(var(--x0) + var(--dx) * .1), calc(var(--y0) - var(--h) * .1)) scale(var(--s)) rotate(calc(var(--rot) * .2)); opacity: 1; }
  75%  { opacity: .9; }
  100% { transform: translate(calc(var(--x0) + var(--dx)), calc(var(--y0) - var(--h))) scale(calc(var(--s) * .8)) rotate(var(--rot)); opacity: 0; }
}