/* Small articulated keepsakes: painted volume, raised fronts and paper hinges. */
.mc-person { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.mc-person > svg { width: 100%; height: 100%; display: block; overflow: visible; transform: translateZ(3px); }
.mc-contact-shadow { position: absolute; bottom: 1%; left: 24%; width: 53%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse,#3e392956,transparent 73%); transform: translateZ(-3px); }
.mc-actor { transform-origin: 90px 234px; }
.mc-head { transform-origin: 91px 108px; }
.mc-eyes { transform-origin: 91px 71px; }
.mc-mouth { transform-origin: 92px 98px; }
.mc-arm, .mc-leg { transform-origin: var(--joint-x) var(--joint-y); }
.mc-piece .pop-front { filter: drop-shadow(1px 3px 1px #473c3428); }
.mc-piece .pop-wall { display: none; }
.mc-piece .pop-tab { width: 25%; left: 37.5%; height: 8px; bottom: -8px; background: #a9997799; }
.mc-run .mc-leg-back { transform: rotate(-29deg); }
.mc-run .mc-leg-front { transform: rotate(24deg); }
.mc-run .mc-arm-front { transform: rotate(-47deg); }
.mc-run .mc-arm-back { transform: rotate(39deg); }
.mc-run .mc-actor { transform: rotate(8deg); }
.mc-run .mc-head { transform: rotate(-5deg); }
.mc-running-drift, .mc-walking-journey { width: 100%; height: 100%; transform-style: preserve-3d; }
.mc-track { height: 71px; border-radius: 45%; }
.mc-speed { opacity: .7; }
.mc-speed .pop-tab, .mc-cone .pop-tab, .mc-strike-spark .pop-tab, .mc-bowling-ball .pop-tab { display: none; }
.is-up .mc-running-drift { animation: mc-run-drift 5.6s ease-in-out 1s both; }
.is-up .mc-run .mc-actor { animation: mc-run-bounce .56s ease-in-out 1s 10; }
.is-up .mc-run .mc-leg-front { animation: mc-run-leg .56s ease-in-out 1s 10; }
.is-up .mc-run .mc-leg-back { animation: mc-run-leg-back .56s ease-in-out 1s 10; }
.is-up .mc-run .mc-arm-front { animation: mc-run-arm .56s ease-in-out 1s 10; }
.is-up .mc-run .mc-arm-back { animation: mc-run-arm-back .56s ease-in-out 1s 10; }
.is-up .mc-speed { animation: mc-speed-lines 1.12s ease-out 1s 5; }
@keyframes mc-run-bounce { 0%,100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes mc-run-leg { 0%,100% { transform: rotate(27deg); } 50% { transform: rotate(-34deg); } }
@keyframes mc-run-leg-back { 0%,100% { transform: rotate(-34deg); } 50% { transform: rotate(27deg); } }
@keyframes mc-run-arm { 0%,100% { transform: rotate(-40deg); } 50% { transform: rotate(36deg); } }
@keyframes mc-run-arm-back { 0%,100% { transform: rotate(36deg); } 50% { transform: rotate(-40deg); } }
@keyframes mc-run-drift { 0% { transform: translateX(-9px); } 75%,100% { transform: translateX(28px); } }
@keyframes mc-speed-lines { 0%,100% { opacity: .2; } 45% { opacity: .9; } }

/* The whole lane reads from left to right: release, travel, then impact. */
.mc-horizontal-lane {
  left: 12px; bottom: -23px; width: 299px; height: 74px; border-radius: 5px;
  border: 4px solid #716754;
  background: repeating-linear-gradient(0deg,#d6bb89 0 11px,#f0d6a4 11px 12px,#b89968 12px 13px);
  box-shadow: inset 0 6px 3px #51432955,inset 0 -6px 3px #51432955,0 4px #b2a082,0 7px #e6d8b9,5px 11px 12px #51442e35;
}
.mc-lane-line { position: absolute; left: 88px; height: 100%; width: 3px; background: #6b6150; opacity: .7; }
.mc-horizontal-lane > i { position: absolute; width: 7px; height: 5px; left: 63%; top: 45%; background: #90744c; clip-path: polygon(0 0,100% 50%,0 100%); }
.mc-horizontal-lane > i:nth-of-type(2) { top: 24%; left: 60%; }
.mc-horizontal-lane > i:nth-of-type(3) { top: 68%; left: 60%; }
.mc-bowl .mc-actor { transform: rotate(9deg); }
.mc-bowl .mc-head { transform: rotate(-6deg); }
.mc-bowl .mc-leg-back { transform: rotate(-25deg); }
.mc-bowl .mc-arm-front { transform: rotate(-55deg); }
.mc-bowl .mc-arm-back { transform: rotate(23deg); }
.mc-pin-motion { width: 100%; height: 100%; transform-origin: center bottom; }
.mc-ball-roll { height: 100%; width: 100%; transform: translateX(8px); transform-style: preserve-3d; }
.mc-ball {
  position: relative; height: 100%; width: 100%; border-radius: 50%;
  background: radial-gradient(circle at 29% 25%,#d5e0cd 0 2%,#8bab94 9%,#4d7567 29%,#294b40 62%,#162f29 94%);
  box-shadow: inset -2px -3px 4px #152b2566,2px 4px 3px #52452c42;
}
.mc-ball i { position: absolute; top: 24%; left: 47%; width: 3px; height: 4px; border-radius: 50%; background: #102920; box-shadow: 0 1px #7b9b80; }
.mc-ball i:nth-child(2) { top: 31%; left: 65%; }
.mc-ball i:nth-child(3) { top: 49%; left: 51%; width: 4px; }
.mc-strike-spark { opacity: 0; }
.is-up .mc-bowl .mc-arm-front { animation: mc-bowl-release 2s ease-in-out .6s both; }
.is-up .mc-bowl .mc-actor { animation: mc-bowl-lean 2s ease-in-out .6s both; }
.is-up .mc-ball-roll { animation: mc-lane-roll 2.1s cubic-bezier(.18,.25,.7,1) 1.1s both; }
.is-up .mc-ball { animation: mc-ball-spin 2.1s linear 1.1s both; }
.is-up .mc-pin-motion { animation: mc-pin-scatter .8s cubic-bezier(.22,.7,.34,1) var(--pin-hit) both; }
.is-up .mc-strike-spark { animation: mc-strike .6s ease-out 2.8s both; }
@keyframes mc-bowl-release { 0%,12% { transform: rotate(31deg); } 65% { transform: rotate(-64deg); } 100% { transform: rotate(-48deg); } }
@keyframes mc-bowl-lean { 0% { transform: rotate(0); } 65%,100% { transform: rotate(11deg); } }
@keyframes mc-lane-roll { 0%,8% { transform: translateX(0); } 82% { transform: translateX(156px); } 100% { transform: translateX(177px); } }
@keyframes mc-ball-spin { from { transform: rotate(0); } to { transform: rotate(630deg); } }
@keyframes mc-pin-scatter { 0% { transform: rotate(0); } 40% { transform: translate(var(--pin-drift),-5px) rotate(calc(var(--pin-turn) * .6)); } 75%,100% { transform: translate(calc(var(--pin-drift) * 1.4),5px) rotate(var(--pin-turn)); } }
@keyframes mc-strike { 0% { opacity: 0; } 25%,65% { opacity: 1; } 100% { opacity: 0; } }

.mc-welcome-ground { background: radial-gradient(ellipse at 72% 25%,#efdeb8,#c7cbaa 58%,#9eab86); height: 79px; }
.mc-welcome-ground > span { position: absolute; left: 5%; top: 35%; width: 88%; height: 27%; border-radius: 50%; background: #eddfbfbf; transform: rotate(-9deg); }
.mc-crowd-person { opacity: .86; }
.mc-crowd-person .pop-tab { display: none; }
.mc-walking-actor { position: relative; width: 100%; height: 100%; transform-origin: 52% 91%; }
.mc-walker .pop-front .mc-walking-clips { position: absolute; width: 0; height: 0; overflow: hidden; }
.mc-walking-picture, .mc-walking-art { display: block; width: 100%; height: 100%; }
.mc-walking-art { max-width: none; object-fit: fill; }
.mc-walker .pop-tab { display: none; }
.is-up .mc-walking-actor { animation: mc-walking-step 1.08s ease-in-out 1s 5; }
@keyframes mc-walking-step { 0%,100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(var(--mc-step-rise,-2px)) rotate(.7deg); } }
/* Enlarge the actual drawing surface before the viewer's 3-D transform, so the
   high-resolution actor and little crowd stay sharp when opened full screen. */
#sceneView .mc-walker .pop-front, #sceneView .mc-crowd-person .pop-front { inset: auto; left: 0; top: 0; width: 400%; height: 400%; transform: translateZ(5px) scale(.25); transform-origin: 0 0; }
#sceneView .mc-walker { --mc-walk-distance: 296px; --mc-walk-rest: 140px; --mc-step-rise: -8px; }
.mc-walk .mc-actor { transform: rotate(5deg); }
.mc-walk .mc-head { transform: rotate(-5deg); }
.mc-walk .mc-leg-back { transform: rotate(-15deg); }
.mc-walk .mc-leg-front { transform: rotate(17deg); }
.mc-walk .mc-arm-front { transform: rotate(-17deg); }
.mc-walk .mc-arm-back { transform: rotate(18deg); }
.is-up .mc-walking-journey { animation: mc-walk-path 5.4s ease-in-out 1s both; }
.is-up .mc-walk .mc-leg-front, .is-up .mc-walk .mc-arm-back { animation: mc-walk-limb .9s ease-in-out 1s 6; }
.is-up .mc-walk .mc-leg-back, .is-up .mc-walk .mc-arm-front { animation: mc-walk-limb-back .9s ease-in-out 1s 6; }
.is-up .mc-walk .mc-actor { animation: mc-walk-bounce .45s ease-in-out 1s 12; }
.is-up .mc-welcome-heart { animation: mc-heart-welcome 1.5s ease-in-out 4.7s 2; }
@keyframes mc-walk-path { from { transform: translateX(0); } to { transform: translateX(var(--mc-walk-distance,74px)); } }
@keyframes mc-walk-limb { 0%,100% { transform: rotate(-17deg); } 50% { transform: rotate(19deg); } }
@keyframes mc-walk-limb-back { 0%,100% { transform: rotate(19deg); } 50% { transform: rotate(-17deg); } }
@keyframes mc-walk-bounce { 0%,100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes mc-heart-welcome { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* The last leaf: a raised figure acknowledges the reader with a wave and a
   speaking smile. The message is live text and remains present in still mode. */
.mc-finale { position: relative; width: 100%; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.mc-speech {
  position: relative; z-index: 2; flex: 0 0 auto; padding: .55em 1.1em .6em;
  border: 1px solid #b8a786; border-radius: 46% 44% 43% 41% / 32% 41% 37% 46%;
  background: linear-gradient(150deg,#fffcf0,#f5e7c8); color: #64513c;
  font: 1.02em/1.65 var(--font-zh,serif); letter-spacing: .03em;
  box-shadow: 1px 3px 0 #d1be9966,0 5px 12px #88734a17; text-align: center;
}
.mc-speech::after { content: ''; position: absolute; left: 55%; bottom: -9px; width: 15px; height: 15px; border-right: 1px solid #b8a786; border-bottom: 1px solid #b8a786; background: #f6e9cd; transform: rotate(44deg) skew(10deg,10deg); }
.mc-finale-stage { position: relative; width: min(58%,calc(var(--ph,700px) * .27)); height: calc(var(--ph,700px) * .34); min-height: 75px; margin: 9px auto 0; perspective: 700px; transform-style: preserve-3d; }
.mc-finale-stage .mc-person { position: relative; z-index: 1; transform: rotateY(-8deg) translateZ(15px); }
.mc-finale-stage .mc-person > svg { filter: drop-shadow(3px 7px 3px #81674c26); }
.mc-finale-halo { position: absolute; width: 160%; height: 94%; left: -30%; top: 0; border-radius: 50%; background: radial-gradient(ellipse,#fff6d2bb,#edd8a33b 55%,transparent 72%); }
.mc-finale-plinth { position: absolute; left: 15%; bottom: 0; width: 73%; height: 8%; border-radius: 50%; background: linear-gradient(0deg,#b7a57e,#e1d3b0 40%,#f3e6c7); box-shadow: 0 3px #b6a17b,1px 5px 8px #8a70402b; transform: rotateX(25deg) translateZ(-3px); }
.mc-talk .mc-arm-front { transform: rotate(14deg); }
.mc-talk .mc-arm-back { transform: rotate(-19deg); }
.face[aria-hidden="false"] .mc-finale .mc-actor { animation: mc-thank-bow 5.8s ease-in-out .5s both; }
.face[aria-hidden="false"] .mc-finale .mc-head { animation: mc-talk-head 4.8s ease-in-out .7s both; }
.face[aria-hidden="false"] .mc-finale .mc-arm-back { animation: mc-wave 3s ease-in-out .8s both; }
.face[aria-hidden="false"] .mc-finale .mc-mouth { animation: mc-speaking .55s ease-in-out 1s 9; }
.face[aria-hidden="false"] .mc-finale .mc-eyes { animation: mc-blink 4s ease-in-out 1s 2; }
@keyframes mc-thank-bow { 0%,32%,100% { transform: translateY(0) rotate(0); } 46%,64% { transform: translateY(3px) rotate(4deg); } }
@keyframes mc-talk-head { 0%,100% { transform: rotate(0); } 27% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
@keyframes mc-wave { 0%,100% { transform: rotate(-19deg); } 23%,43%,63% { transform: rotate(-105deg); } 33%,53%,73% { transform: rotate(-82deg); } }
@keyframes mc-speaking { 0%,100% { transform: scaleY(.75); } 35% { transform: scaleY(1.3); } 70% { transform: scaleY(.85); } }
@keyframes mc-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.13); } }
@media (max-height: 559px) {
  .mc-finale { width: 46%; flex-direction: row-reverse; flex: 0 1 auto; align-items: center; }
  .mc-finale-stage { width: 56%; height: calc(var(--ph,350px) * .54); margin: 0; flex-shrink: 0; }
  .mc-speech { font-size: .73em; padding: .7em .7em; margin-left: -9%; }
  .mc-speech::after { left: -5px; top: 65%; bottom: auto; width: 10px; height: 10px; transform: rotate(133deg); }
}
/* No off-page timelines, and every reduced-motion scene remains complete. */
.still .mc-person *, .still .mc-piece *, .still .mc-piece { animation: none !important; }
.still .mc-finale *, .still .mc-running-drift, .still .mc-walking-journey { animation: none !important; }
.still .mc-ball-roll { transform: translateX(107px); }
.still .mc-walking-journey { transform: translateX(var(--mc-walk-rest,35px)); }
@media (prefers-reduced-motion: reduce) {
  .mc-person *, .mc-piece *, .mc-piece, .mc-finale *, .mc-running-drift, .mc-walking-journey { animation: none !important; }
  .mc-ball-roll { transform: translateX(107px); }
  .mc-walking-journey { transform: translateX(var(--mc-walk-rest,35px)); }
}