/* Chapter 4: winter at Villa Villekulla. Close-ups: the tracks in the snow, the thermometers, the snow fort,
   the icy steps, keeping Annika warm, and the snowball throw. Every moving part stops with the Motion setting. */
.dialog.who-kling .who,.dialog.who-klang .who{color:#9fc3ff} .dialog.who-kling,.dialog.who-klang{border-left-color:#9fc3ff}

/* close-ups */
.wt-tracksvg,.wt-thermosvg,.wt-fortsvg,.wt-throwsvg{width:100%;height:auto;display:block;margin:0 auto;border-radius:6px}
.wt-tracksvg{max-width:520px} .wt-thermosvg{max-width:520px} .wt-fortsvg{max-width:460px} .wt-throwsvg{max-width:560px}
.wt-trail{cursor:pointer}
.wt-trail:hover rect,.wt-trail:focus rect{fill:rgba(255,138,61,.15)}
.wt-trail:focus{outline:none}
.wt-book{background:#fffaf0;color:#1f2a44;border-radius:4px;padding:10px 14px;font-size:14px;margin-top:10px}
.wt-spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.wt-spots .btn{padding:8px 6px;font-size:11px;letter-spacing:.02em;text-transform:none;line-height:1.25}
.wt-ang.on{background:var(--amber);color:#24120a}
@keyframes wtDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.wt-arc{animation:wtDraw .9s ease-out}
@media (max-width:520px){.wt-spots{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the snowy garden comes alive ---------- */
@keyframes wtFall{from{transform:translateY(-950px)}to{transform:translateY(950px)}}
@keyframes wtPuff{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.8}100%{transform:translateY(-70px) scale(1.5);opacity:0}}
@keyframes wtHop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-8px)}80%{transform:translateY(0)}}
@keyframes wtShiver{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
@keyframes wtStamp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wtScarf{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes wtLight{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes wtNod{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-4deg)}90%{transform:rotate(2deg)}}
@keyframes wtPeek{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wtPlait{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
@keyframes wtWave{0%,100%{transform:skewY(0)}50%{transform:skewY(-10deg)}}
@keyframes wtFlyA{0%{transform:translate(560px,700px)}50%{transform:translate(920px,470px)}100%{transform:translate(1300px,690px)}}
@keyframes wtFlyB{0%{transform:translate(1300px,640px)}50%{transform:translate(900px,430px)}100%{transform:translate(520px,720px)}}
@keyframes wtFlyC{0%{transform:translate(470px,710px)}50%{transform:translate(1050px,460px)}100%{transform:translate(1440px,660px)}}

.wt-flake{animation:wtFall 10s linear infinite}
.wt-puff{transform-box:fill-box;transform-origin:50% 50%;animation:wtPuff 4s ease-out infinite}
.wt-puff.b{animation-delay:-1.3s} .wt-puff.c{animation-delay:-2.6s}
.wt-hop{transform-box:fill-box;animation:wtHop 2.4s ease-in-out infinite}
.wt-hop.b{animation-delay:-1.1s}
.wt-shiver{animation:wtShiver .18s linear infinite}
.wt-stamp{animation:wtStamp 1.6s ease-in-out infinite}
.wt-stamp.b{animation-delay:-.8s}
.wt-scarf{transform-box:fill-box;transform-origin:0 0;animation:wtScarf 3s ease-in-out infinite}
.wt-light{animation:wtLight 1.5s ease-in-out infinite}
.wt-nod use{transform-box:fill-box;transform-origin:30% 100%;animation:wtNod 5s ease-in-out infinite}
.wt-peek{animation:wtPeek 2s ease-in-out infinite}
#wt-pippi .wt-plait{transform-box:fill-box;transform-origin:100% 50%;animation:wtPlait 1.6s ease-in-out infinite}
#wt-pippi .wt-plait.b{transform-origin:0 50%;animation-direction:reverse}
.wt-wave{transform-box:fill-box;transform-origin:0 50%;animation:wtWave 1.2s ease-in-out infinite}
.wt-fly.a{animation:wtFlyA 1.6s ease-in-out infinite}
.wt-fly.b{animation:wtFlyB 1.9s ease-in-out infinite;animation-delay:-.6s}
.wt-fly.c{animation:wtFlyC 2.2s ease-in-out infinite;animation-delay:-1.2s}

/* ---------- where everybody is (a class on the scene for each stage) ---------- */
/* the sledge waits in front of the veranda until the steps are safe; then it stands behind our fort */
#wt-team{transform:translate(70px,-105px)}
#sc-winter.wt-steps #wt-team{transform:none}
/* at three o'clock the children hide behind our fort; once the fight is won they pop up and throw */
#sc-winter.wt-ready #wt-ta{transform:translate(-167px,50px)}
#sc-winter.wt-ready #wt-pippi{transform:translate(-178px,30px)}
/* Pippi's giant snowball ends up on top of the policemen's fort */
#wt-bigball{transform-box:fill-box;transform-origin:50% 50%}
#sc-winter.wt-won #wt-bigball{transform:translate(440px,-20px)}

/* ---------- the moves ---------- */
/* the horse walks along the veranda and down the salted steps (after the close-up has closed),
   turns round, walks to the sledge, and pulls it behind our fort */
@keyframes wtDown{0%{transform:none}40%{transform:translate(190px,0)}55%{transform:translate(225px,11px)}65%{transform:translate(255px,30px)}
  75%{transform:translate(285px,50px)}85%{transform:translate(315px,72px)}97%{transform:translate(343px,91px);opacity:1}100%{transform:translate(345px,93px);opacity:0}}
@keyframes wtTurn{0%{transform:translate(387px,0);opacity:0}10%{opacity:1}25%{transform:translate(290px,-4px)}50%{transform:translate(194px,0)}75%{transform:translate(97px,-4px)}100%{transform:none;opacity:1}}
@keyframes wtPull{0%{transform:translate(70px,-105px)}25%{transform:translate(52px,-76px)}50%{transform:translate(35px,-55px)}75%{transform:translate(17px,-24px)}100%{transform:none}}
#sc-winter.wt-walk #wt-vhorse{display:inline!important}
#sc-winter.wt-walk #wt-vwalk{animation:wtDown 2.4s linear 2.2s both}
#sc-winter.wt-walk #wt-ghorse{animation:wtTurn 1.8s linear 4.6s both}
#sc-winter.wt-walk #wt-team{animation:wtPull 2.2s ease-in-out 6.4s both}
/* its legs walk while it moves: each leg swings from the hip, diagonal pairs half a step apart. The legs live in the
   shared drawing (#wtHorseShape, shown with <use>), which page selectors can't reach, so the two horses pass the
   animation down as inherited custom properties: its name (none when standing still), when to start, and how
   many steps (on the veranda and down the steps; then back to the sledge and pulling it). */
@keyframes wtLegA{0%,100%{transform:rotate(0)}25%{transform:rotate(22deg)}75%{transform:rotate(-22deg)}}
@keyframes wtLegB{0%,100%{transform:rotate(0)}25%{transform:rotate(-22deg)}75%{transform:rotate(22deg)}}
.wt-leg{transform-box:fill-box;transform-origin:50% 0;animation-duration:.6s;animation-timing-function:ease-in-out;animation-fill-mode:both;
  animation-delay:var(--wt-leg-at,0s);animation-iteration-count:var(--wt-steps,1)}
.wt-leg.a{animation-name:var(--wt-leg-a,none)}
.wt-leg.b{animation-name:var(--wt-leg-b,none)}
#sc-winter.wt-walk #wt-vhorse{--wt-leg-a:wtLegA;--wt-leg-b:wtLegB;--wt-leg-at:2.2s;--wt-steps:4}
#sc-winter.wt-walk #wt-ghorse{--wt-leg-a:wtLegA;--wt-leg-b:wtLegB;--wt-leg-at:4.6s;--wt-steps:7}
/* the children run to the fort, with a hop in every step */
@keyframes wtRunTA{0%{transform:none}20%{transform:translate(-33px,-6px)}40%{transform:translate(-67px,18px)}60%{transform:translate(-100px,10px)}80%{transform:translate(-134px,38px)}100%{transform:translate(-167px,50px)}}
@keyframes wtRunP{0%{transform:none}20%{transform:translate(-36px,-8px)}40%{transform:translate(-71px,8px)}60%{transform:translate(-107px,0)}80%{transform:translate(-142px,20px)}100%{transform:translate(-178px,30px)}}
#sc-winter.wt-run #wt-ta{animation:wtRunTA 1.8s ease-in-out both}
#sc-winter.wt-run #wt-pippi{animation:wtRunP 1.6s ease-in-out both}
/* the fight: up, throw, duck */
@keyframes wtPopTA{0%,100%{transform:translate(-167px,50px)}45%,55%{transform:translate(-167px,22px)}}
@keyframes wtPopP{0%,100%{transform:translate(-178px,30px)}45%,55%{transform:translate(-178px,-4px)}}
#sc-winter.wt-won #wt-ta{animation:wtPopTA 1.6s ease-in-out infinite}
#sc-winter.wt-won #wt-pippi{animation:wtPopP 1.3s ease-in-out infinite;animation-delay:-.5s}
/* Pippi rolls her giant snowball across the garden and over their fort */
@keyframes wtRoll{0%{transform:none}70%{transform:translate(380px,-10px) rotate(300deg)}85%{transform:translate(425px,-34px) rotate(350deg)}100%{transform:translate(440px,-20px) rotate(360deg)}}
#sc-winter.wt-roll #wt-bigball{animation:wtRoll 2.6s ease-in 2.4s both}