/* The mascot's stylesheet, shared by every page that runs assets/duck.js:
   index.html, hu/index.html and mamills/index.html.

   It used to sit at the bottom of assets/site.css, which was fine while the
   duck only ever appeared on the two landing pages. The game page carries its
   own sheet (assets/mamills-v2.css) and none of site.css, so the rules moved here
   rather than being copied - there is no build step, and a hand-copied sheet
   drifts.

   Before that they were built inside duck.js with createElement("style"),
   which the Content-Security-Policy in _headers counts as an inline style:
   under style-src 'self' the sheet is blocked, and the duck renders as a
   1280px static, pointer-events:auto block below the footer. Measured under
   the real policy before that move:
       position=static width=1280px pointerEvents=auto injectedSheet=none
   The values W=62 H=70 VW=104 VH=118 and the wand geometry that duck.js
   interpolated are literal here. If those constants change in duck.js, change
   them here too - that coupling is the price of a CSP with no 'unsafe-inline',
   and it is worth paying.

   The two colours below are named with fallbacks on purpose. On the landing
   pages --btn and --on-dark come from site.css; on the game page nothing
   defines them, so the literals stand in. They are that sheet's own ink and
   paper, so the control looks native on both. */

#dod-duck{position:fixed;top:0;left:0;width:62px;height:70px;z-index:9999;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 2px rgba(26,26,31,.18));}
#dod-duck svg{overflow:visible;}
#dod-duck .flip{transform-origin:50% 50%;}
#dod-duck .rig{transition:opacity .13s ease;}
#dod-duck.turning .rig{opacity:0;}
#dod-duck.turning .front-view{display:block;}
#dod-duck .rig{transform-origin:50px 106px;}
#dod-duck.walk .rig{animation:dod-waddle .4s ease-in-out infinite;}
@keyframes dod-waddle{0%,50%,100%{transform:translateY(1px)}
25%,75%{transform:translateY(-2.6px)}
}
#dod-duck .torso{transform-origin:44px 96px;}
#dod-duck.walk .torso{animation:dod-roll .4s ease-in-out infinite;}
@keyframes dod-roll{0%,100%{transform:rotate(3deg) scale(.97,1.01)}
25%,75%{transform:rotate(0deg) scale(1,1)}
50%{transform:rotate(-3deg) scale(1.04,.99)}
}
#dod-duck.walk .head{animation:dod-head-peck .4s ease-in-out infinite;}
@keyframes dod-head-peck{0%,50%,100%{transform:translate(1.6px,.4px)}
25%,75%{transform:translate(-1.2px,-.6px)}
}
#dod-duck .leg-l{transform-origin:41px 84px;}
#dod-duck .leg-r{transform-origin:59px 84px;}
#dod-duck.walk .leg-l{animation:dod-step .4s ease-in-out infinite;}
#dod-duck.walk .leg-r{animation:dod-step .4s ease-in-out infinite;animation-delay:.2s;}
@keyframes dod-step{0%,100%{transform:rotate(10deg) translateY(0)}
30%{transform:rotate(1deg) translateY(-5px)}
55%{transform:rotate(-11deg) translateY(-1.5px)}
80%{transform:rotate(1deg) translateY(0)}
}
#dod-duck .foot-l{transform-origin:38px 104px;}
#dod-duck .foot-r{transform-origin:60px 104px;}
#dod-duck.walk .foot-l{animation:dod-flap .4s ease-in-out infinite;}
#dod-duck.walk .foot-r{animation:dod-flap .4s ease-in-out infinite;animation-delay:.2s;}
@keyframes dod-flap{0%,100%{transform:rotate(0deg)}
30%{transform:rotate(14deg)}
55%{transform:rotate(20deg)}
68%{transform:rotate(-8deg)}
78%{transform:rotate(0deg)}
}
#dod-duck.walk.read .head{animation:none;}
#dod-duck.hurry.walk .rig,#dod-duck.hurry.walk .torso,#dod-duck.hurry.walk .head{animation-duration:.3s;}
#dod-duck.hurry.walk .leg-l,#dod-duck.hurry.walk .foot-l{animation-duration:.3s;}
#dod-duck.hurry.walk .leg-r,#dod-duck.hurry.walk .foot-r{animation-duration:.3s;animation-delay:.15s;}
#dod-duck .head{transform-origin:60px 46px;transition:transform .5s ease;}
#dod-duck.read .head{transform:rotate(15deg) translate(-1px,2px);}
#dod-duck.stare-up .head{transform:rotate(-20deg);}
#dod-duck.stare-down .head{transform:rotate(14deg) translate(0,3px);}
#dod-duck.nod.stare-up .head{animation:dod-nod-up 1.4s ease-in-out infinite;}
#dod-duck.nod.stare-down .head{animation:dod-nod-down 1.4s ease-in-out infinite;}
@keyframes dod-nod-up{0%,100%{transform:rotate(-20deg)}
45%,60%{transform:rotate(-13deg)}
}
@keyframes dod-nod-down{0%,100%{transform:rotate(14deg) translate(0,3px)}
45%,60%{transform:rotate(21deg) translate(0,4px)}
}
#dod-duck.awe .head{animation:dod-awe 2.4s ease-in-out infinite;}
@keyframes dod-awe{0%,100%{transform:rotate(-30deg) translate(1px,2px)}
50%{transform:rotate(-26deg) translate(0.5px,1.5px)}
}
#dod-duck.awe .pupil{transform:translate(1px,-2.2px) scale(1.18);transform-origin:69px 30px;}
#dod-duck .beak-lower{transform-origin:81px 39px;transition:transform .3s ease;}
#dod-duck.awe .beak-lower{transform:rotate(9deg) translate(-0.5px,1.5px);}
#dod-duck .paper{transform-origin:86px 58px;transition:transform .5s ease,opacity .25s ease;opacity:0;transform:translate(-40px,22px) rotate(28deg) scale(.4);}
#dod-duck.read .paper{opacity:1;transform:none;}
#dod-duck .pgL,#dod-duck .pgR{transform-origin:86px 45px;transition:transform .55s ease .3s;transform:scaleX(0.07);}
#dod-duck.read .pgL,#dod-duck.read .pgR{transform:scaleX(1);}
#dod-duck .news{transform-origin:86px 45px;}
#dod-duck.read .news{animation:dod-rustle 3.4s ease-in-out infinite;}
@keyframes dod-rustle{0%,100%{transform:rotate(0deg)}
30%{transform:rotate(1.3deg)}
65%{transform:rotate(-0.9deg)}
}
#dod-duck .wing{transform-origin:40px 76px;transition:transform .5s ease;}
#dod-duck.read .wing{transform:rotate(-42deg) translate(16px,-8px);}
#dod-duck .lid{transform-origin:69px 32px;transform:scaleY(0);animation:dod-blink 4.8s infinite;}
@keyframes dod-blink{0%,93%,100%{transform:scaleY(0)}
95%,97%{transform:scaleY(1)}
}
#dod-duck .pupil{transition:transform .3s;}
#dod-duck.read .pupil{animation:dod-scan 1.6s ease-in-out infinite;}
@keyframes dod-scan{0%,100%{transform:translate(-1.4px,1.4px)}
50%{transform:translate(1.4px,1.8px)}
}
#dod-duck .rig{transition:transform .8s ease,opacity .45s ease;}
#dod-duck.sleep .rig{opacity:0;transform:translateY(10px) scale(1.05,0.9);}
#dod-duck .sleep-view{opacity:0;transition:opacity .5s ease .3s;}
#dod-duck.sleep .sleep-view{opacity:1;}
#dod-duck .loaf{transform-origin:52px 104px;}
#dod-duck.sleep .loaf{animation:dod-breathe 2.8s ease-in-out infinite;}
@keyframes dod-breathe{0%,100%{transform:scale(1,1)}
50%{transform:scale(1.025,0.965)}
}
#dod-duck .zzz{opacity:0;transition:opacity .5s;}
#dod-duck.sleep .zzz{opacity:1;}
#dod-duck.sleep .zzz g{animation:dod-zzz 2.2s ease-in-out infinite;}
#dod-duck.sleep .zzz g:nth-child(2){animation-delay:.7s;}
#dod-duck.sleep .zzz g:nth-child(3){animation-delay:1.4s;}
@keyframes dod-zzz{0%{transform:translate(0,0);opacity:0}
30%{opacity:1}
100%{transform:translate(6px,-14px);opacity:0}
}
/* Off duty means still (WCAG 2.2.2, 2026-09-14). The sleep pose breathes,
   blinks and floats its Zzz forever, which is motion the stop control has to
   end, not start. So a stopped duck - by the dock's button, or by reduced
   motion switched on while the page is open - freezes on one frame: the
   sleeping loaf with its three Zzz drawn where they rest, nothing running. */
#dod-duck.off-duty *, #dod-duck.off-duty{animation:none !important; transition:none !important;}
#dod-duck.off-duty .zzz g{opacity:1;}
#dod-duck .front-view{display:none;}
#dod-duck.front .rig{display:none;}
#dod-duck.front .front-view{display:block;}
/* ---- the gesture wing ------------------------------------------------------
   The wave at the viewer is driven by duck.js from a keyframe timeline
   (WAVE there), which writes the wing's transforms each frame: the
   shoulder, the base's fold, the tip's hinge, the ghost outlines. Nothing
   here animates them; this sheet only says which wing shows. The posed wing
   and the resting shape crossfade, so it never pops in or out. Until
   2026-09-11 the wave was a CSS keyframe over a single-shape wing, and
   until 2026-09-12 a jointed arm with three drawn hands; a point at the
   viewer ran on the same rig until 2026-09-13. The reasoning is in duck.js
   above the rig. */
#dod-duck .gw{opacity:0;transition:opacity .14s ease;}
#dod-duck.gesture .gw{opacity:1;}
#dod-duck .fwing-rest{transition:opacity .14s ease;}
#dod-duck.gesture .fwing-rest{opacity:0;}
/* Every joint rotates about its own origin, which the script puts at the
   end of the parent segment with a translate; the origin therefore has to
   be the group's own 0 0, not the viewBox's. */
#dod-duck .gw-sh,#dod-duck .gw-base,#dod-duck .gw-tip,#dod-duck .gw-ghost{transform-box:view-box;transform-origin:0 0;}
/* The squash on the gesture beats: body, arm and head together, sinking onto
   the feet, which stay planted. */
#dod-duck .fbody{transform-origin:52px 98px;}
#dod-duck .fhead{transform-origin:52px 46px;transition:transform .35s ease;}
#dod-duck.tilt .fhead{transform:rotate(13deg);}
#dod-duck.tilt-l .fhead{transform:rotate(-10deg);}
#dod-duck .fpoint{display:none;transform-origin:36px 68px;}
#dod-duck.point-btn .fpoint{display:block;}
#dod-duck .fpoint-jab{transform-origin:36px 68px;}
#dod-duck.point-btn .fpoint-jab{animation:dod-atbtn 1.1s ease-in-out infinite;}
@keyframes dod-atbtn{0%,62%,100%{transform:scale(1)}
12%,22%{transform:scale(1.24)}
32%{transform:scale(1.02)}
42%,52%{transform:scale(1.24)}
}
#dod-duck .fpoint-ticks{opacity:0;}
#dod-duck.point-btn .fpoint-ticks{animation:dod-ticks 1.1s ease-in-out infinite;}
@keyframes dod-ticks{0%,6%,58%,100%{opacity:0}
12%,22%,42%,52%{opacity:1}
32%{opacity:.25}
}
#dod-duck.point-btn .rest-wing{display:none;}
#dod-duck.point-btn .pupil{transform:translate(-2.2px,-1.6px);}
#dod-duck.don .wing{transform:rotate(-78deg) translate(28px,-20px);}
#dod-duck .specs{opacity:0;transform:translateY(-7px);transition:transform .35s ease,opacity .3s ease;}
#dod-duck.glasses .specs{opacity:1;transform:translateY(0);}
#dod-duck.eager .fbrow{transform:translateY(-3px);}
#dod-duck.eager .front-view{animation:dod-eager .7s ease-in-out infinite;}
@keyframes dod-eager{0%,100%{transform:translateY(0)}
45%{transform:translateY(-3.5px)}
}
#dod-duck.surprised .pupil{transform:scale(1.3);transform-origin:52px 31.5px;}
#dod-duck .fbrow{transition:transform .15s ease;}
#dod-duck.surprised .fbrow{transform:translateY(-3px);}