/* Letter rig — styles for one animated letter built by letter-rig.js.
   Size the host element (width/height); everything inside scales.
   Ink follows currentColor unless --wt-rig-ink is set; painted eyes use
   --wt-rig-eye. --wt-hop is written by the script (hop height in px). */

.wt-rig { display: block; cursor: pointer; outline-offset: 6px; }
.wt-rig-body { width: 100%; height: 100%; transform-origin: 50% 60%; will-change: transform; }
.wt-rig-hopper { width: 100%; height: 100%; transform-origin: 50% 100%; }
.wt-rig-hopper > svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.wt-rig-glyph { fill: var(--wt-rig-ink, currentColor); }
.wt-rig-eyes-ink { fill: var(--wt-rig-eye, #0e0d12); }
/* Blush: cheeks that multiply into light ink (or screen onto dark ink via --wt-rig-blush-blend). */
.wt-rig-blush { mix-blend-mode: var(--wt-rig-blush-blend, multiply); pointer-events: none; }
.wt-rig-blush-stop { stop-color: var(--wt-rig-blush, #ff4f6b); }

/* Hop: the ballistic arc and the squash & stretch run as two concurrent
   animations so each can carry its own easing per keyframe. */
.wt-rig-hopper.hop { animation: wt-rig-hop-arc 720ms linear both; will-change: transform; }
.wt-rig-hopper.hop > svg { animation: wt-rig-hop-squash 720ms linear both; }
.wt-rig-hopper.wiggle { animation: wt-rig-wiggle 640ms linear both; will-change: transform; }

@keyframes wt-rig-hop-arc {
  0%   { transform: translateY(0); animation-timing-function: linear; }
  16%  { transform: translateY(0); animation-timing-function: cubic-bezier(.17,.67,.35,1); }   /* launch: fast out, ease into apex */
  48%  { transform: translateY(calc(var(--wt-hop, 60px) * -1)); animation-timing-function: cubic-bezier(.55,0,.85,.4); } /* fall: ease in */
  82%  { transform: translateY(0); animation-timing-function: linear; }
  100% { transform: translateY(0); }
}
@keyframes wt-rig-hop-squash {
  0%   { transform: scale(1, 1);       animation-timing-function: ease-in-out; }
  16%  { transform: scale(1.10, .88);  animation-timing-function: ease-out; }     /* anticipation squash */
  26%  { transform: scale(.94, 1.10);  animation-timing-function: ease-in-out; }  /* launch stretch */
  48%  { transform: scale(1, 1);       animation-timing-function: ease-in; }      /* apex */
  76%  { transform: scale(.96, 1.06);  animation-timing-function: ease-in; }      /* falling */
  82%  { transform: scale(1.14, .84);  animation-timing-function: ease-out; }     /* landing squash */
  91%  { transform: scale(.98, 1.03);  animation-timing-function: ease-in-out; }
  100% { transform: scale(1, 1); }
}
@keyframes wt-rig-wiggle {
  0%   { transform: rotate(0deg);  animation-timing-function: ease-in-out; }
  6%   { transform: rotate(2deg);  animation-timing-function: ease-in-out; }  /* anticipation */
  22%  { transform: rotate(-9deg); animation-timing-function: ease-in-out; }
  44%  { transform: rotate(7deg);  animation-timing-function: ease-in-out; }
  64%  { transform: rotate(-4deg); animation-timing-function: ease-in-out; }
  82%  { transform: rotate(2deg);  animation-timing-function: ease-out; }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-rig-hopper.hop, .wt-rig-hopper.hop > svg, .wt-rig-hopper.wiggle { animation: none; }
}