/* Crumpet, the duck at the foot of the books page and in the pond on the 404 page.
   His drawing is inline SVG; the CSP allows no inline styles, so it all lives here.
   Line and water colours follow the site's light and dark themes. */

.crumpet { display:block; height:auto; margin:3.5rem auto 0; overflow:visible;
  --cr-line:var(--ink); --cr-water:var(--accent); --cr-weed:var(--accent-lit); }
.crumpet-float { width:min(260px,70%); margin-bottom:1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.crumpet-float:focus { outline:none; }
.crumpet-float:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:12px; }
.crumpet-dab { width:min(300px,80%); margin:1rem auto 2rem; }

.crumpet .ink { fill:none; stroke:var(--cr-line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.crumpet .surface { fill:none; stroke:var(--cr-water); stroke-width:1.5; stroke-linecap:round; opacity:.8; }
.crumpet .pond { fill:var(--cr-water); opacity:.12; }
.crumpet .weed { fill:none; stroke:var(--cr-weed); stroke-width:1.4; stroke-linecap:round; }
.crumpet .ring, .crumpet .idle { transform-box:fill-box; transform-origin:center; fill:none; stroke:var(--cr-water); }

/* both ducks */
.crumpet .sway { transform-box:fill-box; transform-origin:50% 0%; animation:cr-sway 4.5s ease-in-out infinite; }
.crumpet .sway.b { animation-duration:5.6s; animation-delay:-2s; }
.crumpet .sway.c { animation-duration:3.9s; animation-delay:-1s; }
@keyframes cr-sway { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }

/* floating Crumpet: dabbles every eight seconds, comes up with algae */
.crumpet-float .bob { animation:cr-bob 3.2s ease-in-out infinite; }
.crumpet-float .neck { transform-box:view-box; transform-origin:138px 93px; animation:cr-dip 8s ease-in-out infinite; }
.crumpet-float .snack { animation:cr-snack 8s ease-in-out infinite; }
.crumpet-float .ring { stroke-width:.9; opacity:0; }
.crumpet-float .r1 { animation:cr-ring 8s ease-out infinite; }
.crumpet-float .r2 { animation:cr-ring 8s ease-out infinite; animation-delay:.35s; }
.crumpet-float .idle { stroke-width:.7; animation:cr-idle 6s ease-out infinite; }
@keyframes cr-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(1.4px); } }
@keyframes cr-dip { 0%,30% { transform:rotate(0); } 40%,52% { transform:rotate(68deg); } 62%,100% { transform:rotate(0); } }
@keyframes cr-snack { 0%,56% { opacity:0; } 60%,82% { opacity:1; } 88%,100% { opacity:0; } }
@keyframes cr-ring { 0%,36% { opacity:0; transform:scale(.3); } 40% { opacity:.9; transform:scale(.4); } 70% { opacity:0; transform:scale(2.6); } 100% { opacity:0; } }
@keyframes cr-idle { 0% { opacity:0; transform:scale(.6); } 15% { opacity:.6; } 100% { opacity:0; transform:scale(2.2); } }

/* hover: he notices you. click: a quack (silent) */
.crumpet-float .head { transform-box:view-box; transform-origin:150px 74px; transition:transform .45s ease; }
.crumpet-float .beak { transform-box:view-box; transform-origin:158px 73px; transition:transform .45s ease; }
.crumpet-float .eye { transition:transform .45s ease; }
.crumpet-float .jaw { transform-box:view-box; transform-origin:159px 73px; transition:transform .12s ease; }
.crumpet-float.look .neck { animation:none; }
.crumpet-float.look .snack { animation:none; opacity:0; }
.crumpet-float.look .head { transform:rotate(-9deg); }
.crumpet-float.look .beak { transform:scaleX(.78); }
.crumpet-float.look .eye { transform:translateX(-1.6px); }
.crumpet-float.quack .jaw { transform:rotate(24deg); }
.crumpet-float .qtext { font:italic 9px Georgia,serif; fill:var(--cr-line); opacity:0; pointer-events:none; }
.crumpet-float .qtext.go { animation:cr-float 1.3s ease-out forwards; }
@keyframes cr-float { 0% { opacity:0; transform:translate(0,4px); } 20% { opacity:1; } 100% { opacity:0; transform:translate(6px,-14px); } }

/* bottom-up Crumpet on the 404 page */
.crumpet-dab .foot { fill:#e6b27a; stroke:#3a2a1a; stroke-width:.7; stroke-linejoin:round; }
.crumpet-dab .leg { fill:none; stroke:#e6b27a; stroke-width:2; stroke-linecap:round; }
.crumpet-dab .under { opacity:.78; }
.crumpet-dab .bob { transform-box:view-box; transform-origin:122px 111px; animation:cr-wobble 3.4s ease-in-out infinite; }
.crumpet-dab .k1 { transform-box:view-box; transform-origin:116px 113px; animation:cr-kick 1.4s ease-in-out infinite; }
.crumpet-dab .k2 { transform-box:view-box; transform-origin:128px 113px; animation:cr-kick 1.4s ease-in-out infinite; animation-delay:-.7s; }
.crumpet-dab .ring { stroke-width:.8; animation:cr-ring2 4s ease-out infinite; }
.crumpet-dab .ring.b { animation-delay:2s; }
@keyframes cr-wobble { 0%,100% { transform:rotate(0); } 50% { transform:rotate(-3deg); } }
@keyframes cr-kick { 0%,100% { transform:rotate(-12deg); } 50% { transform:rotate(14deg); } }
@keyframes cr-ring2 { 0% { opacity:0; transform:scale(.5); } 15% { opacity:.7; } 100% { opacity:0; transform:scale(2); } }

@media (prefers-reduced-motion:reduce) {
  .crumpet *, .crumpet { animation:none !important; transition:none !important; }
  .crumpet-float .snack { opacity:0; }
}