/* LOUDLINGS mockup: creature, card and scene motion. Pivots are set inline in viewBox units. */
.creature { overflow: visible; }
.creature .rig, .creature .body { transform-origin: 60px 108px; }
.creature .body { animation: breathe 2.9s ease-in-out infinite; animation-delay: var(--d); }
@keyframes breathe { 50% { transform: scale(1.028, .972); } }

/* Face states */
.eye-happy, .eye-closed, .m-open, .m-sad, .brows, .zzz, .free-mouth { display: none; }
.ex-happy .eye-open { display: none; } .ex-happy .eye-happy { display: inline; }
.ex-happy .m-smile, .ex-open .m-smile, .ex-wow .m-smile, .ex-sad .m-smile, .ex-sleep .m-smile { display: none; }
.ex-happy .m-open, .ex-open .m-open, .ex-wow .m-open { display: inline; }
.ex-wow .eye { transform: scale(1.24); }
.ex-sad .m-sad, .ex-sleep .m-sad, .ex-sad .brows { display: inline; }
.ex-sad .iris { translate: 0 1.4px; }
.ex-sleep .eye-open { display: none; } .ex-sleep .eye-closed { display: inline; } .ex-sleep .zzz { display: inline; }
.ex-sleep .m-sad { display: none; } .ex-sleep .body { animation-duration: 4.6s; }
.talk .m-smile, .talk .m-sad { display: none !important; }
.talk .m-open { display: inline !important; animation: talking .2s ease-in-out infinite alternate; }
@keyframes talking { from { transform: scale(.9, .34); } to { transform: scale(1.08, 1.12); } }
.blink .eye { animation: blink .15s ease-in-out; }
@keyframes blink { 50% { transform: scaleY(.08); } }
.zzz text { font-family: var(--display); fill: #fff; stroke: var(--ink); stroke-width: 1.8px; paint-order: stroke; animation: zfloat 2.6s ease-in infinite; }
.zzz .z1 { font-size: 11px; } .zzz .z2 { font-size: 14px; animation-delay: .5s; } .zzz .z3 { font-size: 18px; animation-delay: 1s; }
@keyframes zfloat { 0% { opacity: 0; transform: translate(-3px, 8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }

/* Idle parts */
.d2 { animation-delay: calc(var(--d) - 1s) !important; }
.sway { animation: sway 2.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
.flop { animation: flop 3.2s ease-in-out infinite; animation-delay: var(--d); } @keyframes flop { 0%, 72%, 100% { transform: rotate(0); } 80% { transform: rotate(-11deg); } 88% { transform: rotate(7deg); } }
.twitch { animation: twitch 4.6s linear infinite; animation-delay: var(--d); } @keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-11deg); } 94% { transform: rotate(8deg); } 97% { transform: rotate(-5deg); } }
.whisk { animation: whisk 2.1s ease-in-out infinite; animation-delay: var(--d); } @keyframes whisk { 50% { transform: rotate(5deg) scaleX(1.05); } }
.wag { animation: wag .55s ease-in-out infinite alternate; } @keyframes wag { from { transform: rotate(-13deg); } to { transform: rotate(16deg); } }
.curl { animation: curl 2.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes curl { 50% { transform: rotate(14deg) scale(1.03); } }
.pant { animation: pant .36s ease-in-out infinite alternate; } @keyframes pant { from { transform: scaleY(.84); } to { transform: scaleY(1.08); } }
.flap { animation: flap 1.8s ease-in-out infinite; animation-delay: var(--d); } @keyframes flap { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-18deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-14deg); } }
.nodp { animation: nodp 3s ease-in-out infinite; animation-delay: var(--d); } @keyframes nodp { 0%, 62%, 100% { transform: rotate(0); } 72% { transform: rotate(5deg); } 84% { transform: rotate(-3deg); } }
.quack { animation: quack 4.2s linear infinite; animation-delay: var(--d); } @keyframes quack { 0%, 88%, 96%, 100% { transform: rotate(0); } 92% { transform: rotate(-9deg); } }
.fishtail { animation: fishtail .7s ease-in-out infinite alternate; } @keyframes fishtail { from { transform: rotate(-14deg) scaleX(.92); } to { transform: rotate(14deg) scaleX(1.06); } }
.c-fish .body { animation: swimidle 2.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes swimidle { 50% { transform: translate(-3px, -3px) rotate(-2deg); } }
.bub { animation: bub 2.8s ease-in infinite; animation-delay: var(--d); } .b2 { animation-delay: calc(var(--d) - .9s); } .b3 { animation-delay: calc(var(--d) - 1.8s); }
@keyframes bub { 0% { opacity: 0; transform: translateY(16px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -18px); } }
.armwave { animation: armwave 3.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes armwave { 0%, 58%, 100% { transform: rotate(0); } 66%, 82% { transform: rotate(22deg); } 74%, 90% { transform: rotate(-8deg); } }
.armbob { animation: armbob 1.6s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes armbob { from { transform: rotate(-8deg); } to { transform: rotate(9deg); } }
.bobp { animation: bobp 2s ease-in-out infinite; animation-delay: var(--d); } @keyframes bobp { 50% { transform: translateY(-2px); } }
.slosh { animation: slosh 2.2s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes slosh { from { transform: translateX(-14px) rotate(-3deg); } to { transform: translateX(1px) rotate(3deg); } }
.wigglep { animation: wigglep 2.2s ease-in-out infinite; animation-delay: var(--d); } @keyframes wigglep { 50% { transform: rotate(7deg) scale(1.06); } }
.chug { animation: chug .34s ease-in-out infinite alternate; } @keyframes chug { from { transform: translateY(0); } to { transform: translateY(-1.5px) rotate(-.5deg); } }
.spin-w { animation: spin .9s linear infinite; }
.flash { animation: flash 3s ease-in-out infinite; animation-delay: var(--d); } @keyframes flash { 0%, 80%, 100% { filter: none; } 88% { filter: brightness(1.6) drop-shadow(0 0 4px #fff27a); } }
.puff { animation: puff 1.7s ease-out infinite; animation-delay: var(--d); opacity: 0; } .pf2 { animation-delay: calc(var(--d) - .8s); } @keyframes puff { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: translate(6px, -13px) scale(1.5); } }
.p-bulb { animation: bulb 1.3s steps(2) infinite; } @keyframes bulb { 50% { filter: brightness(1.8) drop-shadow(0 0 5px #ff5d6c); } }
.lamp { animation: lamp 1.2s steps(2) infinite; } .l2 { animation-delay: .3s; } .l3 { animation-delay: .6s; } @keyframes lamp { 50% { filter: brightness(1.7); } }
.starsway { animation: starsway 3.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes starsway { 0%, 100% { transform: rotate(-7deg) scale(.98); } 50% { transform: rotate(7deg) scale(1.03); } }
.sparkle { animation: sparkle 1.9s ease-in-out infinite; animation-delay: var(--d); } .s2 { animation-delay: calc(var(--d) - .9s); } @keyframes sparkle { 0%, 100% { transform: scale(.25) rotate(0); opacity: .2; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.rock { animation: rock 3.8s ease-in-out infinite; animation-delay: var(--d); } @keyframes rock { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.spin-slow { animation: spin 22s linear infinite; }
.puffy { animation: puffy 3.2s ease-in-out infinite; animation-delay: var(--d); } @keyframes puffy { 0%, 100% { transform: scale(1) translateX(-1px); } 50% { transform: scale(1.05, .96) translateX(2px); } }
.tapfoot { animation: tapfoot 1.8s ease-in-out infinite; animation-delay: var(--d); } @keyframes tapfoot { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-16deg); } 90% { transform: rotate(4deg); } }
.hatbob { animation: hatbob 2.9s ease-in-out infinite; animation-delay: var(--d); } @keyframes hatbob { 50% { transform: translateY(-1.5px) rotate(-1.5deg); } }
.browp { animation: browp 3.4s ease-in-out infinite; animation-delay: var(--d); } @keyframes browp { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-3px) rotate(4deg); } }
.zip { animation: zip 2.5s ease-in-out infinite; animation-delay: var(--d); } @keyframes zip { 0%, 76%, 100% { transform: rotate(0); } 84% { transform: rotate(26deg); } 92% { transform: rotate(-14deg); } }
.steam .puff { animation-play-state: paused; }
.ex-free .zipper { display: none; } .ex-free .free-mouth { display: inline; } .ex-free .free-mouth .m-open { display: inline; } .ex-free .free-mouth .m-smile { display: none; }
.ex-free .browp { transform: translateY(-5px) rotate(-22deg); animation: none; }
.ex-angry .steam .puff { animation-play-state: running; } .ex-angry .browp { animation: none; transform: translateY(3px) rotate(10deg); }
.ex-angry .rig { animation: a-shake .5s linear infinite; }
.ex-smug .p-brow-l { animation: none; transform: translateY(-6px); } .ex-smug .eye { transform: scale(1, .72); }
.crumb, .drop { opacity: 0; }

/* Pack */
.foil-sweep { animation: foil 2.8s ease-in-out infinite; } @keyframes foil { 0% { transform: translateX(-60px); } 55%, 100% { transform: translateX(190px); } }
.glowp { animation: glowp 1.6s ease-in-out infinite; } @keyframes glowp { 50% { transform: scale(1.14); opacity: .75; } }

/* One-shot actions */
.a-jump .rig { animation: a-jump .6s cubic-bezier(.3, .8, .4, 1); }
@keyframes a-jump { 0% { transform: scale(1.12, .84); } 40% { transform: translateY(-26px) scale(.9, 1.12); } 72% { transform: scale(1.14, .82); } 88% { transform: translateY(-4px) scale(.97, 1.04); } 100% { transform: none; } }
.a-jump .shadow, .a-spin .shadow { animation: shadowjump .6s ease; } @keyframes shadowjump { 40% { transform: scale(.55); opacity: .08; } }
.a-land .rig { animation: a-land .42s ease-out; } @keyframes a-land { 0% { transform: scale(1.3, .62); } 50% { transform: translateY(-9px) scale(.9, 1.14); } 100% { transform: none; } }
.a-squash .rig { animation: a-squash .42s var(--pop); } @keyframes a-squash { 30% { transform: scale(1.24, .72); } 62% { transform: scale(.88, 1.16); } }
.a-shake .rig { animation: a-shake .42s linear; } @keyframes a-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.a-no .rig { animation: a-no .75s ease-in-out; } @keyframes a-no { 20% { transform: rotate(-9deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-6deg); } }
.a-dance .rig { animation: a-dance .78s ease-in-out infinite; } @keyframes a-dance { 0%, 100% { transform: rotate(-11deg) translateY(0) scale(1.03, .97); } 25% { transform: translateY(-16px) scale(.95, 1.06); } 50% { transform: rotate(11deg) translateY(0) scale(1.03, .97); } 75% { transform: translateY(-16px) scale(.95, 1.06); } }
.a-spin .rig { animation: a-spin .72s cubic-bezier(.4, .1, .3, 1); transform-origin: 60px 60px; } @keyframes a-spin { 45% { transform: translateY(-20px) rotate(200deg) scale(1.08); } 100% { transform: rotate(360deg); } }

/* Signature reaction of each word, fired by "act" */
.act.c-apple .rig { animation: a-jump .6s; } .act.c-apple .p-leaf { animation: flicker .16s linear 5 alternate; } @keyframes flicker { from { transform: rotate(-22deg); } to { transform: rotate(24deg); } }
.act.c-banana .rig { animation: bananaswing .8s ease-in-out; transform-origin: 30px 104px; } @keyframes bananaswing { 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg) scale(1.05); } }
.act.c-milk .rig { animation: milktilt .9s ease-in-out; } @keyframes milktilt { 25% { transform: rotate(-17deg) translateY(-6px); } 60% { transform: rotate(14deg); } } .act.c-milk .p-cap { animation: capjump .9s ease; } @keyframes capjump { 30% { transform: translateY(-13px) rotate(-16deg); } } .act.c-milk .p-wave { animation: slosh .22s ease-in-out infinite alternate; }
.act.c-cookie .rig { animation: a-spin .72s; transform-origin: 60px 60px; } .act.c-cookie .crumb { animation: crumb .8s ease-in forwards; } .act.c-cookie .c2 { animation-delay: .08s; } .act.c-cookie .c3 { animation-delay: .16s; } @keyframes crumb { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-13px, 88px) rotate(180deg); } }
.act.c-dog .rig { animation: a-jump .6s; } .act.c-dog .p-tail { animation-duration: .13s; } .act.c-dog .flop { animation: earflap .16s ease-in-out infinite alternate; } @keyframes earflap { from { transform: rotate(-17deg); } to { transform: rotate(13deg); } } .act.c-dog .pant { animation-duration: .15s; }
.act.c-cat .rig { animation: catstretch .9s ease; } @keyframes catstretch { 30% { transform: scale(1.14, .78) rotate(-2deg); } 62% { transform: scale(.9, 1.16); } } .act.c-cat .twitch { animation: earflap .13s linear 6 alternate; } .act.c-cat .p-tail { animation: curl .35s ease-in-out infinite; }
.act.c-duck .rig { animation: waddle .75s ease-in-out; } @keyframes waddle { 20% { transform: rotate(-11deg) translateX(-6px); } 50% { transform: rotate(10deg) translateX(6px); } 80% { transform: rotate(-6deg) translateX(-2px); } } .act.c-duck .flap { animation: wingfast .1s linear infinite alternate; } @keyframes wingfast { from { transform: rotate(-30deg); } to { transform: rotate(8deg); } } .act.c-duck .quack { animation: quackfast .16s linear infinite alternate; } @keyframes quackfast { from { transform: rotate(0); } to { transform: rotate(-16deg); } }
.act.c-fish .rig { animation: fishdash .85s ease-in-out; transform-origin: 60px 60px; } @keyframes fishdash { 28% { transform: translateX(-16px) rotate(-11deg); } 58% { transform: translate(13px, -9px) rotate(12deg) scaleX(-1); } 88% { transform: translateX(-3px) scaleX(-1); } } .act.c-fish .fishtail { animation-duration: .12s; }
.act.c-ball .rig { animation: ballbounce .95s cubic-bezier(.3, .6, .5, 1); } @keyframes ballbounce { 0% { transform: scale(1.2, .74); } 28% { transform: translateY(-40px) rotate(-30deg); } 52% { transform: scale(1.2, .74); } 72% { transform: translateY(-15px) rotate(14deg); } 88% { transform: scale(1.08, .92); } } .act.c-ball .shadow { animation: shadowjump .47s ease 2; }
.act.c-teddy .rig { animation: a-squash .5s; } .act.c-teddy .p-arm-l { animation: bighug .3s ease-in-out infinite alternate; } .act.c-teddy .p-arm-r { animation: bighug2 .3s ease-in-out infinite alternate; } @keyframes bighug { from { transform: rotate(10deg); } to { transform: rotate(48deg); } } @keyframes bighug2 { from { transform: rotate(-10deg); } to { transform: rotate(-48deg); } }
.act.c-car .rig { animation: cardrive .95s ease-in-out; } @keyframes cardrive { 20% { transform: translateX(10px) skewX(7deg); } 48% { transform: translateX(-23px) skewX(-9deg); } 78% { transform: translateX(5px); } } .act.c-car .spin-w { animation-duration: .16s; animation-direction: reverse; } .act.c-car .chug { animation-duration: .1s; }
.act.c-robot .rig { animation: robodance .9s steps(6); } @keyframes robodance { 16% { transform: translateX(-5px); } 33% { transform: translateX(5px) rotate(3deg); } 50% { transform: translateY(-7px); } 66% { transform: translateX(-5px) rotate(-3deg); } 83% { transform: translateX(5px); } } .act.c-robot .armbob { animation-duration: .13s; } .act.c-robot .p-bulb, .act.c-robot .lamp { animation-duration: .24s; }
.act.c-star .p-star { animation: starspin .9s cubic-bezier(.3, 0, .2, 1); } @keyframes starspin { 70% { transform: rotate(390deg) scale(1.2); } 100% { transform: rotate(360deg); } } .act.c-star .sparkle { animation-duration: .4s; }
.act.c-moon .rock { animation: rock .4s ease-in-out 3; }
.act.c-sun .spin-slow { animation-duration: .9s; } .act.c-sun .rig { animation: sunpulse .7s var(--pop); transform-origin: 60px 60px; } @keyframes sunpulse { 40% { transform: scale(1.18); } }
.act.c-cloud .rig { animation: a-shake .5s; } .act.c-cloud .drop { animation: dropfall .68s ease-in 2; } .act.c-cloud .dp2 { animation-delay: .12s; } .act.c-cloud .dp3 { animation-delay: .24s; } @keyframes dropfall { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(18px); } }
.act.c-pip .rig { animation: a-jump .6s; } .act.c-pip .p-arm-l { animation: bighug .15s ease-in-out infinite alternate; } .act.c-pip .p-arm-r { animation: bighug2 .15s ease-in-out infinite alternate; }
.act.c-mumble .rig { animation: a-shake .5s; }

/* Scenes */
.sc-drift { animation: scdrift 7s ease-in-out infinite alternate; } .dr2 { animation-duration: 9s; animation-direction: alternate-reverse; } @keyframes scdrift { from { transform: translateX(-11px); } to { transform: translateX(13px); } }
.sc-steam { animation: scsteam 2.2s ease-out infinite; } .st2 { animation-delay: -1.1s; } @keyframes scsteam { 0% { opacity: 0; transform: translateY(6px) scale(.85); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scale(1.1); } }
.sc-lid { animation: sclid 1.4s linear infinite; } @keyframes sclid { 0%, 74%, 100% { transform: none; } 80% { transform: translateY(-3px) rotate(-3deg); } 88% { transform: translateY(-1px) rotate(2deg); } }
.sc-pulse { animation: scpulse 2.8s ease-in-out infinite; } @keyframes scpulse { 50% { transform: scale(1.1); filter: brightness(1.08); } }
.sc-wobble { animation: scwobble 2.6s ease-in-out infinite; } @keyframes scwobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.sc-bounce { animation: scbounce 1.5s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes scbounce { 0%, 100% { transform: scale(1.06, .92); } 50% { transform: translateY(-13px); } }
.sc-kite { animation: sckite 2.4s ease-in-out infinite; } @keyframes sckite { 0%, 100% { transform: rotate(-11deg) translateY(1px); } 50% { transform: rotate(11deg) translateY(-3px); } }
.sc-tw { animation: sctw 1.9s ease-in-out infinite; } @keyframes sctw { 50% { opacity: .22; } }
.sc-shoot { opacity: 0; animation: scshoot 5.5s ease-in infinite; } @keyframes scshoot { 0%, 82% { opacity: 0; transform: none; } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(112px, 50px); } }
.sc-bunting { animation: scbunt 2.8s ease-in-out infinite alternate; } @keyframes scbunt { from { transform: translateY(-1px); } to { transform: translateY(2px); } }
.sc-flame { animation: scflame .28s ease-in-out infinite alternate; } @keyframes scflame { from { transform: scale(.88, 1.12) rotate(-5deg); } to { transform: scale(1.1, .92) rotate(5deg); } }
.sc-balloon { animation: scball 3s ease-in-out infinite; } .bl2 { animation-delay: -1.3s; } @keyframes scball { 50% { transform: translateY(-7px) rotate(2deg); } }
.sc-rain { animation: scrain .68s linear infinite; } @keyframes scrain { 0% { opacity: 0; transform: translate(4px, -16px); } 25% { opacity: 1; } 100% { opacity: .1; transform: translate(-5px, 18px); } }
.sc-ripple { animation: scripple 1.7s ease-out infinite; } .rp2 { animation-delay: -.9s; } @keyframes scripple { 0% { transform: scale(.75); opacity: .95; } 100% { transform: scale(1.18); opacity: .45; } }
.sc-fog { animation: scfog 5.5s ease-in-out infinite alternate; } .fg2 { animation-direction: alternate-reverse; } @keyframes scfog { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.loc.pulse-hit { animation: lochit .36s var(--pop); } @keyframes lochit { 40% { transform: scale(1.06) rotate(-1deg); } }

/* Cards */
.card .window::before { animation: raysSpin 44s linear infinite; will-change: transform; }
.grid .card .window::before { animation: none; will-change: auto; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.card .pic { animation: picfloat 3.3s ease-in-out infinite; } .card:nth-child(2n) .pic { animation-delay: -1.2s; } .card:nth-child(3n) .pic { animation-delay: -2.1s; }
@keyframes picfloat { 50% { transform: translateY(-3.5%); } }
.card .power { animation: powerpulse 2.4s ease-in-out infinite; } @keyframes powerpulse { 50% { transform: scale(1.08) rotate(7deg); } }
.card .cost { animation: costfloat 3s ease-in-out infinite; } @keyframes costfloat { 50% { transform: translateY(-.08em); filter: brightness(1.14); } }
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 1; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), #ffffff85, transparent 48%); }
.card.tilting::after { opacity: 1; }
.card.tilting { transition: transform .08s linear !important; z-index: 25; }
.card.sleepy .window { filter: saturate(.5) brightness(.8); }
.card.sleepy { animation: sleepyrock 3.4s ease-in-out infinite; } @keyframes sleepyrock { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.card.sleepy::before { content: 'sonolenta'; position: absolute; bottom: -.6em; left: 50%; translate: -50% 0; z-index: 3; background: var(--ink); color: #fff; font-size: .95em; font-weight: 700; padding: .1em .55em; border-radius: 1em; white-space: nowrap; }
.mini { animation: minibreathe 3.1s ease-in-out infinite; } .mini.facedown { animation: peek 2.4s ease-in-out infinite; } @keyframes minibreathe { 50% { translate: 0 -.09rem; } } @keyframes peek { 0%, 74%, 100% { transform: none; } 82% { transform: rotate(-3deg) translateY(-.2rem); } 92% { transform: rotate(3deg); } }
.mini.pending { animation: wiggle 1.5s ease-in-out infinite; }
.isle .orb { animation: orbfloat 3.4s ease-in-out infinite; } .isle:nth-child(2n) .orb { animation-delay: -1.2s; } @keyframes orbfloat { 50% { translate: 0 -.55rem; } }
.nav button:active i { animation: navpop .25s var(--pop); } @keyframes navpop { 40% { transform: scale(1.4) rotate(-9deg); } }
.nav button.on i { animation: navon 2.4s ease-in-out infinite; } @keyframes navon { 50% { transform: translateY(-.15rem) rotate(-5deg); } }
.pal, .home-pip, .title-pip, .rp, .d-pip, .ava, .p-art, .c-pip, .art-holder { cursor: pointer; }
.title-cards > div { pointer-events: auto; cursor: pointer; }
.dance-row { display: flex; justify-content: center; gap: .1rem; position: relative; flex: none; margin-top: -.8rem; }
.dance-row > div { width: 5rem; height: 5rem; cursor: pointer; }
.freed { display: flex; align-items: center; gap: .8rem; }
.freed .fm { width: 5.4rem; height: 5.4rem; flex: none; }
.freed b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; }

@media (prefers-reduced-motion: reduce) {
  .creature *, .scene *, .card, .card *, .card::before, .mini, .isle .orb, .nav button i { animation: none !important; }
}