/* Slurp! logo motion: letters hop in a left-to-right wave, the dumpling bounces
   and the chopsticks pinch. Runs once on load and again on hover. The letters'
   tilt lives on an inner <g>, so the animated outer groups carry no SVG transform. */
.logo .l, .logo .dump, .logo .sticks { transform-box: fill-box; transform-origin: 50% 100%; }
.logo.hop .l { animation: slurp-hop .52s cubic-bezier(.3, 1.6, .5, 1) both; }
.logo.hop .l2 { animation-delay: .06s; } .logo.hop .l3 { animation-delay: .12s; }
.logo.hop .l4 { animation-delay: .18s; } .logo.hop .l5 { animation-delay: .24s; }
.logo.hop .dump { animation: slurp-dump .7s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
.logo.hop .sticks { animation: slurp-pinch .7s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes slurp-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -9px; } }
@keyframes slurp-dump { 0%, 100% { translate: 0 0; scale: 1; } 35% { translate: 0 -16px; scale: 1.06 .94; } 70% { scale: 1.08 .9; translate: 0 0; } }
@keyframes slurp-pinch { 0%, 100% { translate: 0 0; } 35% { translate: 0 -16px; } }
@media (prefers-reduced-motion: reduce) { .logo.hop * { animation: none !important; } }