/* The big start coin answers taps (medallion-taps.js; Chris, 24 Oct). What moves is what the portrait already has: the picture inside the
   rim (never the rim), the eyes, the iris, the symbol before the face and the hand that waits below the rim. --tx / --ty are the
   finger's place on the coin, -1 to 1. */
.mt-coin { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mt-coin:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mt-coin .ml-hand { transform-box: fill-box; transform-origin: 50% 100%; transform: translate(0, 22px); }
.mt-coin .ml-surge { fill: none; stroke: #fff6e0; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.28 1; stroke-dashoffset: 1.28; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mt-coin .o-eyes { transform-box: fill-box; transform-origin: 50% 55%; }
  .mt-coin svg.o-portrait > g[clip-path] { transform-box: view-box; transform-origin: 50% 60%; }

  .mt-coin.mt-nod svg.o-portrait > g[clip-path] { animation: mt-nod 0.8s ease-in-out; }
  .mt-coin.mt-bow svg.o-portrait > g[clip-path] { animation: mt-bow 1.1s ease-in-out; }
  .mt-coin.mt-tilt svg.o-portrait > g[clip-path] { animation: mt-tilt 1.3s ease-in-out; }
  .mt-coin.mt-lean svg.o-portrait > g[clip-path] { animation: mt-lean 1.1s ease-in-out; }
  .mt-coin.mt-look svg.o-portrait > g[clip-path] { animation: mt-look-head 1.5s ease-in-out; }
  .mt-coin.mt-look .v-iris { animation: mt-look-eye 1.5s ease-in-out; }
  .mt-coin.mt-wink .o-eyes { animation: mt-wink 0.8s ease-in-out; }
  .mt-coin.mt-wink svg.o-portrait > g[clip-path] { animation: mt-wink-head 0.8s ease-in-out; }
  .mt-coin.mt-startle svg.o-portrait > g[clip-path] { animation: mt-startle 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); }
  .mt-coin.mt-startle .o-eyes { animation: mt-wide 0.7s ease-out; }
  .mt-coin.mt-shake svg.o-portrait > g[clip-path] { animation: mt-shake 0.8s ease-in-out; }
  .mt-coin.mt-laugh svg.o-portrait > g[clip-path] { animation: mt-laugh 1.2s ease-in-out; }
  .mt-coin.mt-laugh .o-eyes { animation: mt-squint 1.2s ease-in-out; }
  .mt-coin.mt-shrug svg.o-portrait > g[clip-path] { animation: mt-shrug 1.1s ease-in-out; }
  .mt-coin.mt-spark .ml-surge { animation: ml-surge 0.9s ease-out; }
  .mt-coin.mt-spark .v-field { animation: ml-spark-flare 1s ease-out; }
  .mt-coin.mt-wave .ml-hand { animation: ml-wave 1.7s ease-in-out; }
  .mt-coin.mt-wave svg.o-portrait > g[clip-path] { animation: mt-wave-head 1.7s ease-in-out; }
}

@keyframes mt-nod { 0%, 100% { transform: none; } 22% { transform: translateY(3px); } 44% { transform: none; } 66% { transform: translateY(2px); } }
@keyframes mt-bow { 0%, 100% { transform: none; } 35%, 60% { transform: translateY(5px) rotate(4deg); } }
@keyframes mt-tilt { 0%, 100% { transform: none; } 30%, 55% { transform: rotate(calc(var(--tx, 0) * 6deg - 3deg)); } 78% { transform: rotate(calc(var(--tx, 0) * -2deg)); } }
@keyframes mt-lean { 0%, 100% { transform: none; } 35%, 65% { transform: translate(2px, 0) scale(1.07); } }
@keyframes mt-look-head { 0%, 100% { transform: none; } 25%, 70% { transform: translate(calc(var(--tx, 0) * 1.6px), calc(var(--ty, 0) * 1.2px)); } }
/* The iris is drawn in the mirrored head, so a step to the finger's side is the other way in its own units. */
@keyframes mt-look-eye { 0%, 100% { transform: none; } 25%, 70% { transform: translate(calc(var(--tx, 0) * -0.18px), calc(var(--ty, 0) * 0.1px)); } }
@keyframes mt-wink { 0%, 100% { transform: none; } 25%, 65% { transform: scaleY(0.08); } }
@keyframes mt-wink-head { 0%, 100% { transform: none; } 25%, 65% { transform: rotate(-2deg) translateY(1px); } }
@keyframes mt-startle { 0% { transform: none; } 18% { transform: translateY(-3px) scale(1.09); } 100% { transform: none; } }
@keyframes mt-wide { 0%, 100% { transform: none; } 18%, 55% { transform: scaleY(1.3); } }
@keyframes mt-shake { 0%, 100% { transform: none; } 15% { transform: rotate(-4deg); } 35% { transform: rotate(4deg); } 55% { transform: rotate(-3deg); } 75% { transform: rotate(2deg); } }
@keyframes mt-laugh {
  0%, 100% { transform: none; }
  10% { transform: translateY(-2px); } 20% { transform: none; } 30% { transform: translateY(-2px) rotate(-2deg); }
  40% { transform: none; } 50% { transform: translateY(-2px) rotate(2deg); } 60% { transform: none; } 70% { transform: translateY(-1px); }
}
@keyframes mt-squint { 0%, 100% { transform: none; } 8%, 75% { transform: scaleY(0.35); } }
@keyframes mt-shrug { 0%, 100% { transform: none; } 30%, 60% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes mt-wave-head { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(2deg); } }