/* Chapter 6: Pippi's balloon ride. The world below slides past in legs (garden, town, farms, cloud, church),
   the balloon sways and its burner flickers. Close-ups: lift-off, steering by height, the farms from above,
   the parachute, the cloud and the weathercock. Everything stops with the Motion setting (css/animations.css). */

@keyframes blDrift{0%{transform:translateX(0)}100%{transform:translateX(-160px)}}
@keyframes blGeese{0%{transform:translate(1700px,160px)}100%{transform:translate(-200px,90px)}}
@keyframes blSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes blFire{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(1.25);opacity:.8}}
@keyframes blPlait{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes blWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
@keyframes blSwing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes blPuff{0%{transform:translate(0,0);opacity:0}25%{opacity:.85}100%{transform:translate(-40px,-30px);opacity:0}}
@keyframes blKite{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(6px,-8px) rotate(4deg)}}
@keyframes blTail{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-1)}}
@keyframes blSails{to{transform:rotate(360deg)}}
@keyframes blPennant{0%,100%{transform:scaleY(1) skewY(0)}50%{transform:scaleY(.8) skewY(4deg)}}
@keyframes blCheer{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes blCrawl{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@keyframes blCane{0%,100%{transform:rotate(0)}50%{transform:rotate(-20deg)}}
@keyframes blRise{0%{transform:translateY(260px)}100%{transform:translateY(0)}}

#sc-balloon .bl-puffcloud{animation:blDrift 48s ease-in-out infinite alternate}
#sc-balloon .bl-puffcloud.b{animation-duration:62s;animation-direction:alternate-reverse}
#sc-balloon .bl-puffcloud.c{animation-duration:78s}
@keyframes blSmoke{0%{transform:translate(0,0) scale(.8);opacity:.9}100%{transform:translate(12px,-34px) scale(1.5);opacity:0}}
@keyframes blScarf{0%,100%{transform:skewY(0)}50%{transform:skewY(-8deg)}}
@keyframes blPeck{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(0)}90%{transform:rotate(-14deg)}}
@keyframes blFrost{0%,100%{opacity:0}50%{opacity:1}}
#sc-balloon .bl-chimsmoke circle{transform-box:fill-box;transform-origin:50% 50%;animation:blSmoke 4s ease-out infinite}
#sc-balloon .bl-chimsmoke .b{animation-delay:-1.3s} #sc-balloon .bl-chimsmoke .c{animation-delay:-2.6s}
#sc-balloon .bl-scarf{transform-box:fill-box;transform-origin:0 0;animation:blScarf 2s ease-in-out infinite}
#sc-balloon .bl-peck{transform-box:fill-box;transform-origin:50% 100%;animation:blPeck 3s ease-in-out infinite}
#sc-balloon .bl-peck.b{animation-delay:-1.4s}
#sc-balloon .bl-frost path{animation:blFrost 3s ease-in-out infinite}
#sc-balloon .bl-frost .b{animation-delay:-1.5s}
#sc-balloon .bl-geese{transform:translate(-300px,-300px);animation:blGeese 22s linear infinite}
#bl-balloon .bl-sway{transform-box:view-box;transform-origin:560px 40px;animation:blSway 6s ease-in-out infinite}
#bl-balloon .bl-fire{transform-box:fill-box;transform-origin:50% 100%;animation:blFire .5s ease-in-out infinite}
#bl-balloon .bl-plait{transform-box:fill-box;animation:blPlait 1.2s ease-in-out infinite}
#bl-balloon .bl-plait.l{transform-origin:100% 50%} #bl-balloon .bl-plait.r{transform-origin:0 50%;animation-delay:-.6s}
#bl-balloon .bl-wave{transform-box:view-box;transform-origin:612px 466px;animation:blWave 1.1s ease-in-out infinite}
#bl-balloon .bl-swing{transform-box:view-box;transform-origin:640px 400px;animation:blSwing 2.4s ease-in-out infinite}
#sc-balloon .bl-puff{animation:blPuff 3.6s ease-out infinite}
#sc-balloon .bl-kitefly{transform-box:view-box;transform-origin:1440px 440px;animation:blKite 3s ease-in-out infinite}
#sc-balloon .bl-tail{transform-box:fill-box;transform-origin:0 50%;animation:blTail 1.4s ease-in-out infinite}
#sc-balloon .bl-sails{animation:blSails 8s linear infinite}
#sc-balloon .bl-pennant{transform-box:fill-box;transform-origin:0 50%;animation:blPennant .9s ease-in-out infinite}
#sc-balloon .bl-cheer{animation:blCheer .8s ease-in-out infinite}
#sc-balloon .bl-crawl{animation:blCrawl 4s ease-in-out infinite}
#sc-balloon .bl-cane{transform-box:view-box;transform-origin:954px 706px;animation:blCane 2.4s ease-in-out infinite}
/* the flight: the world below slides past, the garden drops away, and at the end the balloon lands */
#bl-world{transition:transform 5s ease-in-out}
#sc-balloon.bl-farms #bl-world{transform:translateX(-1600px)}
#sc-balloon.bl-cloud #bl-world{transform:translateX(-2600px)}
#sc-balloon.bl-church #bl-world{transform:translateX(-4000px)}
/* Kling and Klang ride after the balloon: they stay below it while the world slides past */
@keyframes blPedal{0%,100%{transform:translate(0,0)}25%{transform:translate(-30px,-2px)}50%{transform:translate(-50px,0)}75%{transform:translate(-20px,-2px)}}
@keyframes blSpin{to{transform:rotate(360deg)}}
#bl-ride{transform:translate(960px,700px);transition:transform 5s ease-in-out}
#sc-balloon.bl-farms #bl-ride{transform:translate(580px,784px)}
#sc-balloon #bl-ride .bl-pedal{animation:blPedal 5s ease-in-out infinite}
#sc-balloon #bl-ride .bl-spin{transform-box:fill-box;transform-origin:center;animation:blSpin .7s linear infinite}
#bl-garden{transition:transform 5s ease-in}
#sc-balloon.bl-up #bl-garden{transform:translateY(940px)}
#bl-balloon{transition:transform 4s ease-in-out}
#sc-balloon.bl-landed #bl-balloon{transform:translate(-220px,250px)}
#bl-balloon .bl-takeoff{animation:blRise 5s ease-in-out}
#bl-fog,#bl-fog2{pointer-events:none}

/* ---------- close-ups ---------- */
.lift6-svg,.winds6-svg,.cloud6-svg{width:100%;max-width:340px;height:auto;display:block;margin:6px auto 0;border-radius:8px}
.wh6.on{background:var(--amber);color:#24120a}
.side6{display:flex;gap:12px;align-items:center}
.side6 svg{width:70px;height:auto;flex:0 0 auto}
.side6 p{margin:0}
.map6-svg{width:100%;max-width:380px;height:auto;display:block;margin:0 auto;border-radius:8px}
.map6-svg .fm6{cursor:pointer}
.map6-svg .fm6:hover rect{fill:rgba(255,255,255,.25)}
.vane6-svg{width:100%;max-width:280px;height:auto;display:block;margin:6px auto 0}