/* motion for the SVG scenes — all of it switches off for reduced-motion users */
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.tw { animation: tw 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tw { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.drift { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(14px); } }
.spin { animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.flame { animation: flick .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flick { from { transform: scale(1, 1); } to { transform: scale(.94, 1.08); } }
.spark { animation: rise 3s linear infinite; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }
.wave { animation: wave 6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.float { animation: float 5s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) {
  .tw, .drift, .spin, .flame, .spark, .wave, .float, .sway { animation: none !important; }
}