/* Chapter 1: the kitchen of Villa Villekulla. Close-ups: the note, the exercise book, the bureau, the pantry,
   the stove and the pancakes, the flags and the sea chest, and the horse. */
.dialog.who-pippi{border-left-color:var(--amber)} .dialog.who-pippi .who{color:var(--amber)}
.dialog.who-horse .who,.dialog.who-spunk .who{color:var(--phosphor)} .dialog.who-horse,.dialog.who-spunk{border-left-color:var(--phosphor)}
.dialog.who-tommy .who,.dialog.who-annika .who{color:var(--sky)} .dialog.who-tommy,.dialog.who-annika{border-left-color:var(--sky)}

/* Pippi's note: mirror writing until you hold it to the mirror */
.pnote{background:#fffaf0;color:#2b2118;font-family:var(--f-hand);font-size:clamp(20px,3.4vw,26px);line-height:1.2;padding:20px 24px;max-width:520px;margin:4px auto;
  transform:rotate(-1.2deg);box-shadow:0 12px 24px -8px #000;border-top:6px solid #e8571f}
.pnote p{margin:0 0 .45em}
.pnote.mirrored{transform:rotate(1.2deg) scaleX(-1)}

/* the exercise book */
.ebook{background:#f6f1e3 repeating-linear-gradient(transparent 0 31px,#c9d8ef 31px 32px);color:#1f2a44;border-left:28px solid #2f5f9a;border-radius:4px;padding:16px 18px;font-family:var(--f-hand);font-size:clamp(22px,4vw,30px);position:relative}
.sum{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;line-height:1.1;margin-bottom:6px}
.sum b{color:#c4302b;font-weight:700}
.sum i{font-size:.65em;color:#c4302b}
.teach{font-family:var(--f-display);font-size:14px;color:#3a4560;margin-top:10px}
.sticky{background:#ffe266;color:#2a2a2a;font-size:clamp(18px,3vw,22px);padding:10px 14px;margin:14px 0 0 auto;max-width:330px;transform:rotate(2deg);box-shadow:0 8px 16px -6px rgba(0,0,0,.5)}

/* the bureau */
.bureau{background:#8a4b22;border:5px solid #4e2a12;border-radius:6px;padding:14px}
.drawers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.drw{height:56px;border-radius:4px;border:3px solid #4e2a12;background:#a5602f;display:grid;place-items:center;padding:0}
.drw span{width:14px;height:14px;border-radius:50%;background:#f2c94c;box-shadow:0 2px 0 #7a5a1a}
.drw.open{background:#3a2010;box-shadow:inset 0 8px 14px rgba(0,0,0,.6)}
.drw.open span{opacity:.3}
.drw:hover{filter:brightness(1.12)}
.secret{margin-top:12px;background:#a5602f;border:3px solid #4e2a12;border-radius:4px;padding:10px}
.secret.open{background:#3a2010}
.plabel{font-family:var(--f-hand);font-size:20px;color:#fff3d0;margin-bottom:8px}
.bureau .feedback{color:#fff3d0}
.bureau .feedback.bad{color:#ffb4a6} .bureau .feedback.good{color:#c9f2a5}

/* padlocks with number or letter wheels */
.padlock{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.wheel{display:flex;flex-direction:column;align-items:center;background:linear-gradient(#e7c66a,#b98b2a);border-radius:8px;padding:4px;border:2px solid #7a5a1a}
.wheel b{font-family:var(--f-mono);font-size:30px;width:46px;text-align:center;background:#fffaf0;color:#2b2118;border-radius:4px;line-height:1.3}
.wheel button{background:none;border:0;color:#4e2a12;font-size:16px;padding:2px 12px}
.padlock .btn{margin-left:6px}

/* the pantry */
.pantry{background:#3a70b0;border:5px solid #183a66;border-radius:6px;padding:14px;color:#fff}
.shelf-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;border-bottom:8px solid #183a66;padding:10px 4px;margin-bottom:10px}
.jar{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;height:84px;border-radius:10px 10px 6px 6px;background:#f3efe3;color:#2b2118;font-weight:700;font-size:13px;padding:4px 8px;text-align:center}
.jar.milk{background:#fff} .jar.butter{background:#f6de8a} .jar.sugar{background:#e8e2d2}
.jar small{font-family:var(--f-hand);font-size:15px;font-weight:500;color:#c4302b}
.recipe{background:#fffaf0;color:#2b2118;font-family:var(--f-hand);font-size:20px;line-height:1.15;padding:8px 12px;transform:rotate(-1.5deg);flex:1 1 220px;max-width:320px}
.egg-gone{font-style:italic;opacity:.8}
.pantry .feedback{color:#e6eefb}

/* the enamel sign: the fire triangle */
.enamel{position:relative;background:#f3efe3;color:#1f4d8c;border:6px solid #1f4d8c;border-radius:14px;padding:16px;text-align:center;max-width:460px;margin:0 auto}
.enamel svg{width:150px;height:auto;display:block;margin:20px auto 8px}
.tri-l{position:absolute;font-weight:700;font-size:13px;color:#e8571f}
.tri-l.l1{left:50%;top:10px;transform:translateX(-50%)}
.tri-l.l2{left:calc(50% - 128px);top:150px}
.tri-l.l3{left:calc(50% + 86px);top:150px}
.enamel p{font-weight:600;margin:12px 0 6px}
.enamel small{color:#6a7a96}

/* the stove's firebox */
.firebox{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}
.fb-door{position:relative;width:200px;height:150px;border-radius:10px;background:#120f0d;border:8px solid #5a504a;overflow:hidden;flex:0 0 auto}
.fb-door .logs{position:absolute;left:24px;right:24px;bottom:14px;height:34px;border-radius:16px;background:repeating-linear-gradient(90deg,#8a5a2b 0 52px,#5a3a1a 52px 56px);opacity:0;transition:opacity .2s}
.fb-door.wood .logs{opacity:1}
.fb-door.lit{background:radial-gradient(circle at 50% 80%,#ffd25a,#ff7a2e 45%,#b3260f 75%,#3a0d05)}
.fb-door .smoke{position:absolute;left:30%;bottom:30px;width:80px;height:80px;border-radius:50%;background:radial-gradient(#9a948c,transparent 70%);opacity:0}
.fb-door .smoke.puff{animation:puff 1.6s ease-out}
@keyframes puff{0%{opacity:.9;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-70px) scale(1.6)}}
.fb-ctl{display:flex;flex-direction:column;gap:8px;min-width:200px}
.tog{font-family:var(--f-mono);font-size:13px;padding:10px 12px;border-radius:4px;border:1px solid var(--line);background:var(--ink);text-align:left}
.tog.on{border-color:var(--phosphor);color:var(--phosphor)}

/* the pancakes */
.pan-done{min-height:2em;margin:0 0 12px;padding-left:1.4em;color:var(--phosphor);font-size:15px}
.pan-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.pstep{text-align:left;padding:10px 12px;border-radius:6px;border:1px solid var(--line);background:#3a2819;font-size:14px;line-height:1.25}
.pstep:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.pstep:disabled{opacity:.35;cursor:default}

/* flags */
.bigflags{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;background:#3f7468;border-radius:6px}
.flag-p{margin:12px 0 0;max-width:60ch}
.chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;background:#f3e6c4;padding:12px;border-radius:6px}
.chart figure{margin:0;text-align:center}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-family:var(--f-mono);font-weight:600;color:#3e200c;font-size:14px}
.padlock.letters .wheel b{width:40px}

/* the horse */
.hands{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.hand{text-align:left;padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:#3a2819;font-size:15px}
.hand:hover{border-color:var(--amber);color:var(--amber)}

/* the scene: flags sway on their string */
@keyframes sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
#vk-flags .sway{transform-box:fill-box;transform-origin:50% 0;animation:sway 4s ease-in-out infinite}

/* ---------- the kitchen comes alive (all stopped by the Motion setting: see css/animations.css) ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes tail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
@keyframes nod{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-4deg)}86%{transform:rotate(2deg)}}
@keyframes cloud{from{transform:translateX(-60px)}to{transform:translateX(260px)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.6)}}
@keyframes wave{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}}
@keyframes breeze{0%,100%{transform:skewX(0)}50%{transform:skewX(2deg)}}
@keyframes crawl{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
@keyframes steam{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.5}100%{transform:translateY(-60px) scale(1.6);opacity:0}}
#vk-nilsson.bob{animation:bob 2.2s ease-in-out infinite}
#vk-nilsson .tail{transform-box:fill-box;transform-origin:0% 100%;animation:tail 1.6s ease-in-out infinite}
#vk-horse.nod{transform-box:fill-box;transform-origin:30% 100%;animation:nod 6s ease-in-out infinite}
/* once it has had its sugar, the horse tosses its head and trots off out of the door's window (vis() in core.js) */
@keyframes vkHorseOff{0%{transform:none}18%{transform:translateY(-10px) rotate(-8deg)}34%{transform:translateY(-3px) rotate(5deg)}100%{transform:translate(180px,26px) rotate(6deg)}}
#vk-horse.vk-horse-off{transform-box:view-box;transform-origin:1416px 324px;animation:vkHorseOff 2.2s ease-in-out both}
.cloud{animation:cloud 40s linear infinite}
.cloud.slow{animation-duration:65s;animation-delay:-30s}
/* the bird flies past once every 22 seconds: 4 seconds of flight, then a long pause off-screen */
.bird{animation:birdpass 22s linear infinite}
@keyframes birdpass{0%{transform:translate(0,0)}18%{transform:translate(300px,-40px)}18.01%,100%{transform:translate(400px,-40px)}}
.bird path{transform-box:fill-box;transform-origin:50% 50%;animation:flap .35s ease-in-out infinite}
#vk-ta .wave{transform-box:fill-box;transform-origin:100% 100%;animation:wave .7s ease-in-out infinite}
#vk-ta .wave.b{transform-origin:0% 100%;animation-duration:.6s;animation-delay:-.3s}
.breeze{transform-box:fill-box;transform-origin:50% 0;animation:breeze 5s ease-in-out infinite}
.breeze.b{animation-delay:-2.5s}
.crawl{transform-box:fill-box;animation:crawl 4s ease-in-out infinite}
.steam{transform-box:fill-box;transform-origin:50% 50%;animation:steam 2.4s ease-out infinite}
.steam.b{animation-delay:-.8s} .steam.c{animation-delay:-1.6s}