/* ==========================================================================
   Quackers — the duck's expressions and moves
   --------------------------------------------------------------------------
   Every mood is a state on ONE drawing: no sprite sheet, no image swap.
   `[data-mood]` holds an expression; `.dk--<action>` fires a one-shot move.
   Both compose, so Quackers can be proud AND dancing at the same time.

   Sizing: set --duck on .dk (or on an ancestor). Everything inside is in the
   SVG's own 200x200 user units, so nothing needs re-tuning per size.
   ========================================================================== */

.dk {
  --duck: 120px;
  --look-x: 0px;
  --look-y: 0px;
  --blink-delay: 3s;
  width: var(--duck);
  height: var(--duck);
  flex: none;
  position: relative;
  transform-origin: 50% 88%;
  will-change: transform;
}
.dk__svg { width: 100%; height: 100%; overflow: visible; display: block; }
.dk--flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Resting behaviour
   -------------------------------------------------------------------------- */

.dk--idle .dk-all { animation: dkbob 3.2s ease-in-out infinite; }
.dk-shadow { fill: rgba(0, 0, 0, .18); }
.dk--idle .dk-shadow { animation: dkshadow 3.2s ease-in-out infinite; }
.dk-tuft   { transform-origin: 100px 40px; }
.dk--idle .dk-tuft { animation: dktuft 2.6s ease-in-out infinite; }

.dk-wing        { transform-origin: 100px 120px; transition: transform .22s ease; }
.dk-wing--l     { transform-origin: 62px 116px; }
.dk-wing--r     { transform-origin: 138px 116px; }
.dk-head        { transform-origin: 100px 110px; transition: transform .25s ease; }
.dk-body        { transform-origin: 100px 150px; transition: transform .25s ease; }
.dk-pupil       { transform: translate(var(--look-x), var(--look-y)); transition: transform .16s ease; }
.dk-pupil__ball { transform-origin: 0 0; transition: transform .2s ease; }
.dk-cheek       { opacity: 0; transition: opacity .25s ease; }
.dk-brow        { transform-origin: 100px 46px; transition: transform .22s ease; opacity: .8; }
.dk-brow--l     { transform-origin: 82px 45px; }
.dk-brow--r     { transform-origin: 118px 45px; }
.dk-beak        { transform-origin: 100px 92px; transition: transform .22s ease; }
.dk-jaw         { transform-origin: 100px 102px; transition: transform .18s ease; }
.dk-mouth       { transform: scaleY(0); transform-origin: 100px 104px; transition: transform .18s ease; }
.dk-tongue      { opacity: 0; transition: opacity .18s ease; }
.dk-heart, .dk-spiral, .dk-shades, .dk-zzz { opacity: 0; }
.dk-foot--l     { transform-origin: 88px 168px; }
.dk-foot--r     { transform-origin: 112px 168px; }

/* Eyelids sit just above the eye and drop in. Values are SVG user units. */
.dk-lid {
  transform: translateY(-18px);
  transition: transform .18s ease;
}
.dk .dk-lid { animation: dkblink 5.4s var(--blink-delay) infinite; }

/* --------------------------------------------------------------------------
   Moods
   -------------------------------------------------------------------------- */

/* happy — the default drawing, nothing to override */
.dk[data-mood="happy"] .dk-jaw { transform: translateY(1px); }

/* cheer — squinting with joy, cheeks up, bill open */
.dk[data-mood="cheer"] .dk-lid    { transform: translateY(-9px); }
.dk[data-mood="cheer"] .dk-cheek  { opacity: .9; }
.dk[data-mood="cheer"] .dk-jaw   { transform: translateY(7px); }
.dk[data-mood="cheer"] .dk-mouth { transform: scaleY(2.6); }
.dk[data-mood="cheer"] .dk-tongue { opacity: 1; }
.dk[data-mood="cheer"] .dk-brow--l { transform: translateY(-4px) rotate(-8deg); }
.dk[data-mood="cheer"] .dk-brow--r { transform: translateY(-4px) rotate(8deg); }
.dk[data-mood="cheer"] .dk-head   { transform: rotate(-3deg); }

/* wow — everything wide */
.dk[data-mood="wow"] .dk-pupil__ball { transform: scale(1.28); }
.dk[data-mood="wow"] .dk-eye         { transform-box: fill-box; }
.dk[data-mood="wow"] .dk-jaw     { transform: translateY(14px); }
.dk[data-mood="wow"] .dk-mouth   { transform: scaleY(5.2); }
.dk[data-mood="wow"] .dk-tongue      { opacity: 1; }
.dk[data-mood="wow"] .dk-brow--l     { transform: translateY(-7px); }
.dk[data-mood="wow"] .dk-brow--r     { transform: translateY(-7px); }
.dk[data-mood="wow"] .dk-cheek       { opacity: .8; }
.dk[data-mood="wow"] .dk-tuft        { transform: scaleY(1.15) rotate(-4deg); }

/* proud — chin up, chest out */
.dk[data-mood="proud"] .dk-lid   { transform: translateY(-11px); }
.dk[data-mood="proud"] .dk-head  { transform: rotate(2deg) translateY(-3px); }
.dk[data-mood="proud"] .dk-body  { transform: scale(1.04, 1.02); }
.dk[data-mood="proud"] .dk-cheek { opacity: .75; }
.dk[data-mood="proud"] .dk-brow--l { transform: translateY(-3px) rotate(6deg); }
.dk[data-mood="proud"] .dk-brow--r { transform: translateY(-3px) rotate(-6deg); }
.dk[data-mood="proud"] .dk-wing--l { transform: rotate(-14deg); }
.dk[data-mood="proud"] .dk-wing--r { transform: rotate(14deg); }

/* think — looking up and away, one brow raised, a wing at the chin */
.dk[data-mood="think"] { --look-x: -3.5px; --look-y: -4px; }
.dk[data-mood="think"] .dk-brow--l  { transform: translateY(-6px) rotate(-12deg); }
.dk[data-mood="think"] .dk-brow--r  { transform: rotate(6deg); }
.dk[data-mood="think"] .dk-beak  { transform: scale(.94); }
.dk[data-mood="think"] .dk-head     { transform: rotate(5deg); }
.dk[data-mood="think"] .dk-wing--r  { transform: rotate(-46deg) translate(-8px, -30px); }

/* oops — brows pinched, small bill, head ducked */
.dk[data-mood="oops"] .dk-pupil__ball { transform: scale(.82); }
.dk[data-mood="oops"] .dk-brow--l   { transform: translateY(2px) rotate(16deg); }
.dk[data-mood="oops"] .dk-brow--r   { transform: translateY(2px) rotate(-16deg); }
.dk[data-mood="oops"] .dk-beak  { transform: scale(.9); }
.dk[data-mood="oops"] .dk-jaw    { transform: translateY(4px); }
.dk[data-mood="oops"] .dk-mouth  { transform: scaleY(1.6); }
.dk[data-mood="oops"] .dk-head      { transform: rotate(-5deg) translateY(3px); }
.dk[data-mood="oops"] .dk-lid       { transform: translateY(-14px); }

/* sad — lids heavy, tuft drooping */
.dk[data-mood="sad"] .dk-lid      { transform: translateY(-11px); }
.dk[data-mood="sad"] .dk-brow--l  { transform: translateY(3px) rotate(18deg); }
.dk[data-mood="sad"] .dk-brow--r  { transform: translateY(3px) rotate(-18deg); }
.dk[data-mood="sad"] .dk-tuft     { transform: rotate(14deg) scaleY(.82); }
.dk[data-mood="sad"] .dk-head     { transform: rotate(-7deg) translateY(4px); }
.dk[data-mood="sad"] .dk-beak   { transform: scale(.9) translateY(2px); }

/* dizzy */
.dk[data-mood="dizzy"] .dk-pupil  { opacity: 0; }
.dk[data-mood="dizzy"] .dk-spiral { opacity: 1; animation: dkspin 1.4s linear infinite; transform-origin: 0 0; }
.dk[data-mood="dizzy"] .dk-head   { animation: dksway 1.1s ease-in-out infinite; }
.dk[data-mood="dizzy"] .dk-jaw   { transform: translateY(6px); }
.dk[data-mood="dizzy"] .dk-mouth { transform: scaleY(2.2); }

/* sleepy */
.dk[data-mood="sleepy"] .dk-lid  { transform: translateY(-3px); animation: none; }
.dk[data-mood="sleepy"] .dk-zzz  { opacity: 1; }
.dk[data-mood="sleepy"] .dk-z    { animation: dkzzz 2.4s ease-out infinite; }
.dk[data-mood="sleepy"] .dk-z--2 { animation-delay: .5s; }
.dk[data-mood="sleepy"] .dk-z--3 { animation-delay: 1s; }
.dk[data-mood="sleepy"] .dk-head { transform: rotate(-9deg); }
.dk-z { font: 700 18px var(--font-display, sans-serif); fill: #fff; opacity: 0; }

/* cool */
.dk[data-mood="cool"] .dk-shades { opacity: 1; }
.dk[data-mood="cool"] .dk-jaw    { transform: translateY(3px); }
.dk[data-mood="cool"] .dk-mouth  { transform: scaleY(1.4); }
.dk[data-mood="cool"] .dk-head   { transform: rotate(-4deg); }

/* love */
.dk[data-mood="love"] .dk-pupil  { opacity: 0; }
.dk[data-mood="love"] .dk-heart  { opacity: 1; animation: dkheart .9s ease-in-out infinite; transform-origin: 0 0; }
.dk[data-mood="love"] .dk-cheek  { opacity: 1; }
.dk[data-mood="love"] .dk-lid    { transform: translateY(-13px); }

/* wink */
.dk[data-mood="wink"] .dk-eye--l .dk-lid { transform: translateY(-1px); animation: none; }
.dk[data-mood="wink"] .dk-cheek { opacity: .85; }
.dk[data-mood="wink"] .dk-jaw    { transform: translateY(8px); }
.dk[data-mood="wink"] .dk-mouth  { transform: scaleY(2.8); }
.dk[data-mood="wink"] .dk-head  { transform: rotate(4deg); }

/* --------------------------------------------------------------------------
   Talking — the bill flaps while letters are landing in the bubble
   -------------------------------------------------------------------------- */

.dk--talking .dk-jaw   { animation: dktalk .19s ease-in-out infinite; }
.dk--talking .dk-mouth { animation: dktalkm .19s ease-in-out infinite; }
.dk--talking .dk-tongue    { opacity: 1; }

/* --------------------------------------------------------------------------
   One-shot actions
   -------------------------------------------------------------------------- */

.dk--jump   .dk-all { animation: dkjump .62s cubic-bezier(.3,1.4,.4,1); }
.dk--pop    .dk-all { animation: dkpop .5s cubic-bezier(.2,1.8,.4,1); }
.dk--wobble .dk-all { animation: dkwobble .55s ease; }
.dk--shake  .dk-all { animation: dkshake .5s ease; }
.dk--nod    .dk-head { animation: dknod .6s ease; }
.dk--spin   .dk-all { animation: dkflip .8s cubic-bezier(.4,0,.3,1); }
.dk--dance  .dk-all { animation: dkdance 1.15s ease-in-out; }
.dk--tumble .dk-all { animation: dktumble 1s ease-in-out; }
.dk--peek   .dk-all { animation: dkpeek .8s ease; }

.dk--flap  .dk-wing--l,
.dk--jump  .dk-wing--l,
.dk--dance .dk-wing--l { animation: dkflapl .34s ease-in-out 3; }
.dk--flap  .dk-wing--r,
.dk--jump  .dk-wing--r,
.dk--dance .dk-wing--r { animation: dkflapr .34s ease-in-out 3; }

/* wave — one wing, up and side to side, like a hello across a playground */
.dk--wave .dk-wing--r { animation: dkwave .38s ease-in-out 4; }

.dk--dance .dk-foot--l { animation: dkstepl .29s ease-in-out 4; }
.dk--dance .dk-foot--r { animation: dkstepr .29s ease-in-out 4; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes dkbob    { 0%,100% { transform: translateY(0)     scale(1); }
                      50%     { transform: translateY(-5px)  scale(1.012, .988); } }
@keyframes dkshadow { 0%,100% { transform: scaleX(1);   opacity: .18; }
                      50%     { transform: scaleX(.9);  opacity: .12; } }
@keyframes dktuft   { 0%,100% { transform: rotate(-3deg); }
                      50%     { transform: rotate(4deg); } }
@keyframes dkblink  { 0%, 92%, 100% { transform: translateY(-18px); }
                      95%, 97%      { transform: translateY(1px); } }
@keyframes dktalk   { 0%,100% { transform: translateY(1px); }
                      50%     { transform: translateY(8px); } }
@keyframes dktalkm  { 0%,100% { transform: scaleY(.4); }
                      50%     { transform: scaleY(3); } }
@keyframes dkjump   { 0%   { transform: translateY(0)     scaleY(1); }
                      18%  { transform: translateY(4px)   scale(1.1, .88); }
                      50%  { transform: translateY(-34px) scale(.94, 1.1); }
                      78%  { transform: translateY(3px)   scale(1.08, .9); }
                      100% { transform: translateY(0)     scale(1); } }
@keyframes dkpop    { 0%   { transform: scale(1); }
                      45%  { transform: scale(1.22) rotate(4deg); }
                      100% { transform: scale(1); } }
@keyframes dkwobble { 0%,100% { transform: rotate(0) translateX(0); }
                      20%  { transform: rotate(-9deg) translateX(-6px); }
                      45%  { transform: rotate(8deg)  translateX(6px); }
                      70%  { transform: rotate(-5deg) translateX(-3px); }
                      88%  { transform: rotate(3deg); } }
@keyframes dkshake  { 0%,100% { transform: translateX(0); }
                      15% { transform: translateX(-7px); } 30% { transform: translateX(7px); }
                      45% { transform: translateX(-5px); } 60% { transform: translateX(5px); }
                      80% { transform: translateX(-2px); } }
@keyframes dknod    { 0%,100% { transform: rotate(0)     translateY(0); }
                      30%  { transform: rotate(9deg)  translateY(4px); }
                      65%  { transform: rotate(-4deg) translateY(-2px); } }
@keyframes dkflip   { 0%   { transform: rotateY(0)      translateY(0); }
                      50%  { transform: rotateY(180deg) translateY(-22px); }
                      100% { transform: rotateY(360deg) translateY(0); } }
@keyframes dkdance  { 0%,100% { transform: rotate(0) translateY(0); }
                      15% { transform: rotate(-11deg) translateY(-9px); }
                      35% { transform: rotate(10deg)  translateY(0); }
                      55% { transform: rotate(-9deg)  translateY(-9px); }
                      75% { transform: rotate(8deg)   translateY(0); }
                      90% { transform: rotate(-3deg)  translateY(-3px); } }
@keyframes dktumble { 0%   { transform: rotate(0)      translate(0,0); }
                      35%  { transform: rotate(-160deg) translate(-16px,-18px); }
                      70%  { transform: rotate(-330deg) translate(10px,4px); }
                      100% { transform: rotate(-360deg) translate(0,0); } }
@keyframes dkpeek   { 0%,100% { transform: translateX(0) rotate(0); }
                      35% { transform: translateX(-14px) rotate(-8deg); }
                      70% { transform: translateX(10px)  rotate(6deg); } }
@keyframes dkflapl  { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-52deg); } }
@keyframes dkflapr  { 0%,100% { transform: rotate(0); } 50% { transform: rotate(52deg); } }
@keyframes dkwave   { 0%,100% { transform: rotate(-78deg); } 50% { transform: rotate(-104deg); } }
@keyframes dkstepl  { 0%,100% { transform: translateY(0) rotate(0); }
                      50% { transform: translateY(-7px) rotate(-12deg); } }
@keyframes dkstepr  { 0%,100% { transform: translateY(-7px) rotate(12deg); }
                      50% { transform: translateY(0) rotate(0); } }
@keyframes dkspin   { to { transform: rotate(360deg); } }
@keyframes dksway   { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes dkheart  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes dkzzz    { 0%   { opacity: 0; transform: translate(0,4px)     scale(.7); }
                      30%  { opacity: 1; }
                      100% { opacity: 0; transform: translate(10px,-16px) scale(1.15); } }

/* --------------------------------------------------------------------------
   Stage + speech bubble
   The bubble is a sibling, not a child, so a jumping duck never drags the
   words around with it.
   -------------------------------------------------------------------------- */

.dk-stage {
  position: relative;
  display: flex;
  justify-content: center;
  flex: none;
}

.dk-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translate(-50%, 8px) scale(.86);
  transform-origin: 50% 100%;
  z-index: 5;
  /* width:max-content is load-bearing. The bubble's containing block is the
     duck's own box, so without it the text wraps to the width of the duck. */
  width: max-content;
  min-width: 92px;
  max-width: min(300px, 76vw);
  padding: 10px 14px;
  border-radius: 18px 18px 18px 6px;
  background: #fffdf6;
  color: #2a1350;
  font: 800 14px/1.35 var(--font-ui, system-ui, sans-serif);
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 0 0 3px rgba(255, 255, 255, .5);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, 1.6, .4, 1), visibility .22s;
  min-height: 1.35em;
}
.dk-bubble.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.dk-bubble::after {
  content: "";
  position: absolute;
  left: 26px; bottom: -9px;
  border: 6px solid transparent;
  border-top-color: #fffdf6;
  border-right-width: 10px;
}
.dk-bubble[data-tone="good"] { background: #eafff4; box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 3px #5cf0ae; }
.dk-bubble[data-tone="good"]::after { border-top-color: #eafff4; }
.dk-bubble[data-tone="soft"] { background: #fff4e8; box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 3px #ffd09a; }
.dk-bubble[data-tone="soft"]::after { border-top-color: #fff4e8; }

/* Bubble beside the duck rather than above it — used where headroom is short */
.dk-stage--side { align-items: center; gap: 10px; }
.dk-stage--side .dk-bubble {
  position: static;
  transform: translateX(-8px) scale(.9);
  border-radius: 18px 18px 6px 18px;
  text-align: left;
}
.dk-stage--side .dk-bubble.is-on { transform: none; }
.dk-stage--side .dk-bubble::after { display: none; }

/* --------------------------------------------------------------------------
   Props — held in the right wing, which lifts to hold it out
   -------------------------------------------------------------------------- */

.dk[data-prop="phone"] .dk-wing--r { transform: rotate(-18deg); }
.dk-prop__wiggle { transform-box: fill-box; transform-origin: 50% 100%; }
/* A buzz every couple of seconds: a phone that has just received a text. */
.dk[data-prop="phone"] .dk-prop__wiggle { animation: dkbuzz 2.2s ease-in-out infinite; }
@keyframes dkbuzz { 0%, 70%, 100% { transform: rotate(0); }
                    74% { transform: rotate(-7deg); } 78% { transform: rotate(7deg); }
                    82% { transform: rotate(-5deg); } 86% { transform: rotate(4deg); } }

[data-calm] .dk-prop__wiggle { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .dk .dk-lid { animation: none; transform: translateY(-18px); }
  .dk-prop__wiggle { animation: none !important; }
}

/* ==========================================================================
   Growing up
   --------------------------------------------------------------------------
   `[data-grown]` is 0-4: hatchling, duckling, fledgling, young duck, grown
   duck. Quackers changes PROPORTION rather than size — the head shrinks
   against the body, the eyes stop being saucers, the wings lengthen, the baby
   tuft flattens away. Those ratios are what separate a duckling from a duck;
   scaling the whole drawing up would just be a bigger duckling.

   Every growth transform sits on a `.dk-gro` wrapper INSIDE the part it grows,
   never on the part itself. Moods and actions already own the transform of
   .dk-head, .dk-body, .dk-wing and .dk-beak — a growth rule on those would win
   or lose against an expression instead of composing with it, and Quackers
   would stop being able to be proud and grown up at the same time. Nested
   groups multiply, so here they compose for free.

   Stage 1 is the drawing exactly as drawn, which is why it has no rules.
   ========================================================================== */

.dk-gro { transition: transform .55s cubic-bezier(.22, .9, .3, 1.08); }

.dk-gro--head { transform-origin: 100px 112px; }   /* base of the skull */
.dk-gro--body { transform-origin: 100px 152px; }   /* where he meets the ground */
.dk-gro--beak { transform-origin: 100px 94px; }
/* The tuft's own group carries the idle wave (dktuft), and an animation that
   touches `transform` replaces any transform set on the same element — so the
   baby down has to flatten on a wrapper inside it, or it keeps its full fluff
   at every age while appearing to obey the rule. */
.dk-gro--tuft { transform-origin: 100px 44px; }
.dk-wing--l .dk-gro--wing { transform-origin: 62px 116px; }
.dk-wing--r .dk-gro--wing { transform-origin: 138px 116px; }
/* The eye group is already translated to the eye centre, so 0 0 IS the pupil. */
.dk-gro--eye { transform-origin: 0 0; }

/* --- 0 · hatchling — all head and eyes, barely any wing ------------------ */
.dk[data-grown="0"] .dk-gro--head { transform: translateY(5px) scale(1.07); }
.dk[data-grown="0"] .dk-gro--eye  { transform: scale(1.1); }
.dk[data-grown="0"] .dk-gro--body { transform: scale(.87, .84); }
.dk[data-grown="0"] .dk-gro--wing { transform: scale(.84, .76); }
.dk[data-grown="0"] .dk-gro--beak { transform: scale(.88, .92); }
.dk[data-grown="0"] .dk-gro--tuft { transform: scaleY(1.25); }

/* --- 1 · duckling — the drawing as drawn --------------------------------- */

/* --- 2 · fledgling — the head starts to lift off the shoulders ----------- */
.dk[data-grown="2"] .dk-gro--head { transform: translateY(-6px) scale(.95); }
.dk[data-grown="2"] .dk-gro--eye  { transform: scale(.96); }
.dk[data-grown="2"] .dk-gro--body { transform: scale(1.05, 1.03); }
.dk[data-grown="2"] .dk-gro--wing { transform: scale(1.01, 1.1); }
.dk[data-grown="2"] .dk-gro--beak { transform: scale(1.05, 1.02); }
.dk[data-grown="2"] .dk-gro--tuft { transform: scaleY(.78); }

/* --- 3 · young duck ------------------------------------------------------ */
.dk[data-grown="3"] .dk-gro--head { transform: translateY(-18px) scale(.88); }
.dk[data-grown="3"] .dk-gro--eye  { transform: scale(.91); }
.dk[data-grown="3"] .dk-gro--body { transform: scale(1.1, 1.06); }
.dk[data-grown="3"] .dk-gro--wing { transform: scale(1, 1.19); }
.dk[data-grown="3"] .dk-gro--beak { transform: scale(1.11, 1.02); }
.dk[data-grown="3"] .dk-gro--tuft { transform: scaleY(.5); }

/* --- 4 · grown duck — small head, long wings, no fluff ------------------- */
.dk[data-grown="4"] .dk-gro--head { transform: translateY(-26px) scale(.81); }
.dk[data-grown="4"] .dk-gro--eye  { transform: scale(.86); }
.dk[data-grown="4"] .dk-gro--body { transform: scale(1.15, 1.09); }
.dk[data-grown="4"] .dk-gro--wing { transform: scale(.98, 1.27); }
.dk[data-grown="4"] .dk-gro--beak { transform: scale(1.18, 1.02); }
.dk[data-grown="4"] .dk-gro--tuft { transform: scaleY(.22); }

/* The tuft is baby down: it flattens rather than vanishing, so he never loses
   a part — and the idle animation that waves it keeps working at every age.
   Moods that already move the tuft (wow) override this, which is correct: an
   astonished grown duck may still raise what he has left. */

/* Growing is an event. The whole duck swells once, on the way to the new
   shape — start and end are identical so a flattened prefers-reduced-motion
   duration leaves him exactly where he belongs rather than mid-pop. */
.dk--growup .dk-all { animation: dkgrowup 1.5s cubic-bezier(.22, .9, .3, 1.1); }
@keyframes dkgrowup {
  0%   { transform: scale(1)    translateY(0); }
  30%  { transform: scale(1.14) translateY(-8px); }
  55%  { transform: scale(.97)  translateY(2px); }
  100% { transform: scale(1)    translateY(0); }
}