/* Small loops sit over the artwork; the comic's text and framing stay still. */
.motion-item{pointer-events:none;transform-box:fill-box;transform-origin:center;opacity:0}
.motion-warmth{animation:comic-warmth 2.3s ease-in-out infinite;mix-blend-mode:screen}
.motion-flame{animation:comic-flame 1.7s ease-in-out infinite;transform-origin:50% 95%;mix-blend-mode:screen}
.motion-shine{animation:comic-shine 4.7s ease-in-out infinite;mix-blend-mode:screen}
.motion-glint{animation:comic-glint 4.7s ease-in-out infinite;mix-blend-mode:screen}
.motion-spark,.motion-mote{animation:comic-drift var(--duration,4s) ease-in-out infinite}
.motion-breeze{animation:comic-breeze 6.8s ease-in-out infinite}
.motion-paused .motion-item{animation-play-state:paused}
.still .motion-item{animation:none;opacity:0}
@keyframes comic-warmth{0%,100%{opacity:.12;transform:scale(.96)}38%{opacity:.34;transform:scale(1.025)}65%{opacity:.22;transform:scale(.99)}}
@keyframes comic-flame{0%,100%{opacity:.3;transform:scale(.98,.94) rotate(-2deg)}32%{opacity:.56;transform:scale(.93,1.05) rotate(2deg)}68%{opacity:.4;transform:scale(1.035,.98) rotate(-1deg)}}
@keyframes comic-shine{0%,24%,65%,100%{opacity:.03;transform:scale(.96)}42%{opacity:.28;transform:scale(1.02)}}
@keyframes comic-glint{0%,24%,65%,100%{opacity:0;transform:scale(.55) rotate(-5deg)}42%{opacity:.67;transform:scale(1) rotate(5deg)}}
@keyframes comic-drift{0%,100%{opacity:0;transform:translate(0,0)}18%{opacity:.06}42%{opacity:.65}80%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes comic-breeze{0%,100%{opacity:0;transform:translate(-9px,4px)}38%{opacity:.22}72%{opacity:0;transform:translate(10px,-4px)}}
@media(prefers-reduced-motion:reduce){.motion-item{animation:none!important;opacity:0!important}}