/* Drunk walking, tripping and puking (drunk_fx.py, app.js drunkWalk / trip / runPuke / visitorDrunk).
   --stg is the pen profile's stagger: 0 walks straight (sober, or one drink), 15 just buzzed, 100 sloshed.
   --dir is 1 facing right, -1 facing left, so it falls and leans the way it's facing. */
.walker{--dir:1}
.walker.face-left{--dir:-1}

/* walking drunk: a lurching sway and a sideways weave that both grow with --stg (the zigzag path is app.js) */
.walker.drunk.walking .pengob,.visitor.drunk.walking svg{
 animation:drunkwalk calc(.62s - var(--stg,0) * .0018s) ease-in-out infinite alternate}
.visitor.drunk svg{animation:drunksway calc(1.5s - var(--stg,0) * .005s) ease-in-out infinite alternate}
@keyframes drunkwalk{
 from{rotate:calc(-4deg - var(--stg,0) * .12deg);translate:calc(var(--stg,0) * -.06px) 0}
 50%{translate:0 calc(var(--stg,0) * -.03px)}
 to{rotate:calc(4deg + var(--stg,0) * .12deg);translate:calc(var(--stg,0) * .06px) 0}}
@keyframes drunksway{from{rotate:calc(var(--stg,0) * -.1deg)}to{rotate:calc(var(--stg,0) * .1deg)}}

/* a trip: stumbles forward, falls flat on its face, lies there, gets back up */
#walker.tripping .pengob,.crowd .visitor.tripping.tripping svg{animation:trip var(--trip-s,1.7s) ease-in-out 1 both}
@keyframes trip{
 0%{rotate:0deg;translate:0 0}
 12%{rotate:calc(var(--dir) * 20deg);translate:calc(var(--dir) * 4px) 0}
 20%{rotate:calc(var(--dir) * -10deg);translate:calc(var(--dir) * 7px) -3px}
 36%{rotate:calc(var(--dir) * 86deg);translate:calc(var(--dir) * 16px) 4px}
 42%{rotate:calc(var(--dir) * 80deg);translate:calc(var(--dir) * 16px) 1px}
 48%,74%{rotate:calc(var(--dir) * 86deg);translate:calc(var(--dir) * 16px) 4px}
 88%{rotate:calc(var(--dir) * 25deg);translate:calc(var(--dir) * 7px) 0}
 100%{rotate:0deg;translate:0 0}}
/* a puff of dust where it lands */
#walker.tripping::after,.crowd .visitor.tripping::after{content:"";position:absolute;bottom:-2px;left:calc(50% + var(--dir) * 18px);
 width:44px;height:16px;margin-left:-22px;pointer-events:none;opacity:0;
 background:radial-gradient(circle at 25% 60%,#d8cdb0 0 5px,transparent 6px),radial-gradient(circle at 50% 45%,#e6dcc2 0 7px,transparent 8px),
  radial-gradient(circle at 76% 62%,#d8cdb0 0 5px,transparent 6px);
 animation:dust var(--trip-s,1.7s) ease-out 1 both}
@keyframes dust{0%,32%{opacity:0;scale:.4}40%{opacity:.95;scale:1}70%{opacity:.5;scale:1.3}100%{opacity:0;scale:1.5}}

/* puking: doubles over and heaves, a green stream comes out of its mouth, then a puddle on the floor */
#walker.puking .pengob,.crowd .visitor.puking svg{animation:heave var(--puke-s,.5s) ease-in-out infinite alternate}
@keyframes heave{from{rotate:calc(var(--dir) * 14deg);translate:calc(var(--dir) * 2px) 2px}
 to{rotate:calc(var(--dir) * 26deg);translate:calc(var(--dir) * 4px) 4px;scale:1.03 .97}}
.spew{position:absolute;left:var(--held-x,36px);bottom:calc(var(--held-y,26px) - 24px);width:30px;height:30px;z-index:2;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2,3 q14,-2 20,10 q4,8 2,15 l-5,0 q1,-7 -3,-12 q-5,-6 -14,-8 Z' fill='%239cc43a' stroke='%231d1b18' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='21' r='2' fill='%239cc43a' stroke='%231d1b18' stroke-width='1'/%3E%3Ccircle cx='15' cy='27' r='1.6' fill='%239cc43a' stroke='%231d1b18' stroke-width='1'/%3E%3Ccircle cx='12' cy='7' r='1.2' fill='%23c08a3e'/%3E%3C/svg%3E") center/contain no-repeat;
 transform-origin:0 0;animation:spew .18s ease-in-out infinite alternate}
.walker.face-left .spew{left:auto;right:var(--held-x,36px);scale:-1 1;transform-origin:100% 0}
@keyframes spew{from{rotate:-6deg}to{rotate:8deg}}
.puddle{position:absolute;width:48px;height:15px;margin-left:-24px;z-index:1;pointer-events:none;transform-origin:50% 100%;
 animation:splat .35s ease-out 1 both;transition:opacity 2s}
.puddle svg{display:block;width:100%;height:100%}
.puddle.drying{opacity:0}
@keyframes splat{from{scale:.2 .6}70%{scale:1.15 1}to{scale:1 1}}

@media (prefers-reduced-motion:reduce){
 .walker.drunk .pengob,#walker.tripping .pengob,#walker.puking .pengob,.visitor.drunk svg,.crowd .visitor.tripping svg,.crowd .visitor.puking svg,
 .spew,.puddle,#walker.tripping::after,.crowd .visitor.tripping::after{animation:none!important}}