/* Sparo, rigged (mockups/mascot-kit/tools/rig.py): his body, his eyeballs (<b>) and the bits that float free of him
   (<i>: wave lines, hearts, confetti, moon and z's, sparks, burst lines), cut from one parts sheet per pose. Every
   pose has its own act and none repeats another: the body keeps a mood, the eyes blink and glance on their own clock,
   the bits do what they are. Pointing at him gets a reaction of his own. Reduced motion stops it all (kit.css). */
.sparo { --idle: bob; --beat: 3.4s; position: relative; display: block; aspect-ratio: 1; isolation: isolate;
  transform-origin: 50% 90%; user-select: none; -webkit-tap-highlight-color: transparent; }
.sparo > img { width: 100%; height: 100%; -webkit-user-drag: none; }
.sparo b, .sparo i { position: absolute; display: none; background-repeat: no-repeat; pointer-events: none; }
.sparo b { --open: inset(0 0 0 0); --shut: inset(80% 0 0 0); animation: blink 5s ease-in-out infinite; }  /* a lid: the eye closes to its own curve */
.hero .sparo, .split .sparo, .core .sparo, .empty .sparo, .band .sparo, .top .sparo, .steps .sparo, .guide .sparo,
.scene .sparo, .sparo.mascot { animation: var(--idle) var(--beat) ease-in-out infinite; }
.sparo.art { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1), var(--idle) var(--beat) ease-in-out .5s infinite; }
@keyframes blink { 0%, 90%, 100% { clip-path: var(--open); } 93% { clip-path: var(--shut); } }

@keyframes bob { 50% { translate: 0 -6px; } }

/* Hello: a tilt toward the waving wing, the two wave lines ripple out, the eyes glance down at you and blink */
.sparo[data-mood="link"] { --idle: greet; --beat: 3.2s; }
.sparo[data-mood="link"] b { animation: glance 6.4s ease-in-out infinite; }
.sparo[data-mood="link"] i { animation: hi 1.6s ease-out infinite; }
.sparo[data-mood="link"] i:nth-of-type(2) { animation-delay: .14s; }
@keyframes greet { 20% { rotate: -6deg; } 40% { rotate: 4deg; } 60%, 100% { rotate: 0deg; } }
@keyframes glance { 0%, 30% { translate: 0 0; } 36%, 58% { translate: -8% 6%; } 64%, 100% { translate: 0 0; }
  0%, 66%, 72%, 100% { clip-path: var(--open); } 69% { clip-path: var(--shut); } }
@keyframes hi { 0% { opacity: 0; translate: calc(var(--dx) * -45%) calc(var(--dy) * -45%); scale: .7; }
  30%, 55% { opacity: 1; translate: 0 0; scale: 1; } 85%, 100% { opacity: 0; translate: calc(var(--dx) * 35%) calc(var(--dy) * 35%); } }

/* Smitten: a lub-dub heartbeat, the big heart throbs with him, the small ones float up and away, the eye flutters */
.sparo[data-mood="match"] { --idle: lubdub; --beat: 2.4s; }
.sparo[data-mood="match"] b { animation: flutter 5.2s ease-in-out infinite; }
.sparo[data-mood="match"] i:nth-of-type(1) { transform-origin: 40% 70%; animation: lubdub 2.4s ease-in-out infinite; }
.sparo[data-mood="match"] i:nth-of-type(n+2) { animation: float 3.6s ease-out infinite; }
.sparo[data-mood="match"] i:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes lubdub { 0%, 40%, 100% { scale: 1; } 10% { scale: 1.07; } 18% { scale: .99; } 26% { scale: 1.05; } }
@keyframes flutter { 0%, 78%, 85.5%, 93%, 100% { clip-path: var(--open); } 82%, 89% { clip-path: var(--shut); } }
@keyframes float { 0% { opacity: 0; translate: -10% 60%; scale: .5; } 15% { opacity: 1; translate: 0 0; scale: 1; }
  45% { translate: 18% -45%; } 75% { opacity: 1; translate: -12% -95%; } 100% { opacity: 0; translate: 6% -140%; scale: .8; } }

/* Party: he hops, and the confetti is thrown out from him on every landing and tumbles down */
.sparo[data-mood="share"] { --idle: cheer; --beat: 2.2s; }
.sparo[data-mood="share"] i { --spin: 1; animation: toss 2.2s cubic-bezier(.2, .7, .4, 1) infinite; }
.sparo[data-mood="share"] i:nth-of-type(even) { --spin: -1; }
.sparo[data-mood="share"] i:nth-of-type(3n + 2) { animation-delay: .07s; }
.sparo[data-mood="share"] i:nth-of-type(3n) { animation-delay: .14s; }
@keyframes cheer { 30% { translate: 0 -10px; scale: .96 1.05; } 55% { translate: 0 0; scale: 1.06 .94; } 70%, 100% { scale: 1; } }
@keyframes toss { 0%, 25% { opacity: 0; translate: calc(var(--dx) * -90%) calc(var(--dy) * -90%); scale: .3; rotate: 0deg; }
  40% { opacity: 1; translate: 0 0; scale: 1; } 80% { opacity: 1; translate: calc(var(--dx) * 30%) calc(var(--dy) * 30% + 40%);
  rotate: calc(var(--spin) * 140deg); } 100% { opacity: 0; translate: calc(var(--dx) * 40%) calc(var(--dy) * 40% + 75%); rotate: calc(var(--spin) * 220deg); } }

/* Giggles: he shakes with laughter in fits, and the sparks pop around him one after another */
.sparo[data-mood="laugh"] { --idle: giggle; --beat: 2.4s; }
.sparo[data-mood="laugh"] i { animation: flick 2.4s ease-out infinite; }
.sparo[data-mood="laugh"] i:nth-of-type(2) { animation-delay: .12s; }
.sparo[data-mood="laugh"] i:nth-of-type(3) { animation-delay: .24s; }
.sparo[data-mood="laugh"] i:nth-of-type(4) { animation-delay: .36s; }
@keyframes giggle { 6%, 18%, 30% { translate: -2px -1px; rotate: -2deg; } 12%, 24%, 36% { translate: 2px 0; rotate: 2deg; } 44%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes flick { 0% { opacity: 0; scale: .4; } 8% { opacity: 1; scale: 1.25; } 16%, 40% { opacity: 1; scale: 1; }
  48%, 100% { opacity: 0; scale: .8; translate: calc(var(--dx) * 25%) calc(var(--dy) * 25%); } }

/* Fast asleep: slow deep breaths, the moon rocks, and the z's drift up from him one at a time */
.sparo[data-mood="sleepy"] { --idle: slumber; --beat: 4.5s; }
.sparo[data-mood="sleepy"] i:nth-of-type(1) { transform-origin: 70% 80%; animation: rock 6s ease-in-out infinite; }
.sparo[data-mood="sleepy"] i:nth-of-type(n+2) { animation: snore 4.5s ease-in-out infinite; }
.sparo[data-mood="sleepy"] i:nth-of-type(3) { animation-delay: .6s; }
.sparo[data-mood="sleepy"] i:nth-of-type(2) { animation-delay: 1.2s; }
@keyframes slumber { 0%, 100% { scale: 1; rotate: 0deg; } 45% { scale: 1.015 1.035; rotate: -1.5deg; } }
@keyframes rock { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
@keyframes snore { 0% { opacity: 0; translate: -50% 50%; scale: .4; } 25% { opacity: 1; translate: 0 0; scale: 1; }
  65% { opacity: 1; } 90%, 100% { opacity: 0; translate: 30% -40%; scale: 1.1; } }

/* Sheepish: he shrinks a little and sways, eyes half close, a bead of sweat runs down */
.sparo[data-mood="sorry"] { --idle: sheepish; --beat: 5.5s; }
.sparo[data-mood="sorry"] b { animation: mope 5.5s ease-in-out infinite; }
.sparo[data-mood="sorry"] i:nth-of-type(1) { display: block; left: 75%; top: 21%; width: 6%; height: 6%; border-radius: 0 50% 50% 50%;
  rotate: 45deg; background: linear-gradient(135deg, var(--card), var(--sky)); animation: sweat 5.5s ease-in infinite; }
@keyframes sheepish { 0%, 100% { rotate: 0deg; scale: 1; } 40%, 60% { rotate: 2.5deg; scale: .97; translate: 0 2px; } }
@keyframes mope { 0%, 30%, 82%, 100% { translate: 0 0; } 40%, 72% { translate: -7% 9%; } }  /* can't quite look at you */
@keyframes sweat { 0%, 30% { opacity: 0; scale: 0; translate: 0 0; } 38% { opacity: 1; scale: 1; } 70% { opacity: 1; translate: 0 180%; }
  85%, 100% { opacity: 0; translate: 0 260%; } }

/* Gasp: every so often he jumps, the burst lines flash out and his eyes go wide */
.sparo[data-mood="wow"] { --idle: gasp; --beat: 3.4s; }
.sparo[data-mood="wow"] b { animation: wide 3.4s ease-out infinite; }
.sparo[data-mood="wow"] i { animation: flash 3.4s ease-out infinite; }
.sparo[data-mood="wow"] i:nth-of-type(2) { animation-delay: .05s; }
.sparo[data-mood="wow"] i:nth-of-type(3) { animation-delay: .1s; }
@keyframes gasp { 0%, 40%, 100% { translate: 0 0; scale: 1; } 6% { translate: 0 -9px; scale: .96 1.06; } 14% { translate: 0 0; scale: 1.04 .96; } 20% { scale: 1; } }
@keyframes wide { 0%, 3%, 50%, 100% { scale: 1; } 8%, 30% { scale: 1.14; } 0%, 76%, 82%, 100% { clip-path: var(--open); } 79% { clip-path: var(--shut); } }
@keyframes flash { 0%, 2% { opacity: 0; scale: .3; translate: calc(var(--dx) * -60%) calc(var(--dy) * -60%); } 9% { opacity: 1; scale: 1.15; translate: 0 0; }
  30% { opacity: 1; scale: 1; } 45%, 100% { opacity: 0; scale: 1; } }

/* Hmm: he tilts his head, narrows his eyes, and a thought bubble builds up dot by dot */
.sparo[data-mood="thinking"] { --idle: ponder; --beat: 4.8s; }
.sparo[data-mood="thinking"] b { --shut: inset(0 0 80% 0); animation: muse 4.8s ease-in-out infinite; }  /* lids rise from below: a squint */
.sparo[data-mood="thinking"] i:nth-of-type(-n + 3) { display: block; border-radius: 50%; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--sky); animation: idea 4.8s ease-out infinite; }
.sparo[data-mood="thinking"] i:nth-of-type(1) { left: 77%; top: 17%; width: 5%; height: 5%; }
.sparo[data-mood="thinking"] i:nth-of-type(2) { left: 83%; top: 8%; width: 7%; height: 7%; animation-delay: .3s; }
.sparo[data-mood="thinking"] i:nth-of-type(3) { left: 89%; top: 0; width: 10%; height: 10%; animation-delay: .6s; }
@keyframes ponder { 25% { rotate: -5deg; } 75% { rotate: 3deg; } }
@keyframes muse { 0%, 18%, 66%, 90%, 96%, 100% { clip-path: var(--open); } 28%, 58% { clip-path: inset(0 0 32% 0); } 93% { clip-path: var(--shut); } }
@keyframes idea { 0%, 10% { opacity: 0; scale: 0; } 20%, 70% { opacity: 1; scale: 1; } 85%, 100% { opacity: 0; scale: 1.15; } }

/* Heads up: a quick stern shake, the eyes squint, and the sign sends out two alarm rings */
.sparo[data-mood="warning"] { --idle: shimmy; --beat: 3.6s; }
.sparo[data-mood="warning"] b { --shut: inset(0 0 80% 0); animation: stern 3.6s ease-in-out infinite; }
.sparo[data-mood="warning"] i:nth-of-type(-n + 2) { display: block; z-index: -1; left: 68.5%; top: 28.5%; width: 31%; height: 31%;
  border: 2px solid var(--amber); border-radius: 50%; animation: alarm 3.6s ease-out infinite; }
.sparo[data-mood="warning"] i:nth-of-type(2) { animation-delay: .3s; }
@keyframes shimmy { 0%, 22%, 100% { translate: 0 0; rotate: 0deg; } 4%, 12% { translate: -3px 0; rotate: -2deg; } 8%, 16% { translate: 3px 0; rotate: 2deg; } }
@keyframes stern { 0%, 22%, 60%, 66%, 100% { clip-path: var(--open); } 4%, 16% { clip-path: inset(0 0 30% 0); } 63% { clip-path: var(--shut); } }
@keyframes alarm { 0% { opacity: 0; scale: .7; } 6% { opacity: .55; } 40%, 100% { opacity: 0; scale: 1.45; } }
@media (prefers-reduced-motion: reduce) { .sparo[data-mood="warning"] i { display: none; } }  /* still, he is just the art */

/* rig: generated by mockups/mascot-kit/tools/rig.py, do not edit by hand */
.sparo[data-mood="link"] b:nth-of-type(1) { display: block; left: 35.94%; top: 45.31%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/link-parts.434edd35e659.webp"); background-size: 711.1% 110%; background-position: 0% 0%; --dx: -0.22; --dy: -0.12; }
.sparo[data-mood="link"] b:nth-of-type(2) { display: block; left: 62.5%; top: 39.06%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/link-parts.434edd35e659.webp"); background-size: 711.1% 110%; background-position: 18.18% 0%; --dx: 0.31; --dy: -0.24; }
.sparo[data-mood="link"] i:nth-of-type(1) { display: block; left: 89.06%; top: 31.25%; width: 10.94%; height: 17.19%; background-image: url("img/sparo/link-parts.434edd35e659.webp"); background-size: 914.3% 100%; background-position: 35.09% 0%; --dx: 0.81; --dy: -0.38; }
.sparo[data-mood="link"] i:nth-of-type(2) { display: block; left: 85.94%; top: 34.38%; width: 10.94%; height: 14.06%; background-image: url("img/sparo/link-parts.434edd35e659.webp"); background-size: 914.3% 122.2%; background-position: 49.12% 0%; --dx: 0.75; --dy: -0.35; }
.sparo[data-mood="match"] b:nth-of-type(1) { display: block; left: 59.38%; top: 43.75%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/match-parts.1b91d4a659b0.webp"); background-size: 711.1% 170%; background-position: 0% 0%; --dx: 0.28; --dy: -0.17; }
.sparo[data-mood="match"] i:nth-of-type(1) { display: block; left: 65.62%; top: 12.5%; width: 29.69%; height: 26.56%; background-image: url("img/sparo/match-parts.1b91d4a659b0.webp"); background-size: 336.8% 100%; background-position: 22.22% 0%; --dx: 0.56; --dy: -0.69; }
.sparo[data-mood="match"] i:nth-of-type(2) { display: block; left: 79.69%; top: 34.38%; width: 15.62%; height: 15.62%; background-image: url("img/sparo/match-parts.1b91d4a659b0.webp"); background-size: 640% 170%; background-position: 55.56% 0%; --dx: 0.70; --dy: -0.36; }
.sparo[data-mood="match"] i:nth-of-type(3) { display: block; left: 82.81%; top: 48.44%; width: 10.94%; height: 10.94%; background-image: url("img/sparo/match-parts.1b91d4a659b0.webp"); background-size: 914.3% 242.9%; background-position: 71.93% 0%; --dx: 0.72; --dy: -0.12; }
.sparo[data-mood="share"] i:nth-of-type(1) { display: block; left: 6.25%; top: 25%; width: 10.94%; height: 15.62%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 914.3% 190%; background-position: 0% 0%; --dx: -0.78; --dy: -0.39; }
.sparo[data-mood="share"] i:nth-of-type(2) { display: block; left: 76.56%; top: 15.62%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 711.1% 190%; background-position: 14.55% 0%; --dx: 0.66; --dy: -0.57; }
.sparo[data-mood="share"] i:nth-of-type(3) { display: block; left: 17.19%; top: 73.44%; width: 12.5%; height: 15.62%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 800% 190%; background-position: 32.14% 0%; --dx: -0.54; --dy: 0.58; }
.sparo[data-mood="share"] i:nth-of-type(4) { display: block; left: 64.06%; top: 6.25%; width: 14.06%; height: 14.06%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 711.1% 211.1%; background-position: 49.09% 0%; --dx: 0.41; --dy: -0.78; }
.sparo[data-mood="share"] i:nth-of-type(5) { display: block; left: 81.25%; top: 65.62%; width: 14.06%; height: 12.5%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 711.1% 237.5%; background-position: 67.27% 0%; --dx: 0.75; --dy: 0.39; }
.sparo[data-mood="share"] i:nth-of-type(6) { display: block; left: 76.56%; top: 78.12%; width: 12.5%; height: 12.5%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 800% 237.5%; background-position: 83.93% 0%; --dx: 0.64; --dy: 0.64; }
.sparo[data-mood="share"] i:nth-of-type(7) { display: block; left: 10.94%; top: 18.75%; width: 12.5%; height: 10.94%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 800% 271.4%; background-position: 100% 0%; --dx: -0.67; --dy: -0.56; }
.sparo[data-mood="share"] i:nth-of-type(8) { display: block; left: 7.812%; top: 70.31%; width: 12.5%; height: 12.5%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 800% 237.5%; background-position: 0% 100%; --dx: -0.73; --dy: 0.49; }
.sparo[data-mood="share"] i:nth-of-type(9) { display: block; left: 84.38%; top: 26.56%; width: 10.94%; height: 10.94%; background-image: url("img/sparo/share-parts.4257082b9a10.webp"); background-size: 914.3% 271.4%; background-position: 15.79% 91.67%; --dx: 0.78; --dy: -0.40; }
.sparo[data-mood="sleepy"] i:nth-of-type(1) { display: block; left: 59.38%; top: 6.25%; width: 20.31%; height: 23.44%; background-image: url("img/sparo/sleepy-parts.59e6264af7dd.webp"); background-size: 492.3% 100%; background-position: 0% 0%; --dx: 0.35; --dy: -0.74; }
.sparo[data-mood="sleepy"] i:nth-of-type(2) { display: block; left: 82.81%; top: 9.375%; width: 12.5%; height: 14.06%; background-image: url("img/sparo/sleepy-parts.59e6264af7dd.webp"); background-size: 800% 166.7%; background-position: 25% 0%; --dx: 0.74; --dy: -0.77; }
.sparo[data-mood="sleepy"] i:nth-of-type(3) { display: block; left: 78.12%; top: 20.31%; width: 10.94%; height: 12.5%; background-image: url("img/sparo/sleepy-parts.59e6264af7dd.webp"); background-size: 914.3% 187.5%; background-position: 40.35% 0%; --dx: 0.63; --dy: -0.57; }
.sparo[data-mood="sleepy"] i:nth-of-type(4) { display: block; left: 71.88%; top: 28.12%; width: 10.94%; height: 10.94%; background-image: url("img/sparo/sleepy-parts.59e6264af7dd.webp"); background-size: 914.3% 214.3%; background-position: 54.39% 0%; --dx: 0.51; --dy: -0.43; }
.sparo[data-mood="sorry"] b:nth-of-type(1) { display: block; left: 43.75%; top: 37.5%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/sorry-parts.837893aee076.webp"); background-size: 711.1% 100%; background-position: 0% 0%; --dx: -0.10; --dy: -0.08; }
.sparo[data-mood="sorry"] b:nth-of-type(2) { display: block; left: 68.75%; top: 37.5%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/sorry-parts.837893aee076.webp"); background-size: 711.1% 110%; background-position: 18.18% 0%; --dx: 0.40; --dy: -0.09; }
.sparo[data-mood="wow"] b:nth-of-type(1) { display: block; left: 34.38%; top: 37.5%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/wow-parts.1fcea54a454e.webp"); background-size: 711.1% 118.2%; background-position: 0% 0%; --dx: -0.17; --dy: -0.13; }
.sparo[data-mood="wow"] b:nth-of-type(2) { display: block; left: 59.38%; top: 34.38%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/wow-parts.1fcea54a454e.webp"); background-size: 711.1% 118.2%; background-position: 18.18% 0%; --dx: 0.33; --dy: -0.20; }
.sparo[data-mood="wow"] i:nth-of-type(1) { display: block; left: 79.69%; top: 10.94%; width: 18.75%; height: 18.75%; background-image: url("img/sparo/wow-parts.1fcea54a454e.webp"); background-size: 533.3% 108.3%; background-position: 38.46% 0%; --dx: 0.78; --dy: -0.65; }
.sparo[data-mood="wow"] i:nth-of-type(2) { display: block; left: 73.44%; top: 4.688%; width: 15.62%; height: 20.31%; background-image: url("img/sparo/wow-parts.1fcea54a454e.webp"); background-size: 640% 100%; background-position: 61.11% 0%; --dx: 0.63; --dy: -0.76; }
.sparo[data-mood="wow"] i:nth-of-type(3) { display: block; left: 82.81%; top: 25%; width: 14.06%; height: 10.94%; background-image: url("img/sparo/wow-parts.1fcea54a454e.webp"); background-size: 711.1% 185.7%; background-position: 80% 0%; --dx: 0.80; --dy: -0.45; }
.sparo[data-mood="thinking"] b:nth-of-type(1) { display: block; left: 35.94%; top: 39.06%; width: 14.06%; height: 15.62%; background-image: url("img/sparo/thinking-parts.33d609743eb2.webp"); background-size: 711.1% 110%; background-position: 0% 0%; --dx: -0.14; --dy: -0.17; }
.sparo[data-mood="thinking"] b:nth-of-type(2) { display: block; left: 62.5%; top: 31.25%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/thinking-parts.33d609743eb2.webp"); background-size: 711.1% 100%; background-position: 18.18% 0%; --dx: 0.39; --dy: -0.31; }
.sparo[data-mood="laugh"] i:nth-of-type(1) { display: block; left: 82.81%; top: 18.75%; width: 10.94%; height: 12.5%; background-image: url("img/sparo/laugh-parts.9ee8536c3332.webp"); background-size: 914.3% 100%; background-position: 0% 0%; --dx: 0.72; --dy: -0.57; }
.sparo[data-mood="laugh"] i:nth-of-type(2) { display: block; left: 12.5%; top: 26.56%; width: 12.5%; height: 10.94%; background-image: url("img/sparo/laugh-parts.9ee8536c3332.webp"); background-size: 800% 114.3%; background-position: 14.29% 0%; --dx: -0.67; --dy: -0.43; }
.sparo[data-mood="laugh"] i:nth-of-type(3) { display: block; left: 85.94%; top: 26.56%; width: 12.5%; height: 10.94%; background-image: url("img/sparo/laugh-parts.9ee8536c3332.webp"); background-size: 800% 114.3%; background-position: 30.36% 0%; --dx: 0.80; --dy: -0.43; }
.sparo[data-mood="laugh"] i:nth-of-type(4) { display: block; left: 9.375%; top: 34.38%; width: 12.5%; height: 9.375%; background-image: url("img/sparo/laugh-parts.9ee8536c3332.webp"); background-size: 800% 133.3%; background-position: 46.43% 0%; --dx: -0.73; --dy: -0.29; }
.sparo[data-mood="warning"] b:nth-of-type(1) { display: block; left: 34.38%; top: 34.38%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/warning-parts.92ddfa48d53b.webp"); background-size: 711.1% 100%; background-position: 0% 0%; --dx: -0.21; --dy: -0.10; }
.sparo[data-mood="warning"] b:nth-of-type(2) { display: block; left: 59.38%; top: 29.69%; width: 14.06%; height: 17.19%; background-image: url("img/sparo/warning-parts.92ddfa48d53b.webp"); background-size: 711.1% 100%; background-position: 18.18% 0%; --dx: 0.29; --dy: -0.20; }