/* ---------- kin figures (kins.js): layers on one square canvas ---------- */
.kinfig { position: relative; width: 100%; aspect-ratio: 1; translate: 0 var(--feet-shift, 0); }
.kinfig img, .kinfig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.kinfig .kf-eyes { opacity: 0; }
.kinfig.blink .kf-eyes { opacity: 1; }
.kinfig.is-static .kf-body { animation:none; }
.motion-offscreen, .motion-offscreen *, .motion-offscreen::before, .motion-offscreen::after { animation-play-state:paused !important; }
.kinfig .kf-body, .kinfig .kf-eyes { animation: breathe var(--t-breathe) var(--ease-breathe) infinite; transform-origin: 54% 93%; }
@keyframes breathe { 50% { transform: scale(var(--kf-breathe-x), var(--kf-breathe-y)); } }
.m-sway { animation: sway var(--t-sway) var(--ease-sway) infinite; }
.m-flicker { animation: flicker-flame var(--t-flame) var(--ease-flame) infinite; }
.m-flutter { animation: flutter var(--t-flutter) var(--ease-flutter) infinite; }
.m-twitch { animation: twitch var(--t-twitch) var(--ease-twitch) infinite; }
/* lift: a plate rises and settles without turning, so it never swings over its neighbours */
.m-lift { animation: lift var(--t-lift) var(--ease-lift) infinite alternate; }
@keyframes lift { from { translate: 0 0; } to { translate: 0 calc(var(--kf-lift-y-pct) * var(--amp, 1)); } }
/* --amp: the part's own amplitude multiplier (kins.json `amp`, set by kins.js): a long mane swings less, a small paw more */
@keyframes sway { 0%, 100% { transform: rotate(calc(var(--kf-sway-from-deg) * var(--amp, 1))); } 50% { transform: rotate(calc(var(--kf-sway-to-deg) * var(--amp, 1))); } }
@keyframes flicker-flame {
  0%, 100% { transform: scale(1, 1) rotate(0deg); filter: brightness(1); }
  30% { transform: scale(calc(1 + (var(--kf-flame-p30-x) - 1) * var(--amp, 1)), calc(1 + (var(--kf-flame-p30-y) - 1) * var(--amp, 1))) rotate(calc(var(--kf-flame-p30-rot-deg) * var(--amp, 1))); filter: brightness(var(--kf-flame-p30-bright)); }
  60% { transform: scale(calc(1 + (var(--kf-flame-p60-x) - 1) * var(--amp, 1)), calc(1 + (var(--kf-flame-p60-y) - 1) * var(--amp, 1))) rotate(calc(var(--kf-flame-p60-rot-deg) * var(--amp, 1))); filter: brightness(var(--kf-flame-p60-bright)); }
}
@keyframes flutter { 0%, 100% { transform: rotate(0deg) scaleX(1); } 50% { transform: rotate(calc(var(--kf-flutter-rot-deg) * var(--amp, 1))) scaleX(var(--kf-flutter-x)); } }
@keyframes twitch { 0%, 84%, 100% { transform: rotate(0deg); } 88% { transform: rotate(calc(var(--kf-twitch-p88-deg) * var(--amp, 1))); } 92% { transform: rotate(calc(var(--kf-twitch-p92-deg) * var(--amp, 1))); } 96% { transform: rotate(calc(var(--kf-twitch-p96-deg) * var(--amp, 1))); } }

/* asleep (D93): slow breathing, sleep bubbles rise and fade (no letters) */
.kinfig.asleep .kf-sleep { transform-origin: 50% 92%; animation: sleep-breathe var(--t-sleep-breathe) var(--ease-sleep-breathe) infinite; }
@keyframes sleep-breathe { 50% { transform: scale(var(--kf-sleep-breathe-x), var(--kf-sleep-breathe-y)); } }
.kinfig .zz {
  position: absolute; left: 62%; top: var(--zz-top, 34%); width: 13%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(250, 240, 220, .9); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 60%);
  box-shadow: 0 0 6px rgba(250, 240, 220, .35); animation: zz var(--zz-cycle) var(--ease-zz) infinite;   /* cycle = KINS.sleepBubbles count × stepS, kins.js */
}
.kinfig .zz:nth-of-type(2) { width: 9%; }
.kinfig .zz:nth-of-type(3) { width: 16%; }
@keyframes zz { 0% { opacity: 0; translate: 0 0; scale: var(--kf-zz-from-scale); } 20% { opacity: var(--kf-zz-peak); } 100% { opacity: 0; translate: var(--kf-zz-x-pct) var(--kf-zz-y-pct); scale: var(--kf-zz-to-scale); } }

/* ---------- looks of a kin (album, dev/collection): <div class="kinlook" data-look="purified|silhouette"> holding
   .kl-halo, .kl-mote and .kl-fig (the figure). Numbers: KINS.look → --look-* (set like MOTION), MOTION purified* ---------- */
.kinlook { position: relative; container-type: inline-size; }
.kl-fig { position: absolute; inset: 0; }
/* purified by light (D62): paler warmer figure, bright rim, soft glow, a breathing halo and rising motes */
.kinlook[data-look="purified"] > .kl-fig {
  filter: brightness(var(--look-purified-brightness)) saturate(var(--look-purified-saturate)) sepia(var(--look-purified-sepia))
    drop-shadow(0 0 var(--look-purified-rim-px) color-mix(in srgb, var(--purified) calc(var(--look-purified-rim-alpha) * 100%), transparent))
    drop-shadow(0 0 var(--look-purified-glow-px) color-mix(in srgb, var(--purified) calc(var(--look-purified-glow-alpha) * 100%), transparent));
}
.kl-halo {
  position: absolute; left: 50%; top: 50%; width: var(--look-purified-halo-pct); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--purified) calc(var(--look-purified-halo-alpha) * 100%), transparent), transparent 70%);
  animation: halo var(--t-purified-halo) var(--ease-breathe) infinite;
}
@keyframes halo { 0%, 100% { scale: var(--kf-purified-halo-from-scale); } 50% { scale: var(--kf-purified-halo-to-scale); } }
.kl-mote {
  position: absolute; z-index: 1; width: 5px; aspect-ratio: 1; border-radius: 50%; background: var(--purified); box-shadow: 0 0 6px var(--purified);
  opacity: 0; animation: mote var(--t-purified-mote) var(--ease-zz) infinite;
}
@keyframes mote {
  0% { top: var(--kf-purified-mote-from-pct); opacity: 0; }
  30% { opacity: var(--kf-purified-mote-peak); }
  100% { top: var(--kf-purified-mote-to-pct); opacity: 0; }
}

/* the album silhouette (D118): shaded volume (default), flat or in fog — data-sil on an ancestor; rim light of --affinity */
.kinlook[data-look="silhouette"] > .kl-fig {
  --rim: drop-shadow(0 0 var(--look-silhouette-rim-px) color-mix(in srgb, var(--affinity, var(--gold-light)) calc(var(--look-silhouette-rim-alpha) * 100%), transparent))
    drop-shadow(0 0 var(--look-silhouette-glow-px) color-mix(in srgb, var(--affinity, var(--gold-light)) calc(var(--look-silhouette-glow-alpha) * 100%), transparent));
  filter: grayscale(1) brightness(var(--look-silhouette-brightness)) contrast(var(--look-silhouette-contrast)) var(--rim);
}
[data-sil="flat"] .kinlook[data-look="silhouette"] > .kl-fig { filter: brightness(0) var(--rim); }
[data-sil="fog"] .kinlook[data-look="silhouette"] > .kl-fig { filter: grayscale(1) brightness(var(--look-silhouette-brightness)) contrast(var(--look-silhouette-contrast)) blur(var(--look-silhouette-fog-px)) var(--rim); }

/* over the silhouette: a large question mark — the kin is not known yet; glows in the affinity colour, breathes slowly */
.kl-mark {
  /* --body-x, --body-y, --body-h: the kin's centre of mass and body height, % of its square (set per kin) */
  position: absolute; z-index: 1; translate: -50% -50%; pointer-events: none;
  left: calc(var(--body-x, 50) * 1%); top: calc((var(--body-y, 50) + var(--look-silhouette-mark-y) * var(--body-h, 80) / 100) * 1%);
  font: 400 calc(var(--body-h, 80) * var(--look-silhouette-mark-size) / 100 * 1cqi) / 1 var(--font-display); color: transparent;
  background: linear-gradient(180deg, var(--parchment), var(--gold-light) 55%, var(--glow)); -webkit-background-clip: text; background-clip: text;
  opacity: var(--look-silhouette-mark-alpha);
  filter: drop-shadow(0 0 var(--look-silhouette-mark-glow-px) var(--affinity, var(--gold-light))) drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
  animation: sil-mark var(--t-silhouette-mark) var(--ease-breathe) infinite;
}
@keyframes sil-mark { 0%, 100% { scale: var(--kf-silhouette-mark-from-scale); } 50% { scale: var(--kf-silhouette-mark-to-scale); } }
@media (prefers-reduced-motion: reduce) { .kl-halo, .kl-mark { animation: none; } .kl-mote { display: none; } }