/* Sparse traffic: one quick downward pass, followed by a longer empty interval. */
.traffic-car{animation:sparse-traffic var(--traffic-cycle) var(--traffic-phase) linear infinite both;opacity:0}
.traffic-car img{transform:none}
@keyframes sparse-traffic{0%{opacity:1;transform:translate3d(0,-180px,0)}8%{opacity:1;transform:translate3d(0,calc(var(--road-height) + 180px),0)}8.01%,100%{opacity:0;transform:translate3d(0,calc(var(--road-height) + 180px),0)}}
.impact-car{animation:fast-impact .38s linear both}
@keyframes fast-impact{0%{transform:translate3d(0,-180px,0)}50%{transform:translate3d(0,calc(var(--road-height) * .55 - 80px),0)}100%{transform:translate3d(0,calc(var(--road-height) + 180px),0)}}

/* All four images share the same canvas and body registration. */
.road-chicken{width:112px;height:112px;transition:left .48s cubic-bezier(.22,.8,.25,1)}
.bird-frames{position:absolute;inset:0;transform-origin:50% 90%}
.bird-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none}
.bird-idle{opacity:1}
.road-chicken .chicken-shadow{width:55px;height:12px;left:28px;bottom:8px;transition:opacity .12s}
.walking .bird-idle{opacity:0}
.walking .bird-frames{animation:walking-bob .24s ease-in-out infinite}
.walking .bird-walk-a{animation:walk-frame-a .24s steps(1,end) infinite}
.walking .bird-walk-b{animation:walk-frame-b .24s steps(1,end) infinite}
.walking .chicken-shadow{animation:walking-shadow .24s ease-in-out infinite}
@keyframes walk-frame-a{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes walk-frame-b{0%,49.99%{opacity:0}50%,100%{opacity:1}}
@keyframes walking-bob{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-3px,0) rotate(1deg)}}
@keyframes walking-shadow{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.85);opacity:.4}}
.road-chicken.crashed .bird-frames{animation:none}
.road-chicken.crashed .bird-frame{opacity:0;animation:none}
.road-chicken.crashed .bird-dead{opacity:1;animation:dead-splat .17s ease-out both}
@keyframes dead-splat{from{transform:scale(1.1,.72)}to{transform:scale(1,1)}}
.feather-burst{position:absolute;left:50%;top:58%;width:0;height:0;pointer-events:none}
.flying-feather{position:absolute;width:var(--size);height:var(--size);left:calc(var(--size) / -2);top:calc(var(--size) / -2);object-fit:contain;will-change:transform,opacity;animation:feather-flight var(--flight) var(--delay) cubic-bezier(.2,.65,.35,1) both}
@keyframes feather-flight{0%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.55)}8%{opacity:1}42%{opacity:1;transform:translate3d(calc(var(--fx) * .62),var(--fy),0) rotate(calc(var(--spin) * .55)) scale(1)}78%{opacity:.85}100%{opacity:0;transform:translate3d(var(--fx),var(--fall),0) rotate(var(--spin)) scale(.8)}}

/* A solid striped roadblock drops into place, compresses and settles. */
.road-barrier{top:31%;left:5px;right:5px;height:56px;border:0;background:none;transform:none;transition:none;opacity:0;z-index:6;pointer-events:none}
.road-lane.cleared .road-barrier,.road-lane.dropping .road-barrier{opacity:1;transform:none}
.barrier-body{position:absolute;inset:0;transform-origin:center 43px}
.barrier-face{position:absolute;left:4px;right:4px;top:12px;height:27px;border:3px solid #071322;border-radius:4px;background:repeating-linear-gradient(125deg,#daeaf1 0 13px,#2882b7 13px 26px);z-index:3}
.barrier-top{position:absolute;left:7px;right:7px;top:6px;height:11px;border:3px solid #071322;border-bottom:0;border-radius:5px 5px 0 0;background:#a0c5d8;z-index:2;transform:skewX(-9deg)}
.barrier-post{position:absolute;top:30px;width:10px;height:17px;background:#6a8aa1;border:3px solid #071322;z-index:1}
.barrier-post.left{left:14px}.barrier-post.right{right:14px}
.barrier-foot{position:absolute;top:43px;width:30px;height:9px;border:3px solid #071322;border-radius:3px;background:#4c6579;z-index:4}
.barrier-foot.left{left:4px}.barrier-foot.right{right:4px}
.barrier-reflector{position:absolute;top:21px;width:8px;height:7px;background:#ffe592;border:2px solid #101a29;border-radius:2px;z-index:4}
.barrier-reflector.left{left:17px}.barrier-reflector.right{right:17px}
.barrier-shadow{position:absolute;left:0;right:0;top:44px;height:11px;background:#030b1470;border-radius:50%;opacity:.55}
.dropping .barrier-body{animation:roadblock-drop .44s linear both}
.dropping .barrier-shadow{animation:roadblock-shadow .44s linear both}
@keyframes roadblock-drop{0%{transform:translate3d(0,calc(var(--road-height) * -1),0) rotate(-8deg) scale(1.06)}48%{transform:translate3d(0,-120px,0) rotate(-4deg)}72%{transform:translate3d(0,0,0) rotate(1deg) scale(1.06,.78)}86%{transform:translate3d(0,-8px,0) rotate(-1deg) scale(.98,1.03)}100%{transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes roadblock-shadow{0%{opacity:.05;transform:scale(.25)}65%{opacity:.25;transform:scale(.75)}78%{opacity:.65;transform:scale(1.13)}100%{opacity:.55;transform:scale(1)}}
.barrier-dust{position:absolute;left:0;right:0;top:43px;height:18px}
.barrier-dust i{position:absolute;left:40%;top:0;width:20px;height:9px;background:#a9c9d399;border-radius:50%;opacity:0}
.dropping .barrier-dust i{animation:roadblock-dust .44s linear both}
.barrier-dust i:nth-child(1){--dust-x:-34px}.barrier-dust i:nth-child(2){--dust-x:29px}.barrier-dust i:nth-child(3){--dust-x:7px}
@keyframes roadblock-dust{0%,64%{opacity:0;transform:translateX(0) scale(.4)}76%{opacity:.7}100%{opacity:0;transform:translateX(var(--dust-x)) scale(1.4)}}
@media(max-width:650px){.road-chicken{width:104px;height:104px}.road-chicken .chicken-shadow{left:25px;width:53px;bottom:7px}}
@media(prefers-reduced-motion:reduce){.road-chicken{transition:none}.traffic-car{animation:none;opacity:0}.impact-car{display:none}.walking .bird-frame,.walking .bird-frames,.walking .chicken-shadow,.road-chicken.crashed .bird-dead,.dropping .barrier-body,.dropping .barrier-shadow,.dropping .barrier-dust i{animation:none}.walking .bird-idle{opacity:1}.walking .bird-walk-a,.walking .bird-walk-b{opacity:0}.flying-feather{display:none}}