/* Hasse — skogsharen, nr 84. Styles + all motion for /js/hasse.js.
   Identity tokens come from :root (--paper, --ink, --red, --sun …); every use has a fallback.
   Geometry: 80×96 viewBox, 1 unit = 1 px at size 96. Pivots are set inline by hasse.js. */

.hasse {
  --hasse-size: 96px;
  --h-fur: #FFFFFF;
  --h-shade: #E4E5EC;
  --h-inner: #F3CDC8;
  --h-tip: #A4A5B1;
  display: inline-block;
  vertical-align: middle;
  height: var(--hasse-size);
  width: calc(var(--hasse-size) * 80 / 96);
  line-height: 0;
  flex: none;
  position: relative;
}
.hasse[data-coat="summer"] {
  --h-fur: #AD9683;
  --h-shade: #92806F;
  --h-inner: #E8B5A8;
  --h-tip: #574F4B;
}
.hasse svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
}
.hasse text { user-select: none; }

/* outline weight: 3 units (= 3 px at size 96); heavier at chip size so he does not go thin */
.hasse { --hs: 3px; }
.hasse.hasse--sm { --hs: 4.2px; }
.hasse .o { stroke-width: var(--hs); }
.hasse .li { stroke-width: calc(var(--w) * 1px + var(--hs) * 2); }

/* ---------- pose parts: each part lists the poses it belongs to ---------- */
.hasse .h-p { opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.hasse[data-pose="idle"]   .h-p-idle,
.hasse[data-pose="run"]    .h-p-run,
.hasse[data-pose="point"]  .h-p-point,
.hasse[data-pose="wait"]   .h-p-wait,
.hasse[data-pose="banana"] .h-p-banana,
.hasse[data-pose="cheer"]  .h-p-cheer { opacity: 1; }

/* everything that moves eases between poses */
.hasse .h-fig, .hasse .h-ear, .hasse .h-arm, .hasse .h-leg, .hasse .h-brow, .hasse .h-eyes, .hasse .h-band {
  transition: transform .32s cubic-bezier(.2, .8, .2, 1.15);
}

/* ---------- idle: slight outward tilt on the straight ear, a twitch every 4 s, a blink ---------- */
.hasse .h-ear-l { transform: rotate(-8deg); }
.hasse[data-pose="idle"] .h-ear-l { animation: h-twitch 4s ease-in-out infinite; }
@keyframes h-twitch {
  0%, 100% { transform: rotate(-8deg); }
  3%  { transform: rotate(-22deg); }
  6%  { transform: rotate(-5deg); }
  9%  { transform: rotate(-17deg); }
  12% { transform: rotate(-8deg); }
}
.hasse[data-pose="idle"]   .h-eyes,
.hasse[data-pose="point"]  .h-eyes,
.hasse[data-pose="wait"]   .h-eyes,
.hasse[data-pose="banana"] .h-eyes { animation: h-blink 3.7s linear 1.2s infinite; }
@keyframes h-blink {
  0%, 100% { transform: scaleY(1); }
  2% { transform: scaleY(.08); }
  4% { transform: scaleY(1); }
}

/* ---------- run: lean + bob, ears back, two-frame leg and arm swap at 6 fps ---------- */
.hasse[data-pose="run"] .h-fig { animation: h-run-fig .34s linear infinite; }
.hasse[data-pose="run"] .h-ear-l,
.hasse[data-pose="run"] .h-ear-r { transform: rotate(-38deg); }
.hasse[data-pose="run"] .h-leg-l { animation: h-run-leg-l .34s linear infinite; }
.hasse[data-pose="run"] .h-leg-r { animation: h-run-leg-r .34s linear infinite; }
.hasse[data-pose="run"] .h-arm-run.h-arm-l { animation: h-run-arm-l .34s linear infinite; }
.hasse[data-pose="run"] .h-arm-run.h-arm-r { animation: h-run-arm-r .34s linear infinite; }
.hasse[data-pose="run"] .h-brow-l { transform: translateY(.6px) rotate(9deg); }
.hasse[data-pose="run"] .h-brow-r { transform: translateY(.6px) rotate(-9deg); }
@keyframes h-run-fig {
  0%, 50%, 100% { transform: rotate(7deg) translateY(0); }
  25%, 75% { transform: rotate(7deg) translateY(-2.2px); }
}
/* each leg keeps its side: one planted (toes forward), the other kicked back and lifted */
@keyframes h-run-leg-l { 0%, 49.99% { transform: translate(-2.5px, -4px) rotate(20deg); } 50%, 100% { transform: translate(1px, 0) rotate(-7deg); } }
@keyframes h-run-leg-r { 0%, 49.99% { transform: translate(1px, 0) rotate(-7deg); } 50%, 100% { transform: translate(-2.5px, -4px) rotate(20deg); } }
@keyframes h-run-arm-l { 0%, 49.99% { transform: translateY(-2.2px); } 50%, 100% { transform: translateY(1.2px); } }
@keyframes h-run-arm-r { 0%, 49.99% { transform: translateY(1.2px); }  50%, 100% { transform: translateY(-2.2px); } }

/* ---------- point: one brow up ---------- */
.hasse[data-pose="point"] .h-brow-r { transform: translateY(-1.8px) rotate(-8deg); }

/* ---------- wait: the straight ear droops, brows settle ---------- */
.hasse[data-pose="wait"] .h-ear-l { transform: rotate(-52deg); }
.hasse[data-pose="wait"] .h-brow-l,
.hasse[data-pose="wait"] .h-brow-r { transform: translateY(.9px); }

/* ---------- banana: sits down, looks at the banana, relaxed brows ---------- */
.hasse[data-pose="banana"] .h-fig { transform: translateY(6px); }
.hasse[data-pose="banana"] .h-eyes { transform: translate(1.6px, .6px); }
.hasse[data-pose="banana"] .h-brow-l { transform: translate(1px, -.6px) rotate(-7deg); }
.hasse[data-pose="banana"] .h-brow-r { transform: translate(1px, -1.4px) rotate(7deg); }
.hasse[data-pose="banana"] .h-ear-l { transform: rotate(-14deg); }

/* ---------- cheer: both ears straight up, arms up, sweatband pops, a small hop ---------- */
.hasse[data-pose="cheer"] .h-fig { animation: h-hop 1.1s cubic-bezier(.3, 0, .2, 1) infinite; }
.hasse[data-pose="cheer"] .h-ear-l { transform: rotate(0deg); animation: h-cheer-ear-l 1.1s ease-in-out infinite; }
.hasse[data-pose="cheer"] .h-ear-straight { animation: h-cheer-ear-r 1.1s ease-in-out infinite; }
.hasse[data-pose="cheer"] .h-band { animation: h-band-pop 1.1s cubic-bezier(.3, 0, .2, 1) .06s infinite; }
.hasse[data-pose="cheer"] .h-arm-cheer.h-arm-l { animation: h-cheer-arm-l 1.1s ease-in-out infinite; }
.hasse[data-pose="cheer"] .h-arm-cheer.h-arm-r { animation: h-cheer-arm-r 1.1s ease-in-out infinite; }
.hasse[data-pose="cheer"] .h-brow-l { transform: translateY(-2.4px) rotate(-6deg); }
.hasse[data-pose="cheer"] .h-brow-r { transform: translateY(-2.4px) rotate(6deg); }
@keyframes h-hop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
@keyframes h-band-pop {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2.2px); }
}
@keyframes h-cheer-ear-l { 0%, 60%, 100% { transform: rotate(0deg); }  30% { transform: rotate(-7deg); } }
@keyframes h-cheer-ear-r { 0%, 60%, 100% { transform: rotate(0deg); }  30% { transform: rotate(7deg); } }
@keyframes h-cheer-arm-l { 0%, 60%, 100% { transform: rotate(0deg); }  30% { transform: rotate(-12deg); } }
@keyframes h-cheer-arm-r { 0%, 60%, 100% { transform: rotate(0deg); }  30% { transform: rotate(12deg); } }

/* ---------- pose switch: a quick squish from the feet ---------- */
.hasse.is-switching svg { animation: h-squish .32s cubic-bezier(.2, .8, .2, 1) 1; }
@keyframes h-squish {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.07, .92); }
  70% { transform: scale(.98, 1.03); }
  100% { transform: scale(1, 1); }
}

/* ---------- speech bubble ---------- */
.hasse-bubble {
  --hb-ink: var(--ink, #1B1A2E);
  --hb-paper: var(--paper, #FFF7EA);
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  max-width: 300px;
  padding: 12px 16px 13px;
  background: var(--hb-paper);
  color: var(--hb-ink);
  border: 3px solid var(--hb-ink);
  border-radius: 18px;
  font-family: 'Fredoka', 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: .005em;
  text-wrap: pretty;
  /* hard 4 px offset shadow, no blur — drop-shadow so the tail casts it too */
  filter: drop-shadow(4px 4px 0 rgba(27, 26, 46, .12));
  animation: h-bubble-in .32s cubic-bezier(.2, .9, .3, 1.25) both;
}
.hasse-bubble[data-tail="left"]   { transform-origin: 0 88%; }
.hasse-bubble[data-tail="right"]  { transform-origin: 100% 88%; }
.hasse-bubble[data-tail="bottom"] { transform-origin: 14% 100%; }
@keyframes h-bubble-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
/* the tail: a bordered square corner, rotated to point at Hasse */
.hasse-bubble::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  background: var(--hb-paper);
  border: 0 solid var(--hb-ink);
  border-left-width: 3px;
  border-bottom-width: 3px;
}
.hasse-bubble[data-tail="left"]::after   { left: -9.5px;  bottom: 20px;  transform: rotate(45deg); }
.hasse-bubble[data-tail="right"]::after  { right: -9.5px; bottom: 20px;  transform: rotate(225deg); }
.hasse-bubble[data-tail="bottom"]::after { left: 22px;    bottom: -9.5px; transform: rotate(-45deg); }

.hasse-bubble-text { display: inline; }
.hasse-bubble-rest { visibility: hidden; }
.hasse-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- reduced motion: no animation at all, poses hold a clear still ---------- */
@media (prefers-reduced-motion: reduce) {
  .hasse *, .hasse svg, .hasse-bubble { animation: none !important; transition: none !important; }
  .hasse[data-pose="run"] .h-fig { transform: rotate(7deg); }
  .hasse[data-pose="run"] .h-leg-l { transform: translate(-2.5px, -4px) rotate(20deg); }
  .hasse[data-pose="run"] .h-leg-r { transform: translate(1px, 0) rotate(-7deg); }
  .hasse[data-pose="run"] .h-arm-run.h-arm-l { transform: translateY(-2.2px); }
  .hasse[data-pose="run"] .h-arm-run.h-arm-r { transform: translateY(1.2px); }
  .hasse[data-pose="cheer"] .h-fig { transform: translateY(-2px); }
}