/* Yabu Archive — Meizan parade */
.yparade{position:fixed;left:0;right:0;bottom:0;height:0;overflow:visible;pointer-events:none;z-index:40;contain:layout style}
.yp{position:absolute;left:0;bottom:4px;pointer-events:none;will-change:transform;animation:yp-cross var(--yp-dur,20s) linear forwards;filter:drop-shadow(0 2px 2px rgba(80,50,20,.25))}
.yp__inner{width:100%;height:100%}
.yp--rtl .yp__inner{transform:scaleX(-1)}
@keyframes yp-cross{from{transform:translate3d(var(--yp-from),0,0)}to{transform:translate3d(var(--yp-to),0,0)}}
.yp svg{display:block;overflow:visible}
.yp .yp-a,.yp .yp-b,.yp .yp-arm,.yp .yp-wing,.yp .yp-bob,.yp .yp-kite{transform-box:fill-box}
/* walking */
.yp--walk .yp-a,.yp--march .yp-a{transform-origin:50% 0;animation:yp-leg .6s ease-in-out infinite alternate}
.yp--walk .yp-b,.yp--march .yp-b{transform-origin:50% 0;animation:yp-leg .6s ease-in-out infinite alternate-reverse}
.yp--walk .yp-bob,.yp--march .yp-bob{animation:yp-bob .3s ease-in-out infinite alternate}
.yp--walk .yp-arm{transform-origin:0 100%;animation:yp-arm 1.2s ease-in-out infinite alternate}
.yp--march .yp-bob{animation-duration:.42s}
.yp--march .yp-a,.yp--march .yp-b{animation-duration:.84s}
@keyframes yp-leg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes yp-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes yp-arm{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
/* stilts: big exaggerated strides */
.yp--stilts .yp-a,.yp--stilts .yp-b{animation-duration:.9s}
@keyframes yp-leg-big{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.yp--stilts .yp-a,.yp--stilts .yp-b{animation-name:yp-leg-big}
/* hopping */
.yp--hop .yp__inner>svg{animation:yp-hop .9s cubic-bezier(.3,.7,.4,1) infinite}
.yp--grasshopper .yp__inner>svg{animation-duration:.7s}
@keyframes yp-hop{0%,100%{transform:translateY(0) scaleY(.92)}12%{transform:translateY(0) scaleY(1.06)}45%{transform:translateY(-38%) rotate(-6deg)}80%{transform:translateY(0) scaleY(1)}}
.yp--hop .yp-a,.yp--hop .yp-b{transform-origin:50% 0;animation:yp-kick .9s ease-in-out infinite}
@keyframes yp-kick{0%,100%{transform:rotate(0)}30%{transform:rotate(18deg)}}
.yp--hop .yp-arm{transform-origin:0 100%;animation:yp-arm 1.8s ease-in-out infinite alternate}
.yp--leap .yp__inner{animation:yp-leap .8s cubic-bezier(.2,.8,.3,1)}
.yp--rtl.yp--leap .yp__inner{animation-name:yp-leap-r}
@keyframes yp-leap{0%{transform:translateY(0)}45%{transform:translateY(-140%) rotate(-20deg)}100%{transform:translateY(0)}}
@keyframes yp-leap-r{0%{transform:scaleX(-1) translateY(0)}45%{transform:scaleX(-1) translateY(-140%) rotate(-20deg)}100%{transform:scaleX(-1) translateY(0)}}
.yp--clickable{pointer-events:auto;cursor:pointer}
/* sailing */
.yp--sail .yp-bob{animation:yp-rock 2.4s ease-in-out infinite alternate}
.yp--sail .yp-arm{transform-origin:0 50%;animation:yp-net 3s ease-in-out infinite alternate}
@keyframes yp-rock{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-3px)}}
@keyframes yp-net{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
/* flutter + fly */
.yp--flutter .yp__inner>svg{animation:yp-float 2.6s ease-in-out infinite alternate}
.yp--flutter .yp-wing{transform-origin:100% 60%;animation:yp-flap .22s ease-in-out infinite alternate}
.yp--flutter .yp-wing--r{transform-origin:0 60%}
@keyframes yp-flap{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
@keyframes yp-float{0%{transform:translateY(0)}50%{transform:translateY(-34px) rotate(6deg)}100%{transform:translateY(-8px)}}
.yp--fly .yp__inner>svg{animation:yp-swoop 1.6s ease-in-out infinite alternate}
.yp--fly .yp-wing{transform-origin:40% 100%;animation:yp-wflap .18s linear infinite alternate}
@keyframes yp-wflap{from{transform:scaleY(1)}to{transform:scaleY(-.5)}}
@keyframes yp-swoop{from{transform:translateY(0)}to{transform:translateY(-22px)}}
.yp--kite .yp-kite{animation:yp-kite 2.2s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes yp-kite{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(-6px)}}
/* photographic cut-outs */
.yp__art{display:block;width:100%;height:100%}
.yp__art img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;user-select:none}
.yp--lumber .yp__art{transform-origin:50% 100%;animation:yp-lumber 1.6s ease-in-out infinite alternate}
@keyframes yp-lumber{0%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(0) translateY(-3px)}100%{transform:rotate(2.2deg) translateY(0)}}
.yp--walk .yp__art{transform-origin:50% 100%;animation:yp-waddle .5s ease-in-out infinite alternate}
@keyframes yp-waddle{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(3deg) translateY(-3px)}}
.yp--hop .yp__art{animation:yp-hop .9s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:50% 100%}
.yp--scamper .yp__art{transform-origin:50% 100%;animation:yp-scamper .28s linear infinite alternate}
@keyframes yp-scamper{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(5deg) translateY(-6px)}}
.yp--scuttle .yp__art{transform-origin:50% 100%;animation:yp-scuttle 1.4s steps(1) infinite}
@keyframes yp-scuttle{0%{transform:translateX(0) rotate(-4deg)}20%{transform:translateX(6px) rotate(3deg)}40%{transform:translateX(0) rotate(-3deg)}60%{transform:translateX(10px) rotate(4deg)}80%{transform:translateX(2px) rotate(0)}}
.yp--bound .yp__art{transform-origin:50% 100%;animation:yp-bound 1.05s cubic-bezier(.25,.8,.35,1) infinite}
@keyframes yp-bound{0%,100%{transform:translateY(0) scale(1.08,.9)}15%{transform:translateY(0) scale(.94,1.08)}50%{transform:translateY(-70%) rotate(-8deg)}85%{transform:translateY(0) scale(1,1)}}
.yparade-credits{position:fixed;left:172px;bottom:12px;z-index:41;max-width:min(420px,70vw);font:500 .7rem/1.45 system-ui,sans-serif;color:#5a2a1c;opacity:.75}
.yparade-credits summary{cursor:pointer;list-style:none;padding:.38em .8em;border:1px solid rgba(176,135,58,.5);border-radius:999px;background:rgba(255,250,240,.85);display:inline-block}
.yparade-credits summary::-webkit-details-marker{display:none}
.yparade-credits[open]{opacity:1}
.yparade-credits[open]>div{position:absolute;bottom:2.4em;left:0;width:min(420px,70vw);padding:.8em 1em;background:#fffaf0;border:1px solid rgba(176,135,58,.6);border-radius:10px;box-shadow:0 6px 24px rgba(80,50,20,.18)}
.yparade-credits a{color:#7a3a20}
@media (max-width:640px){.yparade-credits{left:56px}}
/* snow + toggle */
.yl-hero{position:relative}
.yparade-snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.yparade-toggle{position:fixed;left:12px;bottom:12px;z-index:41;display:inline-flex;align-items:center;gap:.45em;padding:.38em .8em;border:1px solid rgba(176,135,58,.7);border-radius:999px;background:rgba(255,250,240,.88);color:#5a2a1c;font:600 .72rem/1 system-ui,sans-serif;letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(4px);opacity:.75;transition:opacity .2s}
.yparade-toggle:hover,.yparade-toggle:focus-visible{opacity:1}
.yparade-toggle:focus-visible{outline:2px solid #6b5aa6;outline-offset:2px}
.yparade-paused .yp{display:none}
@media (max-width:640px){.yparade-toggle__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.yparade-toggle{padding:.45em .6em}}
@media (prefers-reduced-motion:reduce){.yparade,.yparade-snow,.yparade-toggle,.yparade-credits{display:none!important}}
@media print{.yparade,.yparade-snow,.yparade-toggle,.yparade-credits{display:none!important}}
/* monkey: scamper with an occasional somersault */
.yp--monkey .yp__inner>svg{transform-origin:50% 60%;animation:yp-flip 3.2s cubic-bezier(.4,.1,.3,1) infinite}
@keyframes yp-flip{0%,62%{transform:translateY(0) rotate(0)}74%{transform:translateY(-55%) rotate(-180deg)}86%{transform:translateY(0) rotate(-360deg)}100%{transform:translateY(0) rotate(-360deg)}}