/* Gold profile character: the character, its animations, and its editor. */

/* ---------- The drawing (also used by the editor's previews) ---------- */
.m-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* A faint light rim so dark characters still stand out on the dark theme. */
  filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.45));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .m-svg {
    filter: none;
  }
}
:root[data-theme='light'] .m-svg {
  filter: none;
}
.m-svg g {
  transform-box: view-box;
}
/* Exactly one mouth and one pair of eyes show at a time. Puffed cheeks only while chewing. */
.m-mouth--smile,
.m-mouth--open,
.m-mouth--chomp,
.m-mouth--oh,
.m-eyes--happy,
.m-eyes--squint,
.m-cheeks {
  display: none;
}
[data-mouth='smile'] .m-mouth--neutral,
[data-mouth='open'] .m-mouth--neutral,
[data-mouth='chomp'] .m-mouth--neutral,
[data-mouth='oh'] .m-mouth--neutral {
  display: none;
}
[data-mouth='smile'] .m-mouth--smile,
[data-mouth='open'] .m-mouth--open,
[data-mouth='chomp'] .m-mouth--chomp,
[data-mouth='oh'] .m-mouth--oh,
[data-mouth='chomp'] .m-cheeks {
  display: inline;
}
[data-eyes='happy'] .m-eyes--open,
[data-eyes='squint'] .m-eyes--open {
  display: none;
}
[data-eyes='happy'] .m-eyes--happy,
[data-eyes='squint'] .m-eyes--squint {
  display: inline;
}

/* ---------- The layer and the character box ---------- */
/* The arm angle is animatable so the arm, the hand slot and a carried tick turn together. */
@property --m-arm {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* Sits above the profile header's content, inside the page (below the top bar, sheets and toasts). */
.mascot-layer {
  --mascot-h: 72px;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  /* A faded-out bubble near the edge must not widen the page (phones then zoom out). */
  overflow-x: clip;
}
@media (max-width: 639.98px) {
  .mascot-layer {
    --mascot-h: 56px;
  }
}

.mascot {
  --m-arm: 0deg;
  --step: 0.5s;
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: block;
  width: calc(var(--mascot-h) * 5 / 6);
  height: var(--mascot-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.mascot.is-passive {
  pointer-events: none;
  cursor: default;
}
.mascot:focus {
  outline: none;
}
.mascot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mascot__rig,
.mascot__pop,
.mascot__bob,
.mascot__arm,
.mascot__fx {
  position: absolute;
  inset: 0;
  display: block;
}
.mascot__fx {
  pointer-events: none;
}

/* Facing: the drawing turns; the bubble and effects do not. */
.mascot__rig {
  transition: transform 180ms var(--ease);
}
.mascot.is-left .mascot__rig {
  transform: scaleX(-1);
}

.mascot__pop {
  transform-origin: 50% 98%;
}
.mascot.is-entering .mascot__pop {
  animation: m-pop 560ms var(--ease-spring) both;
}

/* The body wrapper: breathing, walking bob, jumps and squashes (feet stay as the pivot). */
.mascot__bob {
  transform-origin: 50% 98.3%;
  animation: m-breathe 3.2s ease-in-out infinite;
  transition: transform 280ms var(--ease);
}

/* Ground shadow (the drawing's own shadow is hidden so this one can stay on the floor). */
.mascot .m-shadow {
  display: none;
}
.mascot__shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -3.2%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0));
  transition: transform 280ms var(--ease);
}

/* ---------- Parts of the drawing ---------- */
/* Pivots are viewBox units and match SHOULDER_R etc. in draw.js. */
.mascot .m-leg-l {
  transform-origin: 44px 95px;
  transition: transform 300ms var(--ease);
}
.mascot .m-leg-r {
  transform-origin: 56px 95px;
  transition: transform 300ms var(--ease);
}
.mascot .m-arm-l {
  transform-origin: 37.5px 66px;
  transition: transform 300ms var(--ease);
}
.mascot .m-arm-r {
  transform-origin: 62.5px 66px;
  transform: rotate(var(--m-arm));
  /* The arm, the hand slot and a held tick each ease their own turn with the same timing
     (animating the inherited angle itself restyled the whole drawing every frame). */
  transition: transform 320ms var(--ease);
}
.mascot .m-head {
  transform-origin: 50px 60px;
  transition: transform 300ms var(--ease);
}
.mascot .m-face {
  transition: transform 260ms var(--ease);
}
.mascot .m-eyes {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 70ms linear;
}
.mascot .m-tail {
  transform-origin: 42px 95px;
  animation: m-tail 2.6s ease-in-out infinite;
}
.mascot .m-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-glow 1.8s ease-in-out infinite;
}

/* The hand slot turns with the right arm; a carried tick inside it stays upright. */
.mascot__arm {
  transform-origin: var(--m-shoulder);
  transform: rotate(var(--m-arm));
  transition: transform 320ms var(--ease);
  pointer-events: none;
}
.mascot__held {
  position: absolute;
  left: var(--m-grip-x);
  top: var(--m-grip-y);
  display: block;
  width: calc(var(--mascot-h) * var(--m-held));
  height: calc(var(--mascot-h) * var(--m-held));
  translate: -50% -50%;
  transform: rotate(calc(var(--m-arm) * -1));
  transition: transform 320ms var(--ease);
}

/* ---------- Idle life ---------- */
.mascot.is-blink .m-eyes {
  transform: scaleY(0.1);
}
.mascot[data-look='l'] .m-face {
  transform: translateX(-2.6px);
}
.mascot[data-look='r'] .m-face {
  transform: translateX(2.4px);
}
.mascot[data-look='l'] .m-head {
  transform: rotate(-4deg);
}
.mascot[data-look='r'] .m-head {
  transform: rotate(4deg);
}

/* Sitting down for a rest: legs out, body lowered. */
.mascot.is-sit .mascot__bob {
  animation: none;
  transform: translateY(11%);
}
.mascot.is-sit .m-leg-l {
  transform: rotate(66deg);
}
.mascot.is-sit .m-leg-r {
  transform: rotate(-66deg);
}
.mascot.is-sit .m-arm-l {
  transform: rotate(-16deg);
}
.mascot.is-sit:not(.is-holding) .m-arm-r {
  transform: rotate(16deg);
}

.mascot.is-mini-wave .m-arm-r {
  animation: m-wave-mini 1.1s ease-in-out;
}
.mascot.is-mini-wave.is-holding .m-arm-l {
  animation: m-wave-mini-l 1.1s ease-in-out;
}

/* ---------- Walking ---------- */
.mascot.is-walking .mascot__bob {
  animation: m-step var(--step) linear infinite;
}
.mascot.is-walking .m-leg-l {
  animation: m-leg var(--step) ease-in-out infinite;
}
.mascot.is-walking .m-leg-r {
  animation: m-leg var(--step) ease-in-out infinite;
  animation-delay: calc(var(--step) / -2);
}
.mascot.is-walking .m-arm-l {
  animation: m-swing var(--step) ease-in-out infinite;
}
.mascot.is-walking .m-arm-r {
  animation: m-swing var(--step) ease-in-out infinite;
  animation-delay: calc(var(--step) / -2);
}

/* ---------- Picking up, carrying and putting down the tick ---------- */
.mascot.is-crouch {
  --m-arm: var(--m-arm-reach);
}
.mascot.is-holding {
  --m-arm: var(--m-arm-carry);
}
.mascot.is-holding.is-crouch {
  --m-arm: var(--m-arm-reach);
}
.mascot.is-crouch .mascot__bob {
  animation: none;
  transform: scale(var(--m-crouch-sx), var(--m-crouch-sy));
}
.mascot.is-crouch .m-head {
  transform: rotate(7deg) translateY(1px);
}
.mascot.is-crouch .m-arm-l {
  transform: rotate(22deg);
}
/* While holding the tick the right arm stays up, whatever else is going on. */
.mascot.is-holding .m-svg .m-arm-r {
  animation: none !important;
}
.mascot.is-proud .mascot__bob {
  animation: m-hop 1s var(--ease) both;
}
.mascot.is-proud .m-arm-l {
  transform: rotate(48deg);
}

/* ---------- Greetings ---------- */
.mascot.is-greeting[data-greet='wave'] .m-arm-r {
  animation: m-wave 2.1s ease-in-out both;
}
.mascot.is-greeting[data-greet='wave'].is-holding .m-arm-l {
  animation: m-wave-l 2.1s ease-in-out both;
}
.mascot.is-greeting[data-greet='wave'] .m-head {
  animation: m-tilt 2.1s ease-in-out both;
}

.mascot.is-greeting[data-greet='smile'] .mascot__bob {
  animation: m-hop 1.7s var(--ease) both;
}
.mascot.is-greeting[data-greet='smile'] .m-head {
  animation: m-tilt-r 1.7s ease-in-out both;
}

.mascot.is-greeting[data-greet='roar'] .mascot__bob {
  animation: m-roar 1.9s ease-out both;
}
.mascot.is-greeting[data-greet='roar'] .m-arm-l {
  animation: m-claw-l 1.9s ease-out both;
}
.mascot.is-greeting[data-greet='roar'] .m-arm-r {
  animation: m-claw-r 1.9s ease-out both;
}

.mascot.is-greeting[data-greet='jump'] .mascot__bob {
  animation: m-jump 1.5s linear both;
}
.mascot.is-greeting[data-greet='jump'] .mascot__shadow {
  animation: m-jump-shadow 1.5s linear both;
}
.mascot.is-greeting[data-greet='jump'] .m-arm-l {
  animation: m-cheer-l 1.5s ease-in-out both;
}
.mascot.is-greeting[data-greet='jump'] .m-arm-r {
  animation: m-cheer-r 1.5s ease-in-out both;
}
.mascot.is-greeting[data-greet='jump'] .m-leg-l {
  animation: m-tuck-l 1.5s ease-in-out both;
}
.mascot.is-greeting[data-greet='jump'] .m-leg-r {
  animation: m-tuck-r 1.5s ease-in-out both;
}

.mascot.is-greeting[data-greet='dance'] .mascot__bob {
  animation: m-dance 1.2s ease-in-out 2 both;
}
.mascot.is-greeting[data-greet='dance'] .m-arm-l {
  animation: m-dance-arm-l 0.6s ease-in-out 4 both;
}
.mascot.is-greeting[data-greet='dance'] .m-arm-r {
  animation: m-dance-arm-r 0.6s ease-in-out 4 both;
}
.mascot.is-greeting[data-greet='dance'] .m-leg-l {
  animation: m-kick-l 1.2s ease-in-out 2 both;
}
.mascot.is-greeting[data-greet='dance'] .m-leg-r {
  animation: m-kick-r 1.2s ease-in-out 2 both;
}
.mascot.is-greeting[data-greet='dance'] .m-head {
  animation: m-head-bop 0.6s ease-in-out 4 both;
}

.mascot.is-greeting[data-greet='heart'] .mascot__bob {
  animation: m-sway 2.2s ease-in-out both;
}
.mascot.is-greeting[data-greet='heart'] .m-arm-l {
  animation: m-hug-l 2.2s ease-in-out both;
}
.mascot.is-greeting[data-greet='heart'] .m-arm-r {
  animation: m-hug-r 2.2s ease-in-out both;
}
.mascot.is-greeting[data-greet='heart'] .m-head {
  animation: m-tilt-r 2.2s ease-in-out both;
}

.mascot.is-greeting[data-greet='namaste'] .mascot__bob {
  animation: m-bow 2s ease-in-out both;
}
.mascot.is-greeting[data-greet='namaste'] .m-arm-l {
  animation: m-palms-l 2s ease-in-out both;
}
.mascot.is-greeting[data-greet='namaste'] .m-arm-r {
  animation: m-palms-r 2s ease-in-out both;
}
.mascot.is-greeting[data-greet='namaste'] .m-head {
  animation: m-nod 2s ease-in-out both;
}

.mascot.is-greeting[data-greet='salute'] .mascot__bob {
  animation: m-stand-tall 1.9s ease-in-out both;
}
.mascot.is-greeting[data-greet='salute'] .m-arm-r {
  animation: m-salute 1.9s ease-in-out both;
}
.mascot.is-greeting[data-greet='salute'] .m-head {
  animation: m-tilt 1.9s ease-in-out both;
}
.mascot.is-greeting[data-greet='bow'] .mascot__bob {
  animation: m-deep-bow 2.1s ease-in-out both;
}
.mascot.is-greeting[data-greet='bow'] .m-head {
  animation: m-nod 2.1s ease-in-out both;
}

/* Holding the tick: the free (left) arm does the hand work instead. */
.mascot.is-greeting.is-holding[data-greet='salute'] .m-arm-l,
.mascot.is-greeting.is-holding[data-greet='namaste'] .m-arm-l {
  animation: m-wave-l 1.9s ease-in-out both;
}

/* ---------- Connected accounts: poses for two characters ---------- */
/* Holding hands: each reaches its inner hand towards the other. Both drawings are mirrored to face
   left, so on screen .m-arm-r is the left-hand arm and .m-arm-l the right-hand one. */
.mascot.pose-hands.partner-left {
  --m-arm: -50deg;
}
.mascot.pose-hands.partner-right .m-arm-l {
  transform: rotate(50deg);
}
/* Riding together: each rider is lifted onto their seat (--ride-lift, set by the engine), the
   bike's back layer sits behind them and its front layer (tank, engine) covers their legs. The two
   characters' layers share one stacking order for this. */
.mascot-layer--ride {
  z-index: auto;
}
.mascot-layer--ride .mascot {
  z-index: 5;
}
.mascot.pose-bike .mascot__rig {
  transform: scaleX(-1); /* both face the way the bike goes */
  translate: 0 var(--ride-lift, -24%);
}
/* Seated: legs forward onto the footpegs (the bike's front layer hides most of them). */
.mascot.pose-bike .m-leg-l {
  transform: rotate(-62deg);
}
.mascot.pose-bike .m-leg-r {
  transform: rotate(-48deg);
}
/* The rider holds the handlebars; the passenger holds on to the rider. */
.mascot.pose-bike.ride-front {
  --m-arm: -96deg;
}
.mascot.pose-bike.ride-front .m-arm-l {
  transform: rotate(-58deg);
}
.mascot.pose-bike.ride-back {
  --m-arm: -78deg;
}
.mascot.pose-bike.ride-back .m-arm-l {
  transform: rotate(-44deg);
}
.mascot.pose-bike .mascot__bob {
  animation: m-ride 0.9s ease-in-out infinite;
}
.mascot.pose-bike .mascot__shadow {
  opacity: 0;
}
.mascot-bike {
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 240 / 120;
  pointer-events: none;
}
.mascot-bike--back {
  z-index: 4;
}
.mascot-bike--front {
  z-index: 6;
  animation: m-rumble 0.18s linear infinite;
}
.mascot-bike svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mascot-bike__wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-wheel 0.8s linear infinite;
}
.mascot-bike__road {
  animation: m-road 0.6s linear infinite;
}
.mascot-bike__puff circle {
  fill: #9a96a0;
  opacity: 0;
  animation: m-puff 1.4s ease-out infinite;
}
.mascot-bike__puff circle + circle {
  animation-delay: 0.5s;
}
@keyframes m-ride {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2%);
  }
}
@keyframes m-wheel {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes m-road {
  to {
    stroke-dashoffset: 32;
  }
}
@keyframes m-rumble {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 0.4px;
  }
}
@keyframes m-puff {
  0% {
    opacity: 0.55;
    transform: translate(0, 0) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(14px, -6px) scale(1.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-bike__wheel,
  .mascot-bike__road,
  .mascot-bike__puff circle,
  .mascot-bike--front,
  .mascot.pose-bike .mascot__bob {
    animation: none;
  }
}

/* ---------- Speech bubble ---------- */
.mascot__bubble {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% - var(--mascot-h) * 0.1);
  display: block;
  width: max-content;
  max-width: 168px;
  padding: 6px 11px 7px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font: 700 13px/1.25 var(--font-ui);
  word-spacing: 0.08em;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  /* --bx / --by keep it inside the stage (set by the engine). */
  translate: calc(-50% + var(--bx, 0px)) var(--by, 0px);
  transform: scale(0.6);
  transform-origin: calc(50% - var(--bx, 0px)) 100%;
  transition:
    opacity 180ms var(--ease),
    transform 280ms var(--ease-spring);
}
.mascot__bubble.is-on {
  opacity: 1;
  transform: none;
}
.mascot__bubble-text {
  display: block;
}
.mascot__bubble::after {
  content: '';
  position: absolute;
  left: clamp(12px, calc(50% - var(--bx, 0px)), calc(100% - 12px));
  bottom: -5.5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 1px solid var(--line-2);
  border-width: 0 1px 1px 0;
  background: var(--surface);
  rotate: 45deg;
}
/* No room above the head: the bubble sits beside it instead. */
.mascot__bubble.is-side {
  left: 92%;
  bottom: auto;
  top: 4%;
  translate: 0 0;
  transform-origin: 0 50%;
}
.mascot__bubble.is-side::after {
  left: -0.5px;
  top: 50%;
  bottom: auto;
  margin: -5px 0 0 -5px;
  border-width: 0 0 1px 1px;
}
.mascot__bubble.is-side-l {
  left: auto;
  right: 92%;
  transform-origin: 100% 50%;
}
.mascot__bubble.is-side-l::after {
  left: auto;
  right: -5.5px;
  margin: -5px 0 0 0;
  border-width: 1px 1px 0 0;
}

/* ---------- Effects ---------- */
/* "ROAR!" burst beside the mouth (decorative, fixed text). */
.mascot__roar {
  position: absolute;
  z-index: 2;
  top: 2%;
  left: 86%;
  display: block;
  padding: 13px 12px 12px;
  font: 900 11px/1 var(--font-ui);
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  animation: m-roar-pop 1.7s var(--ease) both;
  /* Nudged back inside the stage near its edges (set by the engine). */
  translate: var(--rx, 0px) 0;
  /* Moves between sides at once, so the engine can measure where it lands (reduced motion would
     otherwise turn every change into a tiny transition). */
  transition: none;
}
.mascot__roar::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  clip-path: polygon(
    50% 0%,
    59% 12%,
    72% 5%,
    74% 20%,
    89% 19%,
    85% 33%,
    99% 39%,
    89% 50%,
    99% 61%,
    85% 67%,
    89% 81%,
    74% 80%,
    72% 95%,
    59% 88%,
    50% 100%,
    41% 88%,
    28% 95%,
    26% 80%,
    11% 81%,
    15% 67%,
    1% 61%,
    11% 50%,
    1% 39%,
    15% 33%,
    11% 19%,
    26% 20%,
    28% 5%,
    41% 12%
  );
}
.mascot.is-left .mascot__roar,
.mascot__roar.is-flip {
  left: auto;
  right: 86%;
}
/* Moved to the other side of the head, or above it, when it would cover the name or the speech
   bubble (set by the engine). */
.mascot.is-left .mascot__roar.is-flip {
  left: 86%;
  right: auto;
}
.mascot .mascot__roar.is-top {
  top: auto;
  bottom: 98%; /* just over the head, clear of a bubble beside it */
  left: 50%;
  right: auto;
  translate: calc(-50% + var(--rx, 0px)) 0;
}

.mascot__heart {
  position: absolute;
  top: 6%;
  left: 50%;
  display: block;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  color: #ff5c8a;
  opacity: 0;
  animation: m-heart 1.7s ease-out var(--delay, 0ms) forwards;
}
.mascot__heart.is-gold {
  color: var(--gold-2);
}
.mascot__heart svg,
.mascot__spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.mascot__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  color: var(--brand-1);
  animation: m-spark 0.9s ease-out var(--delay, 0ms) both;
}

/* ---------- The verified tick copy ---------- */
.mascot-tick {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  display: block;
  color: var(--blue);
  transform-origin: 0 0;
  pointer-events: none;
}
.mascot-tick.is-flying {
  z-index: 2;
}
.mascot-tick > svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.28));
}
.mascot__held > .mascot-tick {
  inset: 0;
  transform: none;
  transform-origin: 50% 50%;
}
.mascot.is-left .mascot__held > .mascot-tick {
  transform: scaleX(-1);
}
.mascot-tick.is-landed > svg {
  transform-origin: 50% 100%;
  animation: m-land 520ms var(--ease-spring);
}

/* ---------- Set free: copies to play with (play.js) ---------- */
/* A copy of a letter, word or count, drawn over the real one (which stays in the page, hidden).
   It holds the whole text with the other letters invisible, so its letter looks exactly the same.
   Decorative only: it never takes taps and can't be selected. */
.mascot-bit {
  position: absolute;
  z-index: 0;
  display: block;
  width: max-content;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.mascot-bit__ghost {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
::highlight(mascot-ghost) {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.mascot-ring {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}
/* In the air (or the front half of the hula hoop): over the character. */
.mascot-bit.is-up,
.mascot-ring.is-up,
.mascot-ring.is-front {
  z-index: 2;
}
.mascot-crumb {
  position: absolute;
  z-index: 2;
  display: block;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 1px;
  background: currentColor;
  pointer-events: none;
}
.mascot-spot {
  position: absolute;
  z-index: 3;
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* The slot on top of the head where it balances things. It does not turn with the drawing, so
   letters stay the right way round; --m-head-top comes from the design (draw.js landmarks). */
.mascot__carry {
  position: absolute;
  left: 50%;
  top: var(--m-head-top, 12%);
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mascot__carry > .mascot-bit {
  z-index: auto;
}
.mascot.is-left .mascot__carry {
  scale: -1 1;
}
.mascot.is-balance .mascot__carry {
  animation: m-balance 1.5s ease-in-out infinite;
}

/* ---------- Set free: poses ---------- */
/* Balancing something on its head, arms out. */
.mascot.is-lift {
  --m-arm: -118deg;
}
.mascot.is-lift .m-svg .m-arm-r,
.mascot.is-lift .m-svg .m-arm-l {
  animation: none !important;
}
.mascot.is-lift .m-arm-l {
  transform: rotate(118deg);
}
/* Winding up to throw (leans back, arms high), then the heave (forwards, arms down). */
.mascot.is-windup {
  --m-arm: -150deg;
}
.mascot.is-windup .mascot__bob {
  animation: none;
  transform: rotate(-9deg) scale(1.03, 0.94);
}
.mascot.is-windup .m-arm-l {
  transform: rotate(150deg);
}
.mascot.is-heave {
  --m-arm: -38deg;
}
.mascot.is-heave .mascot__bob {
  animation: m-heave 560ms var(--ease) both;
}
.mascot.is-heave .m-arm-l {
  transform: rotate(-38deg);
}
/* A kick: the front leg swings back, then right through. */
.mascot.is-kick-back {
  --m-arm: -58deg;
}
.mascot.is-kick-back .mascot__bob {
  animation: none;
  transform: rotate(-7deg);
}
.mascot.is-kick-back .m-leg-r {
  transform: rotate(34deg);
}
.mascot.is-kick-back .m-arm-l {
  transform: rotate(46deg);
}
.mascot.is-kick {
  --m-arm: 34deg;
}
.mascot.is-kick .mascot__bob {
  animation: none;
  transform: rotate(6deg) translateY(-3%);
  transition-duration: 120ms;
}
.mascot.is-kick .m-leg-r {
  transform: rotate(-72deg);
  transition: transform 110ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.mascot.is-kick .m-arm-l {
  transform: rotate(-52deg);
}
/* Holding something out in front, then chewing (cheeks puffed), then spitting it out. */
.mascot.is-offer {
  --m-arm: -66deg;
}
.mascot.is-offer .m-arm-l {
  transform: rotate(-58deg);
}
.mascot.is-chew .m-head {
  animation: m-chew 0.34s ease-in-out infinite;
}
.mascot.is-chew .m-arm-l {
  transform: rotate(-24deg);
}
.mascot.is-spit .m-head {
  animation: m-spit 0.5s var(--ease) both;
}
.mascot.is-spit .mascot__bob {
  animation: m-heave 520ms var(--ease) both;
}
/* Leaning in to take a bite. */
.mascot.is-nibble .mascot__bob {
  animation: none;
  transform: rotate(8deg);
}
.mascot.is-nibble .m-head {
  transform: rotate(9deg) translateY(1.5px);
}
.mascot.is-nibble.is-chew .m-head {
  animation: m-chew-lean 0.3s ease-in-out infinite;
}
/* Jumping onto something with a thump. */
.mascot.is-stomp .mascot__bob {
  animation: m-jump 1s linear both;
}
.mascot.is-stomp .mascot__shadow {
  animation: m-jump-shadow 1s linear both;
}
.mascot.is-stomp .m-arm-l {
  animation: m-cheer-l 1s ease-in-out both;
}
.mascot.is-stomp .m-arm-r {
  animation: m-cheer-r 1s ease-in-out both;
}
/* Pleased with itself: a giggly wiggle, hands to its tummy. */
.mascot.is-giggle .mascot__bob {
  animation: m-giggle 0.42s ease-in-out 4;
}
.mascot.is-giggle {
  --m-arm: 22deg;
}
.mascot.is-giggle .m-arm-l {
  transform: rotate(-22deg);
}
/* Both arms up and a hop. */
.mascot.is-cheer {
  --m-arm: -150deg;
}
.mascot.is-cheer .m-arm-l {
  transform: rotate(150deg);
}
.mascot.is-cheer .mascot__bob {
  animation: m-hop 1s var(--ease) both;
}
.mascot.is-clap .m-arm-l {
  animation: m-clap-l 0.32s ease-in-out infinite;
}
.mascot.is-clap .m-arm-r {
  animation: m-clap-r 0.32s ease-in-out infinite;
}
/* Tug of war: leaning right back, arms out in front, legs braced. */
.mascot.is-tug {
  --m-arm: -76deg;
}
.mascot.is-tug .mascot__bob {
  animation: m-tug 0.3s ease-in-out infinite;
}
.mascot.is-tug .m-arm-l {
  transform: rotate(-68deg);
}
.mascot.is-tug .m-leg-r {
  transform: rotate(-20deg);
}
.mascot.is-tug .m-leg-l {
  transform: rotate(16deg);
}
.mascot.is-hula .mascot__bob {
  animation: m-hula 0.46s ease-in-out infinite;
}
/* Throwing the tick up (the arm flicks) and watching it. */
.mascot.is-toss {
  animation: m-toss 0.42s var(--ease);
}
.mascot.is-look-up .m-head {
  transform: rotate(-8deg);
}
.mascot.is-look-up .m-face {
  transform: translate(1px, -2px);
}
.mascot.is-header .m-head {
  animation: m-header 0.34s var(--ease);
}
.mascot.is-header .mascot__bob {
  animation: m-header-bob 0.34s var(--ease);
}
.mascot.is-twist {
  --m-arm: -30deg;
  transition-duration: 140ms;
}
/* Running after the hoop. */
.mascot.is-run .mascot__bob {
  rotate: 6deg;
}
/* Caught out: a sheepish scratch of the head. */
.mascot.is-oops {
  --m-arm: -160deg;
}
.mascot.is-oops .mascot__bob {
  animation: m-oops 0.6s var(--ease) both;
}
.mascot.is-oops .m-head {
  transform: rotate(-6deg);
}

/* ---------- Paused (off-screen or hidden tab) ---------- */
.mascot-layer.is-paused * {
  animation-play-state: paused !important;
}

/* ---------- Reduced motion: a still greeting pose ---------- */
.mascot.is-still .mascot__bob,
.mascot.is-still .mascot__pop,
.mascot.is-still .m-svg *,
.mascot.is-still .mascot__roar {
  animation: none !important;
}
.mascot.is-still .mascot__heart {
  animation: none;
  opacity: 0.9;
  transform: translate(var(--dx), var(--y)) scale(var(--s)) rotate(var(--rot));
}
.mascot.is-still[data-greet='wave']:not(.is-holding) .m-arm-r,
.mascot.is-still[data-greet='dance']:not(.is-holding) .m-arm-r {
  transform: rotate(-112deg);
}
.mascot.is-still[data-greet='wave'].is-holding .m-arm-l,
.mascot.is-still[data-greet='dance'] .m-arm-l {
  transform: rotate(112deg);
}
.mascot.is-still[data-greet='salute']:not(.is-holding) .m-arm-r {
  transform: rotate(-142deg);
}
.mascot.is-still[data-greet='jump'] .m-arm-l {
  transform: rotate(132deg);
}
.mascot.is-still[data-greet='jump']:not(.is-holding) .m-arm-r {
  transform: rotate(-132deg);
}
.mascot.is-still[data-greet='roar'] .m-arm-l {
  transform: rotate(96deg);
}
.mascot.is-still[data-greet='roar']:not(.is-holding) .m-arm-r {
  transform: rotate(-96deg);
}
.mascot.is-still[data-greet='heart'] .m-arm-l {
  transform: rotate(-36deg);
}
.mascot.is-still[data-greet='heart']:not(.is-holding) .m-arm-r {
  transform: rotate(36deg);
}
.mascot.is-still[data-greet='namaste'] .m-arm-l {
  transform: rotate(-60deg);
}
.mascot.is-still[data-greet='namaste']:not(.is-holding) .m-arm-r {
  transform: rotate(60deg);
}

/* ---------- Keyframes ---------- */
@keyframes m-pop {
  0% {
    opacity: 0;
    transform: translateY(8%) scale(0.2);
  }
  55% {
    opacity: 1;
    transform: translateY(-4%) scale(1.08, 1.1);
  }
  78% {
    transform: scale(1.04, 0.95);
  }
  100% {
    transform: none;
  }
}
@keyframes m-breathe {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale(0.99, 1.022);
  }
}
@keyframes m-tail {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes m-glow {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}
@keyframes m-step {
  0%,
  50%,
  100% {
    transform: rotate(2.5deg);
  }
  25%,
  75% {
    transform: translateY(-3.5%) rotate(2.5deg);
  }
}
@keyframes m-leg {
  0%,
  100% {
    transform: rotate(8deg);
  }
  25% {
    transform: translateY(-1.6px) rotate(-18deg);
  }
  50% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(12deg);
  }
}
@keyframes m-swing {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(14deg);
  }
}
@keyframes m-wave-mini {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-114deg);
  }
  45% {
    transform: rotate(-98deg);
  }
  65% {
    transform: rotate(-116deg);
  }
  82% {
    transform: rotate(-100deg);
  }
}
@keyframes m-wave-mini-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(114deg);
  }
  45% {
    transform: rotate(98deg);
  }
  65% {
    transform: rotate(116deg);
  }
  82% {
    transform: rotate(100deg);
  }
}
@keyframes m-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(-118deg);
  }
  24% {
    transform: rotate(-96deg);
  }
  36% {
    transform: rotate(-120deg);
  }
  48% {
    transform: rotate(-96deg);
  }
  60% {
    transform: rotate(-120deg);
  }
  72% {
    transform: rotate(-98deg);
  }
  86% {
    transform: rotate(-112deg);
  }
}
@keyframes m-wave-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(118deg);
  }
  24% {
    transform: rotate(96deg);
  }
  36% {
    transform: rotate(120deg);
  }
  48% {
    transform: rotate(96deg);
  }
  60% {
    transform: rotate(120deg);
  }
  72% {
    transform: rotate(98deg);
  }
  86% {
    transform: rotate(112deg);
  }
}
@keyframes m-tilt {
  0%,
  100% {
    transform: none;
  }
  15%,
  85% {
    transform: rotate(-5deg);
  }
}
@keyframes m-tilt-r {
  0%,
  100% {
    transform: none;
  }
  18%,
  82% {
    transform: rotate(7deg);
  }
}
@keyframes m-hop {
  0%,
  100% {
    transform: none;
  }
  12% {
    transform: scale(1.06, 0.92);
  }
  24% {
    transform: translateY(-12%) scale(0.97, 1.04);
  }
  36% {
    transform: scale(1.06, 0.93);
  }
  48% {
    transform: translateY(-9%) scale(0.98, 1.03);
  }
  60% {
    transform: scale(1.04, 0.96);
  }
  72% {
    transform: none;
  }
}
@keyframes m-roar {
  0%,
  100% {
    transform: none;
  }
  14% {
    transform: rotate(-6deg) scale(1.02, 0.97);
  }
  26% {
    transform: translateX(5%) rotate(8deg) scale(1.06);
  }
  32%,
  44%,
  56%,
  68% {
    transform: translateX(6.5%) rotate(8deg) scale(1.06);
  }
  38%,
  50%,
  62%,
  74% {
    transform: translateX(3.5%) rotate(7deg) scale(1.06);
  }
  86% {
    transform: translateX(2%) rotate(3deg);
  }
}
@keyframes m-claw-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  80% {
    transform: rotate(96deg);
  }
}
@keyframes m-claw-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  80% {
    transform: rotate(-96deg);
  }
}
@keyframes m-jump {
  0%,
  100% {
    transform: none;
    animation-timing-function: ease-out;
  }
  16% {
    transform: scale(1.14, 0.8);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  46% {
    transform: translateY(-48%) scale(0.95, 1.06);
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
  }
  66% {
    transform: scale(0.94, 1.06);
  }
  74% {
    transform: scale(1.16, 0.8);
  }
  86% {
    transform: scale(0.97, 1.04);
  }
}
@keyframes m-jump-shadow {
  0%,
  16%,
  66%,
  100% {
    transform: none;
    opacity: 1;
  }
  46% {
    transform: scale(0.55);
    opacity: 0.45;
  }
}
@keyframes m-cheer-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  16% {
    transform: rotate(-12deg);
  }
  36%,
  62% {
    transform: rotate(138deg);
  }
  80% {
    transform: rotate(20deg);
  }
}
@keyframes m-cheer-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  16% {
    transform: rotate(12deg);
  }
  36%,
  62% {
    transform: rotate(-138deg);
  }
  80% {
    transform: rotate(-20deg);
  }
}
@keyframes m-tuck-l {
  0%,
  20%,
  70%,
  100% {
    transform: none;
  }
  46% {
    transform: rotate(18deg);
  }
}
@keyframes m-tuck-r {
  0%,
  20%,
  70%,
  100% {
    transform: none;
  }
  46% {
    transform: rotate(-18deg);
  }
}
@keyframes m-dance {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-7%) rotate(-8deg);
  }
  37% {
    transform: translateY(-5%);
  }
  50% {
    transform: none;
  }
  75% {
    transform: translateX(7%) rotate(8deg);
  }
  87% {
    transform: translateY(-5%);
  }
}
@keyframes m-dance-arm-l {
  0%,
  100% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(128deg);
  }
}
@keyframes m-dance-arm-r {
  0%,
  100% {
    transform: rotate(-128deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes m-kick-l {
  0%,
  50%,
  100% {
    transform: none;
  }
  25% {
    transform: rotate(28deg);
  }
}
@keyframes m-kick-r {
  0%,
  50%,
  100% {
    transform: none;
  }
  75% {
    transform: rotate(-28deg);
  }
}
@keyframes m-head-bop {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
@keyframes m-sway {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(3deg) translateY(-2%);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes m-hug-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  16%,
  84% {
    transform: rotate(-38deg);
  }
}
@keyframes m-hug-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  16%,
  84% {
    transform: rotate(38deg);
  }
}
/* A real bow: the whole body leans forward from the feet, holds, and comes back up. */
@keyframes m-deep-bow {
  0%,
  100% {
    transform: none;
  }
  30%,
  65% {
    transform: rotate(16deg) scale(1, 0.97);
  }
}
@keyframes m-bow {
  0%,
  100% {
    transform: none;
  }
  30%,
  70% {
    transform: scale(1.02, 0.95);
  }
}
@keyframes m-palms-l {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  82% {
    transform: rotate(-60deg);
  }
}
@keyframes m-palms-r {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20%,
  82% {
    transform: rotate(60deg);
  }
}
@keyframes m-nod {
  0%,
  20%,
  85%,
  100% {
    transform: none;
  }
  40%,
  65% {
    transform: translateY(3px) scale(1, 0.97);
  }
}
@keyframes m-stand-tall {
  0%,
  100% {
    transform: none;
  }
  12%,
  80% {
    transform: scale(0.98, 1.03);
  }
}
@keyframes m-salute {
  0%,
  100% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(-150deg);
  }
  18%,
  80% {
    transform: rotate(-142deg);
  }
}
@keyframes m-roar-pop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-20deg);
  }
  18% {
    opacity: 1;
    transform: scale(1.15) rotate(6deg);
  }
  26%,
  42%,
  58% {
    transform: scale(1) rotate(-4deg);
  }
  34%,
  50%,
  66% {
    transform: scale(1.04) rotate(4deg);
  }
  82% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9) translateY(-6px);
  }
}
@keyframes m-heart {
  0% {
    opacity: 0;
    transform: translate(0, 10px) scale(0.3);
  }
  18% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.35), -6px) scale(var(--s)) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), -48px) scale(var(--s)) rotate(var(--rot));
  }
}
@keyframes m-spark {
  0% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-4px) scale(0.2);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-22px) scale(1);
  }
}
@keyframes m-land {
  0% {
    transform: translateY(-6px) scale(1.12);
  }
  45% {
    transform: scale(1.18, 0.8);
  }
  75% {
    transform: scale(0.95, 1.06);
  }
  100% {
    transform: none;
  }
}
/* Set free */
@keyframes m-balance {
  0%,
  100% {
    rotate: -5deg;
  }
  50% {
    rotate: 6deg;
  }
}
@keyframes m-heave {
  0% {
    transform: rotate(-9deg) scale(1.03, 0.94);
  }
  30% {
    transform: rotate(9deg) translateY(-6%) scale(0.97, 1.05);
  }
  70% {
    transform: rotate(5deg);
  }
  100% {
    transform: none;
  }
}
@keyframes m-chew {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(1.6px) scale(1.03, 0.96);
  }
}
@keyframes m-chew-lean {
  0%,
  100% {
    transform: rotate(9deg) translateY(1.5px);
  }
  50% {
    transform: rotate(12deg) translateY(3px) scale(1.03, 0.96);
  }
}
@keyframes m-spit {
  0% {
    transform: none;
  }
  35% {
    transform: rotate(-10deg) translateY(-1px);
  }
  60% {
    transform: rotate(8deg) scale(1.04);
  }
  100% {
    transform: none;
  }
}
@keyframes m-giggle {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: rotate(-4deg) translateY(-3%);
  }
  75% {
    transform: rotate(4deg) translateY(-3%);
  }
}
@keyframes m-clap-l {
  0%,
  100% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(-78deg);
  }
}
@keyframes m-clap-r {
  0%,
  100% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(-78deg);
  }
}
@keyframes m-tug {
  0%,
  100% {
    transform: rotate(-12deg) translateX(-3%);
  }
  50% {
    transform: rotate(-16deg) translateX(-5.5%) scale(1.02, 0.98);
  }
}
@keyframes m-hula {
  0%,
  100% {
    transform: translateX(-4%) rotate(-3deg);
  }
  50% {
    transform: translateX(4%) rotate(3deg);
  }
}
@keyframes m-toss {
  0% {
    --m-arm: -112deg;
  }
  35% {
    --m-arm: -82deg;
  }
  70% {
    --m-arm: -142deg;
  }
  100% {
    --m-arm: -112deg;
  }
}
@keyframes m-header {
  0%,
  100% {
    transform: none;
  }
  40% {
    transform: rotate(-12deg) translateY(-2px);
  }
}
@keyframes m-header-bob {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: scale(1.05, 0.92);
  }
  60% {
    transform: translateY(-5%) scale(0.98, 1.03);
  }
}
@keyframes m-oops {
  0%,
  100% {
    transform: none;
  }
  30% {
    transform: scale(1.05, 0.9);
  }
  60% {
    transform: translateY(-4%) rotate(-3deg);
  }
}

/* Printing or saving as PDF shows the plain profile, without the character or its toys. */
@media print {
  .mascot-layer {
    display: none !important;
  }
}