/*
 * Papi character states (papi.css). Pairs with papi.svg; mountPapi() in papi.js wires them up.
 *
 * Root: the element with class "papi" and data-state="<state>" (mountPapi creates a <div class="papi">;
 * an inlined papi.svg also works as the root on its own).
 *
 * Two layers per part:
 *  - POSE   = the individual transform properties (translate / rotate / scale) plus opacity. Poses
 *             transition between states, so parts slide and fade instead of popping.
 *  - MOTION = `transform` keyframes on top of the pose (CSS applies translate, rotate, scale, then
 *             transform). Every keyframe set starts and ends at `none`, so the pose alone is always
 *             a complete, readable frame.
 * Reduced motion (OS setting, or data-motion="reduced" on the root): no keyframes and no sliding;
 * each state shows its static pose.
 *
 * Units: px values in transform-origin/translate are SVG user units of the 240x240 viewBox.
 */

.papi {
  --papi-move: .45s;
  --papi-ease: cubic-bezier(.3, .7, .25, 1);
  --papi-spring: cubic-bezier(.34, 1.5, .6, 1);
  --papi-fold: cubic-bezier(.55, -.3, .6, 1.12);
  display: inline-block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  line-height: 0;
  vertical-align: middle;
}
.papi .papi-svg,
svg.papi { display: block; width: 100%; height: 100%; overflow: hidden; }

/* ---------------------------------------------------------------- pose transitions + origins */

.papi :is(.papi-figure, .papi-shadow, .papi-body, .papi-face, .papi-eye, .papi-pupil, .papi-brow,
  .papi-hand, .papi-finger, .papi-flag, .papi-binoculars, .papi-patch, .papi-dogear) {
  transition-property: translate, rotate, scale, opacity;
  transition-duration: var(--papi-move), var(--papi-move), var(--papi-move), .3s;
  transition-timing-function: var(--papi-ease), var(--papi-ease), var(--papi-ease), ease;
}
.papi :is(.papi-mark, .papi-lid, .papi-eyes-happy, .papi-tear, .papi-mouth > *) { transition: opacity .2s ease; }

.papi :is(.papi-figure, .papi-shadow) { transform-box: view-box; transform-origin: 120px 211px; }
.papi .papi-body { transform-box: view-box; transform-origin: 120px 184px; }
.papi .papi-face { transform-box: view-box; transform-origin: 120px 100px; }
.papi .papi-binoculars { transform-box: view-box; transform-origin: 120px 92px; }
.papi .papi-hand-l { transform-box: view-box; transform-origin: 46px 136px; }
.papi .papi-hand-r { transform-box: view-box; transform-origin: 194px 136px; }
.papi .papi-flag { transform-box: view-box; transform-origin: 192px 140px; }
.papi :is(.papi-patch, .papi-patch-art) { transform-box: view-box; transform-origin: 101px 152px; }
.papi .papi-dogear { transform-box: view-box; transform-origin: 158px 55px; }
.papi :is(.papi-eye, .papi-pupil, .papi-brow, .papi-mark, .papi-sweat, .papi-sparkle, .papi-speed) {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.papi .papi-finger { transform-box: fill-box; transform-origin: 50% 100%; }
.papi .papi-flag-cloth { transform-box: fill-box; transform-origin: 100% 40%; }

/* ---------------------------------------------------------------- base (idle) visibility */

.papi .papi-binoculars { opacity: 0; translate: 0 30px; }
.papi .papi-flag { opacity: 0; scale: 1 .3; }
.papi .papi-patch { opacity: 0; }
.papi :is(.papi-mark, .papi-lid, .papi-eyes-happy, .papi-mouth > *) { opacity: 0; }
.papi .papi-m-neutral { opacity: 1; }

/* mouths: one per state */
.papi:is([data-state="interested"], [data-state="buying"], [data-state="bought"], [data-state="nervous"],
  [data-state="selling"], [data-state="regret"], [data-state="rewarded"]) .papi-m-neutral { opacity: 0; }
.papi[data-state="interested"] .papi-m-o,
.papi[data-state="buying"] .papi-m-flat,
.papi:is([data-state="bought"], [data-state="rewarded"]) .papi-m-smile,
.papi[data-state="nervous"] .papi-m-wobble,
.papi[data-state="selling"] .papi-m-grimace,
.papi[data-state="regret"] .papi-m-frown { opacity: 1; }

/* ---------------------------------------------------------------- scanning: paper binoculars */

.papi[data-state="scanning"] .papi-binoculars { opacity: 1; translate: 0 0; }
.papi[data-state="scanning"] .papi-hand-l { translate: 26px -30px; rotate: 14deg; }
.papi[data-state="scanning"] .papi-hand-r { translate: -26px -30px; rotate: -14deg; }
.papi[data-state="scanning"] .papi-brow { translate: 0 -3px; }

/* ---------------------------------------------------------------- interested: eyes widen, hands unfold */

.papi[data-state="interested"] .papi-eye { scale: 1.1 1.18; }
.papi[data-state="interested"] .papi-pupil { scale: 1.1; translate: 0 -1px; }
.papi[data-state="interested"] .papi-brow { translate: 0 -6px; }
.papi[data-state="interested"] .papi-hand-l { translate: 1px -16px; rotate: -6deg; }
.papi[data-state="interested"] .papi-hand-r { translate: -1px -16px; rotate: 6deg; }
.papi[data-state="interested"] .papi-mark-alert { opacity: 1; }
.papi[data-state="interested"] :is(.papi-eye, .papi-pupil, .papi-hand, .papi-finger) {
  transition-duration: .5s, .5s, .5s, .3s;
  transition-timing-function: var(--papi-spring), var(--papi-spring), var(--papi-spring), ease;
}
.papi[data-state="interested"] .papi-finger { transition-delay: .1s, .1s, .1s, 0s; }

/* fingers fan open (shared by interested and bought) */
.papi:is([data-state="interested"], [data-state="bought"]) .papi-finger-1 { rotate: -12deg; scale: 1.04; }
.papi:is([data-state="interested"], [data-state="bought"]) .papi-finger-2 { rotate: -3deg; scale: 1.06; }
.papi:is([data-state="interested"], [data-state="bought"]) .papi-finger-3 { rotate: 10deg; scale: 1.04; }

/* ---------------------------------------------------------------- buying: determined lean forward */

.papi[data-state="buying"] .papi-figure { rotate: 6deg; }
.papi[data-state="buying"] .papi-eye { scale: 1 .86; }
.papi[data-state="buying"] .papi-pupil { translate: 2.5px 1px; }
.papi[data-state="buying"] .papi-brow-l { rotate: 16deg; translate: 0 2px; }
.papi[data-state="buying"] .papi-brow-r { rotate: -16deg; translate: 0 2px; }
.papi[data-state="buying"] .papi-hand-r { translate: -10px -24px; rotate: 5deg; }
.papi[data-state="buying"] .papi-hand-l { translate: 4px 8px; rotate: -18deg; }
.papi[data-state="buying"] .papi-mark-speed { opacity: 1; }

/* ---------------------------------------------------------------- bought: held pose after the dance */

.papi[data-state="bought"] .papi-hand-l { translate: 8px -42px; rotate: -10deg; }
.papi[data-state="bought"] .papi-hand-r { translate: -8px -42px; rotate: 10deg; }
.papi[data-state="bought"] .papi-hand { transition-timing-function: var(--papi-spring), var(--papi-spring), var(--papi-spring), ease; }
.papi[data-state="bought"] .papi-eye { opacity: 0; }
.papi[data-state="bought"] .papi-eyes-happy { opacity: 1; }
.papi[data-state="bought"] .papi-brow { translate: 0 -4px; }
.papi[data-state="bought"] .papi-mark-joy { opacity: 1; }

/* ---------------------------------------------------------------- nervous: trembling paper hands */

.papi[data-state="nervous"] .papi-hand-l { translate: 26px -10px; rotate: 12deg; }
.papi[data-state="nervous"] .papi-hand-r { translate: -26px -10px; rotate: -12deg; }
.papi[data-state="nervous"] .papi-finger { scale: 1 .92; }
.papi[data-state="nervous"] .papi-eye { scale: 1.04 1.08; }
.papi[data-state="nervous"] .papi-pupil { scale: .78; }
.papi[data-state="nervous"] .papi-brow-l { rotate: -16deg; translate: 0 -2px; }
.papi[data-state="nervous"] .papi-brow-r { rotate: 16deg; translate: 0 -2px; }
.papi[data-state="nervous"] :is(.papi-mark-sweat, .papi-mark-tremble) { opacity: 1; }

/* ---------------------------------------------------------------- selling: white paper flag */

.papi[data-state="selling"] .papi-hand-r { translate: -8px -38px; rotate: 6deg; }
.papi[data-state="selling"] .papi-hand-r .papi-finger { scale: 1 .82; }
.papi[data-state="selling"] .papi-hand-l { translate: 2px 8px; rotate: -8deg; }
.papi[data-state="selling"] .papi-flag { opacity: 1; scale: 1; }
.papi[data-state="selling"] .papi-pupil { translate: 2px -2.5px; }
.papi[data-state="selling"] .papi-brow-l { rotate: -14deg; translate: 0 -2px; }
.papi[data-state="selling"] .papi-brow-r { rotate: 14deg; translate: 0 -2px; }

/* ---------------------------------------------------------------- regret: folds flat (one-shot, held) */

.papi[data-state="regret"] .papi-figure { scale: 1.12 .26; }
.papi[data-state="regret"] .papi-face { scale: .92 1.85; }
.papi[data-state="regret"] .papi-shadow { scale: 1.3 1; }
/* the hands fold in with him: they slide under the sheet and fade during the fold */
.papi[data-state="regret"] .papi-hand-l { translate: 40px 44px; rotate: -30deg; scale: .7; opacity: 0; }
.papi[data-state="regret"] .papi-hand-r { translate: -40px 44px; rotate: 30deg; scale: .7; opacity: 0; }
.papi[data-state="regret"] .papi-brow { opacity: 0; }
.papi[data-state="regret"] .papi-lid { opacity: 1; }
.papi[data-state="regret"] :is(.papi-figure, .papi-face, .papi-hand, .papi-shadow) {
  transition-duration: .85s, .85s, .85s, .3s;
  transition-delay: .3s, .3s, .3s, 0s;
  transition-timing-function: var(--papi-fold), var(--papi-fold), var(--papi-fold), ease;
}
.papi[data-state="regret"] .papi-hand { transition-duration: .85s, .85s, .85s, .4s; transition-delay: .3s, .3s, .3s, .55s; }
.papi[data-state="regret"] .papi-mark-thud { opacity: 1; transition-delay: 1.05s; }

/* ---------------------------------------------------------------- rewarded: fresh paper patch (one-shot, held) */

.papi[data-state="rewarded"] .papi-patch { opacity: 1; }
.papi[data-state="rewarded"] .papi-tear { opacity: 0; transition-delay: .6s; }
.papi[data-state="rewarded"] .papi-pupil { translate: -2.5px 3px; }
.papi[data-state="rewarded"] .papi-brow { translate: 0 -2px; }
.papi[data-state="rewarded"] .papi-mark-sparkle { opacity: 1; }

/* ================================================================ motion (keyframes) */

/* idle: paper breathing, a curling dog-ear, bobbing hands */
.papi[data-state="idle"] .papi-body { animation: papi-breathe 3.6s ease-in-out infinite alternate; }
.papi[data-state="idle"] .papi-dogear { animation: papi-curl 3.6s ease-in-out infinite alternate; }
.papi[data-state="idle"] .papi-hand { animation: papi-bob 3.6s ease-in-out infinite alternate; }
.papi[data-state="idle"] .papi-hand-r { animation-delay: .5s; }

/* an occasional blink wherever the eyes are plain */
.papi:is([data-state="idle"], [data-state="interested"], [data-state="buying"], [data-state="nervous"],
  [data-state="selling"]) .papi-eye { animation: papi-blink 5s linear 1.4s infinite; }

/* scanning: look left, look right */
.papi[data-state="scanning"] :is(.papi-face, .papi-hand) { animation: papi-look 4.8s ease-in-out .45s infinite; }

/* interested: one pop, then a subtle held loop */
.papi[data-state="interested"] .papi-mark-alert { animation: papi-pop .45s var(--papi-spring) both; }
.papi[data-state="interested"] .papi-hand { animation: papi-hover 2.2s ease-in-out .55s infinite alternate; }
.papi[data-state="interested"] .papi-finger { animation: papi-flutter 2.4s ease-in-out .6s infinite; }
.papi[data-state="interested"] .papi-finger-2 { animation-delay: .9s; }

/* buying: pressing forward */
.papi[data-state="buying"] .papi-figure { animation: papi-push 1.5s ease-in-out .4s infinite; }
.papi[data-state="buying"] .papi-hand-r { animation: papi-press 1.5s ease-in-out .4s infinite; }
.papi[data-state="buying"] .papi-speed { animation: papi-speed 1.5s ease-in-out .4s infinite; }

/* bought: one 2.2s dance, then the held pose above */
.papi[data-state="bought"] .papi-figure { animation: papi-dance 2.2s .05s both; }
.papi[data-state="bought"] .papi-hand-l { animation: papi-pump-l 2.2s ease-in-out .05s both; }
.papi[data-state="bought"] .papi-hand-r { animation: papi-pump-r 2.2s ease-in-out .05s both; }
.papi[data-state="bought"] .papi-shadow { animation: papi-shadow-hop 2.2s ease-in-out .05s both; }
.papi[data-state="bought"] .papi-mark-joy { animation: papi-pop .45s var(--papi-spring) .15s both; }

/* nervous: small, steady tremble */
.papi[data-state="nervous"] .papi-hand { animation: papi-tremble .36s linear infinite; }
.papi[data-state="nervous"] .papi-hand-r { animation-delay: .18s; }
.papi[data-state="nervous"] .papi-pupil { animation: papi-dart 3.2s ease-in-out .5s infinite; }
.papi[data-state="nervous"] .papi-sweat { animation: papi-drip 2.8s ease-in .3s infinite both; }

/* selling: wave the flag */
.papi[data-state="selling"] .papi-hand-r { animation: papi-wave 2.4s .45s infinite; }
.papi[data-state="selling"] .papi-flag-cloth { animation: papi-ripple 1.2s ease-in-out .45s infinite; }
.papi[data-state="selling"] .papi-hand-l { animation: papi-bob 3.6s ease-in-out infinite alternate; }

/* regret: the fold is the pose transition above (.3s beat, .85s fold); it then holds flat */

/* rewarded: one 2.3s patch-up, then the held pose above */
.papi[data-state="rewarded"] .papi-hand-l { animation: papi-pat 2.3s ease-in-out both; }
.papi[data-state="rewarded"] .papi-patch-art { animation: papi-apply 2.3s ease-in-out both; }
.papi[data-state="rewarded"] .papi-body { animation: papi-squish 2.3s ease-in-out both; }
.papi[data-state="rewarded"] .papi-sparkle { animation: papi-twinkle 2.3s ease-out both; }

@keyframes papi-breathe { to { transform: scale(1.012, 1.028); } }
@keyframes papi-curl { to { transform: scale(.86); } }
@keyframes papi-bob { to { transform: translateY(-2.5px); } }
@keyframes papi-hover { to { transform: translateY(-3px); } }
@keyframes papi-blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.1); } }
@keyframes papi-look {
  0%, 8%, 100% { transform: none; }
  26%, 46% { transform: translateX(-5px); }
  64%, 84% { transform: translateX(5px); }
}
@keyframes papi-pop { from { transform: scale(.4); } }
@keyframes papi-flutter { 0%, 100% { transform: none; } 50% { transform: rotate(3deg); } }
@keyframes papi-push { 0%, 100% { transform: none; } 50% { transform: rotate(1.6deg) translateX(1px); } }
@keyframes papi-press { 0%, 100% { transform: none; } 50% { transform: translate(2px, -2px); } }
@keyframes papi-speed { 0%, 100% { transform: none; } 50% { transform: translateX(-6px); } }
@keyframes papi-dance {
  0% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  13% { transform: translateY(-11px) rotate(-3deg) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  26% { transform: translateY(0) rotate(0deg) scale(1.04, .95); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  39% { transform: translateY(-11px) rotate(3deg) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  52% { transform: translateY(0) rotate(0deg) scale(1.04, .95); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  65% { transform: translateY(-7px) rotate(-1.5deg) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
  78% { transform: translateY(0) rotate(0deg) scale(1.02, .97); animation-timing-function: ease-out; }
  90%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
@keyframes papi-pump-l {
  0%, 82%, 100% { transform: none; }
  13%, 65% { transform: translateY(-9px) rotate(-5deg); }
  26%, 52% { transform: translateY(3px) rotate(3deg); }
  39% { transform: translateY(-4px) rotate(-3deg); }
}
@keyframes papi-pump-r {
  0%, 82%, 100% { transform: none; }
  13% { transform: translateY(-4px) rotate(3deg); }
  26%, 52% { transform: translateY(-9px) rotate(5deg); }
  39%, 65% { transform: translateY(3px) rotate(-3deg); }
}
@keyframes papi-shadow-hop {
  0%, 26%, 52%, 78%, 100% { transform: none; }
  13%, 39% { transform: scale(.82, .9); }
  65% { transform: scale(.9, .95); }
}
@keyframes papi-tremble {
  0%, 100% { transform: none; }
  25% { transform: translate(1.2px, -.5px) rotate(1.5deg); }
  50% { transform: translate(-.3px, .6px) rotate(-.4deg); }
  75% { transform: translate(-1.2px, -.3px) rotate(-1.5deg); }
}
@keyframes papi-dart {
  0%, 18%, 100% { transform: none; }
  26%, 44% { transform: translateX(-2.5px); }
  52%, 70% { transform: translateX(2.5px); }
}
@keyframes papi-drip {
  0% { transform: translateY(-4px); opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
@keyframes papi-wave {
  0% { transform: none; animation-timing-function: ease-out; }
  25% { transform: rotate(-10deg); animation-timing-function: ease-in-out; }
  75% { transform: rotate(10deg); animation-timing-function: ease-in; }
  100% { transform: none; }
}
@keyframes papi-ripple { 0%, 100% { transform: none; } 50% { transform: skewY(-6deg) scaleX(.94); } }
@keyframes papi-pat {
  0%, 84%, 100% { transform: none; }
  24%, 42%, 58% { transform: translate(52px, 14px) rotate(24deg); }
  33% { transform: translate(52px, 16px) rotate(24deg) scale(.93); }
  50% { transform: translate(49px, 12px) rotate(21deg); }
}
@keyframes papi-apply {
  0% { transform: translate(-52px, -14px) rotate(-16deg) scale(.7); opacity: 0; }
  8% { opacity: 1; }
  24% { transform: translate(0, 0) rotate(0deg) scale(1.06); }
  33% { transform: translate(0, 0) rotate(0deg) scale(.95); }
  42%, 100% { transform: none; opacity: 1; }
}
@keyframes papi-squish { 0%, 28%, 42%, 100% { transform: none; } 33% { transform: scale(1.015, .985); } }
@keyframes papi-twinkle {
  0%, 56% { transform: scale(0); }
  68% { transform: scale(1.25) rotate(20deg); }
  80%, 100% { transform: none; }
}

/* ================================================================ reduced motion: static poses */

.papi[data-motion="reduced"],
.papi[data-motion="reduced"] * {
  animation: none !important;
  transition-property: opacity !important;
  transition-duration: .2s !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  .papi,
  .papi * {
    animation: none !important;
    transition-property: opacity !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
  }
}

/* ================================================================ small sizes (data-size="sm", set below 96px) */

.papi[data-size="sm"] :is(.papi-crease, .papi-tear) { display: none; }
.papi[data-size="sm"] .papi-figure { stroke-width: 4.2; }
.papi[data-size="sm"] .papi-hand-art { stroke-width: 4.6; }
.papi[data-size="sm"] :is(.papi-brows, .papi-eyes-happy) { stroke-width: 5; }
.papi[data-size="sm"] .papi-marks { stroke-width: 4; }
.papi[data-size="sm"] .papi-halo { stroke-width: 8.5; }