:root{--motion-gold:#ffe07a;--motion-pink:#f37991;--motion-teal:#75c7b7}

/* A soft arrival makes each room feel connected without delaying play. */
body>main{animation:pebletSceneArrive .48s cubic-bezier(.2,.78,.24,1) both}

.peblet-motion-layer{position:fixed;z-index:9998;inset:0;overflow:hidden;pointer-events:none;contain:layout style paint}
.peblet-motion-flight{position:fixed!important;z-index:1!important;box-sizing:border-box!important;margin:0!important;pointer-events:none!important;transform-origin:50% 50%!important;will-change:transform,opacity}
.peblet-motion-flight *{pointer-events:none!important}
.peblet-motion-symbol{display:grid;place-items:center;width:clamp(34px,5.5vw,62px);height:clamp(34px,5.5vw,62px);font-size:clamp(27px,4.7vw,52px);line-height:1;filter:drop-shadow(0 7px 5px rgba(50,40,27,.28))}
.peblet-motion-symbol[data-kind="cash"]{border:3px solid #b97827;border-radius:50%;background:linear-gradient(145deg,#fff2a8,#e8ae45);color:#65471f;font-size:clamp(18px,3vw,30px);font-weight:1000}
.peblet-motion-symbol[data-kind="post"]{font-size:clamp(25px,4vw,45px)}

.motion-land{animation:pebletMotionLand .46s cubic-bezier(.18,.8,.2,1.22)!important}
.motion-expression{animation:pebletFaceChange .42s cubic-bezier(.2,.78,.25,1.2)!important}

/* Individual transform properties let these reactions coexist with the
   positioning and bounce transforms already used by each scene. */
.motion-react-happy{transform-origin:50% 100%!important;animation:pebletHappyHop .82s cubic-bezier(.18,.8,.22,1.18)!important}
.motion-react-think{transform-origin:50% 100%!important;animation:pebletThinking .88s ease-in-out!important}
.motion-react-surprise{transform-origin:50% 100%!important;animation:pebletSurprise .62s cubic-bezier(.18,.82,.22,1.16)!important}
.motion-react-cheer{transform-origin:50% 100%!important;animation:pebletCheer 1.05s cubic-bezier(.18,.82,.22,1.12)!important}
.motion-character-idle{transform-origin:50% 100%!important;animation:pebletCuriousIdle 1.18s ease-in-out!important}

/* Existing invisible painted-object targets quietly invite discovery. */
.scene-wonder.motion-alive::before,.scene-wonder.motion-alive::after,
.bank-wonder.motion-alive::before,.bank-wonder.motion-alive::after,
.wonder-button.motion-alive::before,.wonder-button.motion-alive::after{opacity:.38!important;animation:pebletWonderBreath 1.3s ease-in-out!important}
.card-icon.motion-alive,.account-coin.motion-alive,.parcel-prop.motion-alive,.counter-bell.motion-alive,.pet-house-hotspot.motion-alive{animation:pebletObjectHello 1.2s ease-in-out!important}

.motion-mote{--motion-x:30%;--motion-y:55%;--motion-drift:44px;--motion-duration:7s;--motion-delay:0s;position:absolute;z-index:1;left:var(--motion-x);top:var(--motion-y);width:5px;height:5px;border-radius:50%;background:#fff1a2;box-shadow:0 0 9px 2px rgba(255,226,111,.62);opacity:0;pointer-events:none;animation:pebletMote var(--motion-duration) var(--motion-delay) ease-in-out infinite}
.cafe-ambient .motion-mote{background:#fff1d0;box-shadow:0 0 9px 2px rgba(255,218,151,.48)}
.post-ambient .motion-mote{background:#f7dfaa;box-shadow:0 0 8px 2px rgba(245,214,158,.45)}
.bank-ambient .motion-mote{background:#ffe390;box-shadow:0 0 10px 2px rgba(255,214,91,.58)}

@keyframes pebletSceneArrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes pebletMotionLand{0%,100%{scale:1}38%{scale:1.06 .94}68%{scale:.985 1.025}}
@keyframes pebletFaceChange{0%{opacity:.35;scale:.96}55%{opacity:1;scale:1.025}100%{opacity:1;scale:1}}
/* Reactions animate the transform layer so an actor's authored or dragged
   position in the independent translate property remains intact. */
@keyframes pebletHappyHop{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}18%{transform:translateY(2%) scale(1.055,.93)}43%{transform:translateY(-10%) rotate(-2deg) scale(.96,1.055)}66%{transform:translateY(0) rotate(2deg) scale(1.03,.975)}83%{transform:translateY(-3%) rotate(-1deg) scale(.99,1.015)}}
@keyframes pebletThinking{0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}26%{transform:translateX(-2%) rotate(-3deg)}58%{transform:translate(2%,-1%) rotate(3deg) scale(1.015)}78%{transform:translateY(1%) rotate(-1deg) scale(1.025,.98)}}
@keyframes pebletSurprise{0%,100%{transform:translateY(0) scale(1)}28%{transform:translateY(3%) scale(1.07,.9)}58%{transform:translateY(-7%) scale(.94,1.085)}78%{transform:translateY(0) scale(1.025,.98)}}
@keyframes pebletCheer{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}16%{transform:translateY(2%) scale(1.07,.91)}35%{transform:translateY(-12%) rotate(-4deg) scale(.95,1.07)}56%{transform:translateY(0) rotate(4deg) scale(1.04,.96)}73%{transform:translateY(-7%) rotate(-2deg) scale(.98,1.04)}88%{transform:translateY(0) rotate(1deg)}}
@keyframes pebletCuriousIdle{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}32%{transform:translateY(-1.5%) rotate(-1.2deg) scale(1.008,.994)}66%{transform:translateY(0) rotate(1.2deg) scale(.997,1.006)}}
@keyframes pebletWonderBreath{0%,100%{opacity:0;scale:.88;rotate:0deg}32%{opacity:.36;scale:1.04;rotate:-1deg}62%{opacity:.5;scale:1.08;rotate:1deg}82%{opacity:.2;scale:.98}}
@keyframes pebletObjectHello{0%,100%{translate:0 0;rotate:0deg;scale:1}30%{translate:0 -4px;rotate:-2deg;scale:1.025}62%{translate:0 1px;rotate:2deg;scale:.995}82%{translate:0 -2px;rotate:-1deg;scale:1.01}}
@keyframes pebletMote{0%,100%{opacity:0;transform:translate3d(0,16px,0) scale(.5)}18%{opacity:.62}52%{opacity:.9;transform:translate3d(calc(var(--motion-drift) * .55),-20px,0) scale(1)}84%{opacity:.28}100%{transform:translate3d(var(--motion-drift),-54px,0) scale(.65)}}

[data-motion-state="paused"] .motion-mote{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){body>main,.motion-land,.motion-expression,.motion-react-happy,.motion-react-think,.motion-react-surprise,.motion-react-cheer,.motion-character-idle,.motion-alive,.motion-alive::before,.motion-alive::after{animation:none!important}.motion-mote{display:none!important}.motion-land{outline:4px solid rgba(255,220,103,.82);outline-offset:3px}}
[data-motion="reduced"] body>main,[data-motion="reduced"] .motion-land,[data-motion="reduced"] .motion-expression,[data-motion="reduced"] .motion-react-happy,[data-motion="reduced"] .motion-react-think,[data-motion="reduced"] .motion-react-surprise,[data-motion="reduced"] .motion-react-cheer,[data-motion="reduced"] .motion-character-idle,[data-motion="reduced"] .motion-alive,[data-motion="reduced"] .motion-alive::before,[data-motion="reduced"] .motion-alive::after{animation:none!important}
[data-motion="reduced"] .motion-mote{display:none!important}
[data-motion="reduced"] .motion-land{outline:4px solid rgba(255,220,103,.82);outline-offset:3px}

/* Catch older scene ambience when the in-game motion preference is reduced. */
@media(prefers-reduced-motion:reduce){.sunbeam,.butterfly,.drifting-leaf,.firefly,.dust,.coin-glint,.steam,.flying-letter,.hotspot-glow,.pet-house-zzz i{animation:none!important;transition:none!important}.butterfly,.drifting-leaf,.flying-letter{display:none!important}}
[data-motion="reduced"] .sunbeam,[data-motion="reduced"] .butterfly,[data-motion="reduced"] .drifting-leaf,[data-motion="reduced"] .firefly,[data-motion="reduced"] .dust,[data-motion="reduced"] .coin-glint,[data-motion="reduced"] .steam,[data-motion="reduced"] .flying-letter,[data-motion="reduced"] .hotspot-glow,[data-motion="reduced"] .pet-house-zzz i{animation:none!important;transition:none!important}
[data-motion="reduced"] .butterfly,[data-motion="reduced"] .drifting-leaf,[data-motion="reduced"] .flying-letter{display:none!important}