/* Each illustrated category keeps its own rhythm; artwork moves inside a fixed card. */
.comics-card .comic-word{animation:category-pow 3.6s ease-in-out infinite;transform-origin:50% 55%}
.comics-card .comic-word:before{animation:category-burst 3.6s ease-in-out infinite}
.cards-card .card-back{animation:category-deck-back 4.6s ease-in-out infinite}
.cards-card .card-front{animation:category-deck-front 4.6s ease-in-out infinite}
.games-card .dice-art{animation:category-die-shake 3.2s ease-in-out infinite;transform-origin:50% 65%}
.games-card .dice-spark{animation:category-spark 3s ease-in-out infinite}
.collectible-art>span{animation:category-collect 5.2s ease-in-out infinite}
#demo-site .collectible-art img{animation:category-shelf-pan 14s ease-in-out infinite alternate}
@keyframes category-pow{
  0%,38%,100%{translate:0 0;rotate:0deg;scale:1}
  48%{translate:0 -8px;rotate:5deg;scale:1.08}
  58%{translate:0 2px;rotate:-3deg;scale:.98}
  68%{translate:0 -3px;rotate:1deg;scale:1.025}
  78%{translate:0 0;rotate:0deg;scale:1}
}
@keyframes category-burst{0%,38%,78%,100%{rotate:0deg;scale:1}48%{rotate:-7deg;scale:1.12}58%{rotate:3deg;scale:.98}}
@keyframes category-deck-back{0%,100%{translate:0 0;rotate:0deg}50%{translate:-9px -5px;rotate:-9deg}}
@keyframes category-deck-front{0%,100%{translate:0 0;rotate:0deg}50%{translate:9px -10px;rotate:7deg}}
/* A gathered-up die, a quick rattle in the palm, then a ready-to-roll hold. */
@keyframes category-die-shake{
  0%,15%,100%{transform:perspective(450px) translate(0,0) rotateX(0deg) rotateY(0deg) rotateZ(12deg) scale(1)}
  23%{transform:perspective(450px) translate(-3px,-7px) rotateX(9deg) rotateY(-9deg) rotateZ(3deg) scale(1.035)}
  28%{transform:perspective(450px) translate(7px,-3px) rotateX(-7deg) rotateY(12deg) rotateZ(22deg) scale(1.02)}
  33%{transform:perspective(450px) translate(-8px,-10px) rotateX(11deg) rotateY(-14deg) rotateZ(-1deg) scale(1.045)}
  38%{transform:perspective(450px) translate(8px,-4px) rotateX(-9deg) rotateY(11deg) rotateZ(24deg) scale(1.02)}
  43%{transform:perspective(450px) translate(-6px,-12px) rotateX(13deg) rotateY(-12deg) rotateZ(1deg) scale(1.05)}
  48%{transform:perspective(450px) translate(7px,-5px) rotateX(-8deg) rotateY(14deg) rotateZ(23deg) scale(1.025)}
  53%{transform:perspective(450px) translate(-7px,-10px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg) scale(1.04)}
  58%{transform:perspective(450px) translate(5px,-6px) rotateX(-5deg) rotateY(8deg) rotateZ(20deg) scale(1.03)}
  65%,75%{transform:perspective(450px) translate(1px,-9px) rotateX(6deg) rotateY(-4deg) rotateZ(9deg) scale(1.04)}
  87%{transform:perspective(450px) translate(0,1px) rotateX(-2deg) rotateY(0deg) rotateZ(13deg) scale(.995)}
}
@keyframes category-spark{0%,100%{rotate:0deg;scale:.86;opacity:.7}50%{rotate:90deg;scale:1.08;opacity:1}}
@keyframes category-collect{0%,100%{translate:0 2px;rotate:-1deg}50%{translate:0 -7px;rotate:3deg}}
@keyframes category-shelf-pan{from{transform:scale(1.5) translate(-3%,1%)}to{transform:scale(1.6) translate(3%,-2%)}}
@media(prefers-reduced-motion:reduce){.category-art *,.category-art *:before,.category-art *:after{animation:none!important}}