/* Balam mascot animations (paired with balam.js). Transforms only; every part turns around a fixed point
   of the drawing (SVG user units, viewBox 0 0 240 240). */
.balam-host {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 6px;
  border-radius: 24px;
}
.balam-host:focus-visible { outline: 3px dashed #22665E; }
.balam { width: 100%; height: auto; display: block; overflow: visible; }
.balam g { transform-box: view-box; }
.b-root { transform-origin: 130px 226px; }
.b-head { transform-origin: 132px 124px; } /* tilt pivot (neck); the turn's scale uses the same origin */
.b-tail { transform-origin: 108px 192px; }
.b-arm { transform-origin: 162px 138px; }
.b-hand { transform-origin: 174px 174px; }
.b-leg-b { transform-origin: 117px 196px; }
.b-leg-f { transform-origin: 150px 198px; }
.b-eye { transform-origin: 177px 76px; }
.b-crest { transform-origin: 110px 150px; }
.b-pack { transform-origin: 100px 116px; } /* hangs from the strap */
.b-pupil { transition: translate .18s ease-out; }
.b-mouth-o { opacity: 0; }
/* Half turn toward the viewer (wave), played as ONE movement: every part uses the same duration and curve,
   the head leads and the body follows a beat later (tail and feet last). The near side of the face and body
   (eye, cheek, mouth, belly, arm) slides back; the far side (far eye, crest, tail) comes into view. */
.balam { --turn: .6s cubic-bezier(.45, .05, .3, 1); --turn-body: 70ms; --turn-end: 140ms; }
/* The whole head turns as one piece: it narrows toward the neck (the .b-head origin), so every feature slides
   back by how far it sits from there — the nose the most, then the far eye, the eye, the cheek. Each feature
   adds only a small extra shift for its curve, so nothing slides on its own over the face. */
/* The far eye waits past the snout curve, where the head outline clips it; it is shown at once and slides in
   (never a see-through eye over the face), and hides only after it is back behind the curve */
/* Profile only (one eye): the turn toward the viewer is a gentle foreshortening of the whole head */
.b-head, .b-eye, .b-eye2, .b-cheek, .b-hcrest, .b-nose, .b-mouth-c, .b-mouth-o { transition: translate var(--turn), scale var(--turn), opacity .25s; }
.b-belly, .b-arm, .b-armpit, .b-crest { transition: translate var(--turn) var(--turn-body), scale var(--turn) var(--turn-body); }
.b-tail, .b-leg-f, .b-leg-b { transition: translate var(--turn) var(--turn-end), scale var(--turn) var(--turn-end); }
.b-cheek, .b-armpit { transform-box: view-box; transform-origin: 172px 105px; }
.is-turned .b-head { scale: .95 1; translate: 1px 0; }
.is-turned .b-eye { translate: -3px 0; scale: 1.02 1; } /* turns toward the viewer: rounder, not thinner */
.is-turned .b-cheek { translate: -3px .5px; scale: 1.05 1; }
.is-turned .b-belly { translate: -8px 0; }
.is-turned .b-arm, .is-turned .b-armpit { translate: -7px 1px; } /* the shoulder rides on the turning chest */
.is-turned .b-crest { translate: 3px 0; }
/* The crest on the midline only narrows a touch more toward the top (spikes turning edge-on) */
.b-hcrest, .b-nose, .b-mouth-c, .b-mouth-o { transform-box: view-box; }
.b-hcrest { transform-origin: 150px 70px; }
.is-turned .b-hcrest { scale: .97 1; translate: 1px 0; }
.is-turned .b-mouth-c, .is-turned .b-mouth-o { translate: -2px 0; }
.is-turned .b-nose { translate: -1px .5px; } /* rides on the snout tip, which comes toward the viewer */
/* Feet stay planted (they carry his weight); only the near toes pivot a touch and the far foot peeks out */
.is-turned .b-leg-f { scale: .95 1; }
.is-turned .b-leg-b { translate: 3px 0; }
.is-turned .b-tail { scale: .9 1; translate: 2px 0; }
.is-talking .b-mouth-o { opacity: 1; }
.is-talking .b-mouth-c { opacity: 0; }

/* Idle life: pops in, breathes, blinks, wags, tilts the head */
.balam-host .balam { animation: balam-enter .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.b-root { animation: balam-breathe 3.4s ease-in-out infinite; }
.b-head { animation: balam-tilt 7s ease-in-out infinite; }
.b-eye { animation: balam-blink 4.8s infinite; }
.b-tail { animation: balam-wag 2.6s ease-in-out infinite; }
.b-crest { animation: balam-crest 3.4s ease-in-out infinite; }
.balam-host:hover .b-tail { animation-duration: .9s; }

/* Peek: hides below the edge of its box and pops up every few seconds */
.pose-peek { overflow: hidden; }
.pose-peek .balam { animation: balam-peek 7s ease-in-out infinite; }

@keyframes balam-enter { from { transform: translateY(40%) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes balam-breathe { 50% { transform: scale(1.015, 1.03); } }
@keyframes balam-tilt { 0%, 40%, 100% { transform: none; } 48%, 60% { transform: rotate(-5deg); } 68%, 80% { transform: rotate(3deg); } }
@keyframes balam-blink { 0%, 91%, 97%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes balam-wag { 50% { transform: rotate(7deg); } }
@keyframes balam-crest { 50% { transform: rotate(-1deg); } }
@keyframes balam-peek { 0%, 14%, 86%, 100% { transform: translateY(78%); } 26%, 74% { transform: translateY(6%); } 32%, 66% { transform: translateY(10%); } }

/* Speech balloon */
.balam-say {
  position: absolute; left: 50%; bottom: 100%;
  translate: -50% 0;
  padding: .45em .9em; border-radius: 18px;
  background: #fff; color: #2A3B3A; border: 2px solid #22665E;
  font-weight: 700; font-size: clamp(.85rem, 2.5vw, 1rem); white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; z-index: 5;
}
.balam-say::after {
  content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px;
  border: 8px solid transparent; border-top-color: #22665E;
}
.balam-say.is-visible { opacity: 1; transform: none; }

/* Bubbles on tap */
.balam-bubble {
  position: absolute; bottom: 30%; width: var(--size); height: var(--size);
  border-radius: 50%; border: 2px solid rgba(79, 163, 217, .8); background: rgba(255, 255, 255, .5);
  animation: balam-bubble 1.4s ease-out forwards; pointer-events: none;
}
@keyframes balam-bubble { from { transform: none; opacity: 1; } to { transform: translate(calc((var(--size) - 12px) * 3), -160px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .balam-host .balam, .balam g, .pose-peek .balam { animation: none !important; }
  .balam g, .b-cheek, .b-nose, .b-mouth-c { transition: none !important; }
  .pose-peek .balam { transform: translateY(8%); }
}