/* The homepage mascot, before and after the "not very delightful" list, with
   each idea on a switch. Markup: parts/mascot/runner-switches.html. Script: runner.js.
   The motion values are copied from bentossell.com at 0799ae5 (before) and d868a70 (after). */
.mr { --mw: 104px; --mh: 68px; }
@container mr (max-width: 520px) { .mr .mr-track { --mw: 80px; --mh: 52px; top: 100px; left: 16px; right: 16px; } .mr .mr-hint { left: 16px; right: 16px; font-size: 10px; } }
.mr-view { position: relative; height: 170px; container: mr / inline-size; overflow: hidden; outline: none; }
.mr-view:focus-visible { box-shadow: inset 0 0 0 2px var(--gray-1000); }
.mr-track { position: absolute; left: 24px; right: 24px; top: 120px; height: 2px; background: var(--gray-400); }
.mr-lane { position: absolute; left: 0; right: 0; bottom: 2px; height: var(--mh); pointer-events: none; }
.mr-runner { --x: 0px; --jump: 0px; position: absolute; left: 0; bottom: 0; width: var(--mw); height: var(--mh); transform: translate3d(var(--x), var(--jump), 0); transform-origin: 50% 100%; will-change: transform; }
.mr-sprite { display: block; width: 100%; height: 100%; overflow: visible; }
.mr-hint { position: absolute; left: 24px; right: 24px; bottom: 12px; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--gray-1000); text-align: center; }

/* before: a two-frame bob, limbs flicking between two angles */
.mr-body { transform-origin: 50% 78%; animation: mr-bob 400ms steps(2, end) infinite; }
.mr-arm-l, .mr-leg-r { animation: mr-limb-a 400ms steps(2, end) infinite; }
.mr-arm-r, .mr-leg-l { animation: mr-limb-b 400ms steps(2, end) infinite; }
@keyframes mr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mr-limb-a { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes mr-limb-b { 0%, 100% { transform: rotate(13deg); } 50% { transform: rotate(-13deg); } }

/* crab walk: a smooth four-beat gait, a sway, and the tongue wiggling */
.mr.f-crab .mr-body { animation: mr-gait-body 520ms linear infinite; }
.mr.f-crab .mr-arm-l, .mr.f-crab .mr-leg-r { animation: mr-gait-a 520ms linear infinite; }
.mr.f-crab .mr-arm-r, .mr.f-crab .mr-leg-l { animation: mr-gait-b 520ms linear infinite; }
.mr.f-crab .mr-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: mr-tongue 1.4s ease-in-out infinite; }
.mr.f-crab .mr-runner.is-fast .mr-body,
.mr.f-crab .mr-runner.is-fast .mr-limb { animation-duration: 290ms; }
@keyframes mr-gait-body { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-1.2deg); } 75% { transform: translateY(-2px) rotate(1.2deg); } }
@keyframes mr-gait-a { 0%, 100% { transform: rotate(-12deg); } 25% { transform: rotate(7deg); } 50% { transform: rotate(13deg); } 75% { transform: rotate(-5deg); } }
@keyframes mr-gait-b { 0%, 100% { transform: rotate(12deg); } 25% { transform: rotate(-7deg); } 50% { transform: rotate(-13deg); } 75% { transform: rotate(5deg); } }
@keyframes mr-tongue { 0%, 72%, 100% { transform: translateY(0) rotate(0); } 82% { transform: translateY(1px) rotate(-4deg); } 92% { transform: translateY(0) rotate(3deg); } }

/* skid: squash as it turns */
.mr .mr-runner.is-turning .mr-body { animation: mr-turn 300ms ease-out; }
@keyframes mr-turn { 0% { transform: translateX(0) scale(1); } 35% { transform: translateX(4px) scaleX(1.08) scaleY(.9); } 65% { transform: translateX(-2px) scaleX(.96) scaleY(1.05); } 100% { transform: translateX(0) scale(1); } }

/* the line feels its steps: a small mark under each footfall */
.mr-bump { --bx: 0px; position: absolute; top: 0; left: var(--bx); width: 28px; height: 2px; background: var(--gray-1000); opacity: 0; transform: scaleX(.25); pointer-events: none; }
.mr-bump.is-on { animation: mr-step 180ms ease-out; }
@keyframes mr-step { 0% { opacity: 0; transform: scaleX(.25); } 45% { opacity: .7; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.35); } }

/* eyes and blinks */
.mr-eye { transform-box: fill-box; transform-origin: 50% 65%; transition: transform 70ms ease; }
.mr-pupil { transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 90ms ease-out; }
.mr-runner.is-blinking .mr-eye { transform: scaleY(.08); }

/* wave */
.mr .mr-runner.is-waving .mr-arm-r { animation: mr-wave 210ms ease-in-out 5 alternate; }
@keyframes mr-wave { from { transform: rotate(8deg); } to { transform: rotate(-38deg); } }

/* jump */
.mr .mr-runner.is-airborne .mr-body { animation: mr-air 420ms ease-in-out infinite alternate; }
.mr .mr-runner.is-landing .mr-body { animation: mr-land 170ms ease-out; }
@keyframes mr-air { from { transform: rotate(-2deg) scaleX(.96) scaleY(1.04); } to { transform: rotate(2deg) scaleX(1.02) scaleY(.98); } }
@keyframes mr-land { 0% { transform: scaleX(.94) scaleY(1.08); } 45% { transform: scaleX(1.1) scaleY(.86); } 100% { transform: scale(1); } }
.mr.f-jump .mr-runner, .mr.f-hello .mr-runner { pointer-events: auto; }
.mr.f-jump .mr-runner { cursor: pointer; }

/* hover label */
.mr-tip { position: absolute; bottom: calc(100% + 7px); left: 50%; padding: 2px 0; font-family: var(--mono); font-size: 10px; line-height: 1; white-space: nowrap; color: var(--gray-1000); opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 180ms ease, transform 180ms ease; }
.mr.f-hello .mr-runner:hover .mr-tip { opacity: 1; transform: translate(-50%, 0); }

/* the switches under the window */
.mr-switches { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.mr-presets { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--gray-200); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 2px 8px -2px rgb(0 0 0 / 0.08); }
.mr-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.mr-label { font-family: var(--mono); font-size: 11px; color: var(--gray-1000); margin-right: 2px; }
.mr-switches button { font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; border: 0; border-radius: 999px; min-height: 28px; padding: 2px 12px; background: transparent; color: var(--gray-1100); transition: background-color 120ms ease, color 120ms ease; }
.mr-group button { background: var(--gray-200); box-shadow: 0 0 0 1px var(--gray-400); }
.mr-group button::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; vertical-align: 1px; }
.mr-group button[aria-pressed="true"] { background: var(--gray-1200); color: var(--gray-100); box-shadow: none; }
.mr-group button[aria-pressed="true"]::before { background: #fa5252; box-shadow: none; }
.mr-presets button.is-on { background: var(--gray-1200); color: var(--gray-100); }
.mr-switches button:active { transform: scale(0.97); }
.mr-switches button:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 2px; }
@media (hover: hover) { .mr-group button[aria-pressed="false"]:hover { color: var(--gray-1200); } }

@media (prefers-reduced-motion: reduce) {
  .mr-body, .mr-limb, .mr-tongue, .mr-bump { animation: none !important; }
}