/* フレームごとに腕・足・道具の形が変わる。顔の画像反転は行わない。 */
.sprite{background-size:400% 200%;background-position:var(--frame-x,0%) var(--frame-y,0%);clip-path:inset(0 1% 0 1%)}
.swimmer{background-image:url('./assets/pool-motion.png');background-size:400% 200%;background-position:var(--frame-x,0%) var(--frame-y,0%)}
.gardener{background-image:url('./assets/flower-motion.png')}
.cyclist{background-image:none}
.bike-base{position:absolute;inset:0;background-image:url('./assets/bike-rig.png');background-size:200% 100%;background-position:left;z-index:3}
.bike-mechanism{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.rider-foot{position:absolute;width:22%;height:22%;background-image:url('./assets/bike-rig.png');background-size:200% 100%;background-position:right;pointer-events:none}
.rider-foot.far{z-index:2;filter:brightness(.9)}
.rider-foot.near{z-index:5}
.bike-near-leg{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.running .swimmer,.running .cyclist,.running .gardener{animation:none}
.spoke,.crank{display:none}
.traveler{width:clamp(170px,34%,290px);bottom:33px;right:calc(0% + var(--p) * 63%)}
.bike .traveler{bottom:40px}
.swim-spray{position:absolute;inset:0;pointer-events:none;display:none}
.pool .swim-spray{display:block}
.pool-front-water{display:none;pointer-events:none}
.pool .pool-front-water{display:block;position:absolute;left:0;right:0;top:var(--waterline,68%);bottom:0;z-index:4;background:linear-gradient(180deg,#87d0dbb8,#72c0cecf);border-top:2px solid #e8ffffb0}
.pool-front-water:before{content:"";position:absolute;left:0;right:0;top:-4px;height:6px;background:radial-gradient(ellipse at 50% 100%,#e9ffffa6 0 42%,transparent 48%) 0 0/38px 7px repeat-x}
.running.pool .pool-front-water:before{animation:surface-flow 2s linear infinite}
@keyframes surface-flow{to{background-position:38px 0}}
.pool .finish-post{z-index:5}
.swim-spray i{position:absolute;bottom:27%;left:23%;width:5px;height:9px;border-radius:60% 60% 70% 70%;background:#edffff;border:1px solid #d9ffff;opacity:0;--dx:-22px;--dy:-36px}
.swim-spray i:nth-child(2){left:28%;width:7px;height:11px;--dx:4px;--dy:-50px;animation-delay:.1s!important}
.swim-spray i:nth-child(3){left:32%;--dx:23px;--dy:-29px;animation-delay:.2s!important}
.swim-spray i:nth-child(4){left:18%;--dx:-34px;--dy:-23px;animation-delay:.32s!important}
.swim-spray i:nth-child(5){left:auto;right:17%;bottom:34%;--dx:23px;--dy:-32px;animation-delay:.65s!important}
.swim-spray i:nth-child(6){left:auto;right:13%;bottom:33%;--dx:39px;--dy:-21px;animation-delay:.76s!important}
.swim-spray i:nth-child(7){left:auto;right:23%;bottom:32%;--dx:8px;--dy:-42px;animation-delay:.86s!important}
.swim-spray i:nth-child(8){left:27%;width:4px;height:5px;--dx:-4px;--dy:-62px;animation-delay:.4s!important}
.running.pool .swim-spray i{animation:splatter 1.28s ease-out infinite}
@keyframes splatter{0%,12%{opacity:0;transform:translate(0,0) scale(.6)}18%{opacity:1}43%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(25deg)}67%{opacity:0;transform:translate(calc(var(--dx) * 1.2),6px) rotate(50deg)}100%{opacity:0}}
.splash{left:12%;bottom:19%;width:68%;height:9%}
.splash-two{left:23%;bottom:14%;width:78%}
.running.pool .splash{animation:swimming-wake 1.28s ease-out infinite}
@keyframes swimming-wake{0%{transform:translateX(0) scaleX(.8);opacity:.7}100%{transform:translateX(18px) scaleX(1.25);opacity:0}}
.running.bike .road-line{animation:road-passes-right 1.2s linear infinite}
@keyframes road-passes-right{from{background-position:0 0}to{background-position:63px 0}}
.bike .distant-hills{background:radial-gradient(ellipse at 35% 90%,#b8c997 0 28%,transparent 29%),radial-gradient(ellipse at 78% 95%,#c7d8aa 0 40%,transparent 41%);width:160%;left:-30%}
.running.bike .distant-hills{animation:hills-passes-right 12s linear infinite}
@keyframes hills-passes-right{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.garden-actor{width:clamp(210px,34%,280px);right:29%;bottom:53px}
.plant{left:21%;width:clamp(180px,31%,240px)}
.drops{left:9%;top:var(--spout-y,81%);width:32px;height:50px;opacity:0!important}
.pouring .drops{opacity:1!important}
.drops i{width:4px;height:10px;left:3px}
.drops i:nth-child(2){left:14px;top:0}
.drops i:nth-child(3){left:25px;top:0}
.pouring .drops i{animation:watering-stream .45s linear infinite}
@keyframes watering-stream{0%{opacity:0;transform:translate(0,0) rotate(15deg)}15%{opacity:.85}90%{opacity:.65}100%{opacity:0;transform:translate(-8px,var(--water-fall,36px)) rotate(15deg)}}
.calm .swim-spray i,.calm .drops{opacity:0!important}
@media(prefers-reduced-motion:reduce){.swim-spray i,.drops{opacity:0!important}}
@media(max-width:1050px){.traveler{width:35%}.garden-actor{width:230px;right:29%}.plant{left:18%;width:190px}}
@media(max-width:900px){.traveler{width:35%;right:calc(0% + var(--p) * 63%)}.garden-actor{width:210px;right:7%}.plant{width:185px;left:15%}}
@media(min-width:600px) and (max-width:900px){.scene{height:340px}.garden-actor{width:270px;right:25%}.plant{left:20%;width:230px;height:290px}.traveler{width:31%;bottom:35px}.bike .traveler{bottom:45px}}
@media(max-width:390px){.garden-actor{width:180px;right:9%}.plant{width:160px;left:12%}.traveler{width:43%;right:calc(-1% + var(--p) * 53%)}}