/* Only the image moves. Click its adjacent mascot control to pause all cats.
   Motion starts only when the preference controller is ready. */
.kitty-motion{transform-origin:50% 78%;backface-visibility:hidden}
.kitty-toggle{display:inline-flex;align-items:center;justify-content:center;border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;color:inherit;cursor:pointer;flex:none;min-height:0;line-height:1;border-radius:12px}
.kitty-toggle:hover,.kitty-toggle:active{background:transparent!important;box-shadow:none!important;transform:none!important}
.kitty-toggle:focus-visible{outline:2px solid #555;outline-offset:4px}
.kitty-toggle:disabled{opacity:1;cursor:default}
.kitty-toggle img{display:block;pointer-events:none}
.brand .brand-name{text-decoration:none;color:inherit}
.demo-sidebar>.kitty-toggle{width:44px;height:44px;margin-left:7px}
@media(prefers-reduced-motion:no-preference){
  html[data-kitty-motion] .kitty-motion{animation:kitty-bounce 2.6s ease-in-out infinite}
  html[data-kitty-motion="paused"] .kitty-motion{animation-play-state:paused}
  html[data-kitty-motion="playing"] .motion-revealed{animation:surface-reveal .65s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes kitty-bounce{
  0%,100%{transform:translateY(0) rotate(-2deg) scale(1.03,.97)}
  25%{transform:translateY(-22%) rotate(5deg) scale(.98,1.03)}
  50%{transform:translateY(0) rotate(1deg) scale(1.04,.96)}
  75%{transform:translateY(-16%) rotate(-5deg) scale(.99,1.02)}
}
@keyframes surface-reveal{from{opacity:.35;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
/* A moving white reflection keeps the existing solid button colours. */
:is(.button,.button-link,button):not(.kitty-toggle):not(.cl-userButtonTrigger){position:relative;overflow:hidden;isolation:isolate}
:is(.button,.button-link,button):not(.kitty-toggle):not(.cl-userButtonTrigger)::after{content:"";position:absolute;inset:-55% auto -55% -70%;width:38%;background:linear-gradient(90deg,transparent,#ffffff5c,transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  html[data-kitty-motion="playing"] :is(.button,.button-link,button):not(.kitty-toggle):not(:disabled):not(.cl-userButtonTrigger):is(:hover,:focus-visible)::after{animation:button-gloss .7s ease-out}
}
@keyframes button-gloss{0%{left:-70%;opacity:0}15%{opacity:1}100%{left:135%;opacity:0}}
@media(prefers-reduced-motion:reduce){.kitty-motion,.motion-revealed{animation:none!important;transform:none!important}:is(.button,.button-link,button)::after{display:none}}