/* ===========================================================================
   The cartoon on choreographer and anchor profile pages (a trial).
   Script: js/kd_dancer.js. It draws the character, moves every joint itself (as Web Animations: the moves are described there,
   as lists of poses), says which face it wears (data-face on the figure) and floats the little effects (music notes, hearts,
   sparkles, an "!") up from it. This file is only the look: the stage, the colours, the pivots, the faces and the effects --
   and, for the anchor show (an emcee with a microphone), the speech bubble and the dropped mic at the bottom.

   A light-yellow cartoon in the bottom-right corner that starts out FACELESS and gets a face when it notices you. It never
   takes a click (pointer-events: none) and is clipped to a small stage, so nothing it does can add a scrollbar or cover the
   page. If the cookie banner is showing, the stage sits on top of it.

   Who pivots where (all in the SVG's own 120 x 176 units, matching the drawing in kd_dancer.js; the figure faces LEFT):
     .kdm__slide   -              travelling across the stage (walking in, out)
     .kdm__body    feet           the whole figure: sway, hop, squash and stretch, lean
     .kdm__up      hips           torso + arms + head together: lean, bow
     .kdm__head    neck           tilts (the face is part of the head, so it tilts too)
     .kdm__armL/R  shoulders      swing (rotate(+) swings the end of a limb to the LEFT, i.e. a positive angle on the left arm
                                  lifts it out to the side, a negative angle on the right arm does)
     .kdm__foreL/R elbows         the forearm and hand
     .kdm__legL/R  hips           swing
     .kdm__shinL/R knees          the shin and shoe
   =========================================================================== */

.kdm {
  position: fixed;
  right: 0;
  bottom: 0;                       /* the script lifts it above the cookie banner while that is showing */
  width: 360px;
  height: 250px;
  overflow: hidden;                /* the stage: what is outside it is not seen, so "off screen" is just "off the stage" */
  pointer-events: none;            /* never in the way of a tap */
  z-index: 1001;                   /* in front of the floating help button (1000), behind the cookie banner (9999) */
}

.kdm__mover {
  position: absolute;
  right: 36px;
  bottom: 0;
  width: 112px;
  height: 165px;
  transform: translate(220px, 0);  /* parked off the right edge of the stage until the script moves it */
  will-change: transform;
}

.kdm__flip { width: 100%; height: 100%; transition: transform 240ms ease-in-out; }
.kdm__flip.is-right { transform: scaleX(-1); }       /* turned to face right, to leave: it spins round through "edge on" */

.kdm__fig { display: block; width: 100%; height: 100%; overflow: visible; }

/* the look: light yellow, a darker yellow outline, a soft highlight */
.kdm__fig .o { fill: none; stroke: #E0BE3E; stroke-width: 13; stroke-linecap: round; }
.kdm__fig .f { fill: none; stroke: #FFF3A6; stroke-width: 9.5; stroke-linecap: round; }
.kdm__fig .b { fill: #FFF3A6; stroke: #E0BE3E; stroke-width: 3; }
.kdm__fig .tuft-o { fill: none; stroke: #E0BE3E; stroke-width: 7.5; stroke-linecap: round; }
.kdm__fig .tuft-f { fill: none; stroke: #FFF3A6; stroke-width: 4; stroke-linecap: round; }
.kdm__fig .shine { fill: #FFFFFF; opacity: 0.6; }
.kdm__shadow { fill: rgba(0, 0, 0, 0.14); transform-origin: 60px 166px; }

/* pivots */
.kdm__body  { transform-origin: 60px 162px; }
.kdm__up    { transform-origin: 60px 114px; }
.kdm__head  { transform-origin: 60px 62px; }
.kdm__armL  { transform-origin: 39px 76px; }
.kdm__armR  { transform-origin: 81px 76px; }
.kdm__foreL { transform-origin: 39px 92px; }
.kdm__foreR { transform-origin: 81px 92px; }
.kdm__legL  { transform-origin: 52px 112px; }
.kdm__legR  { transform-origin: 68px 112px; }
.kdm__shinL { transform-origin: 52px 131px; }
.kdm__shinR { transform-origin: 68px 131px; }

/* standing around (the same as the script's REST pose: arms a little out from the sides) */
.kdm__armL { transform: rotate(8deg); }
.kdm__armR { transform: rotate(-8deg); }

/* the tuft on top of the head never quite keeps still */
.kdm__tuft { transform-origin: 60px 14px; animation: kdm-tuft 1.7s ease-in-out infinite alternate; }
@keyframes kdm-tuft { from { transform: rotate(-8deg); } to { transform: rotate(9deg); } }

/* =========================================================================
   THE FACE. Blank until the script sets data-face on the figure; then it pops in and wears one of these.
   Every feature is hidden (.x) except the ones the current face lists. (The face itself is always "there", so if the pop-in
   animation never runs it is still visible; it just does not pop.)
   ========================================================================= */

.kdm__face { transform-origin: 60px 38px; }
.kdm__face .x { display: none; }
.kdm__face .ink   { fill: #3F300A; }
.kdm__face .line  { fill: none; stroke: #3F300A; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.kdm__face .eye   { fill: #FFFFFF; stroke: #5A4712; stroke-width: 1.8; }
.kdm__face .pup   { fill: #2E2408; }
.kdm__face .pink  { fill: #FF8FA3; }
.kdm__face .blush { fill: #FF8F9E; opacity: 0.7; }

[data-face]:not([data-face=""]) .kdm__face { animation: kdm-pop 360ms cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes kdm-pop { 0% { transform: scale(0.15); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* eyes blink every few seconds while they are open */
.kdm__face .eo .eye, .kdm__face .eo .pup { transform-box: fill-box; transform-origin: center; animation: kdm-blink 3.4s infinite; }
@keyframes kdm-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }

/* the faces: grin (big smile), wow (mouth open, brows up), wink, happy (eyes shut in a smile), smirk (cool), kiss (puckered up),
   talk (the mouth flaps: it is speaking), ouch (eyes squeezed shut, mouth wide open) */
[data-face="cheeks"] .bl,
[data-face="eyes"]  .eo,  [data-face="eyes"]  .bl,
[data-face="lips"]  .eo,  [data-face="lips"]  .bl,  [data-face="lips"] .ml,
[data-face="talk"]  .eo,  [data-face="talk"]  .mtk, [data-face="talk"] .bl,
[data-face="ouch"]  .ex,  [data-face="ouch"]  .bw,  [data-face="ouch"] .mg,
[data-face="grin"]  .eo,  [data-face="grin"]  .mg, [data-face="grin"] .bl,
[data-face="wow"]   .eo,  [data-face="wow"]   .br, [data-face="wow"]  .mo,
[data-face="wink"]  .ewL, [data-face="wink"]  .ewR, [data-face="wink"] .mg, [data-face="wink"] .bl,
[data-face="happy"] .eh,  [data-face="happy"] .ms, [data-face="happy"] .bl,
[data-face="smirk"] .eo,  [data-face="smirk"] .bra, [data-face="smirk"] .mk,
[data-face="kiss"]  .eh,  [data-face="kiss"]  .mp, [data-face="kiss"]  .bl { display: inline; }

[data-face="wow"] .pup { transform: scale(0.7); transform-box: fill-box; transform-origin: center; }
[data-face="talk"] .mtk { transform-box: fill-box; transform-origin: center; animation: kdm-talk 0.34s ease-in-out infinite alternate; }
@keyframes kdm-talk { from { transform: scaleY(0.3) scaleX(0.8); } to { transform: scaleY(1.05) scaleX(1.05); } }
[data-face="smirk"] .bra { animation: kdm-brow 0.9s ease-in-out infinite alternate; }
@keyframes kdm-brow { from { transform: translateY(0); } to { transform: translateY(-2px); } }

/* =========================================================================
   EFFECTS floated up from the character: music notes, hearts, sparkles, a clap burst, an "!"
   ========================================================================= */

.kdm__fx {
  position: absolute;
  top: 6px;
  left: calc(50% + var(--dx, 0px));
  width: 24px;
  height: 24px;
  margin-left: -12px;
  opacity: 0;
  animation: kdm-float 1.9s ease-out forwards;
}
.kdm__fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes kdm-float {
  0%   { opacity: 0; transform: translate(0, 8px) scale(0.3) rotate(0); }
  14%  { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 0px), -72px) scale(0.95) rotate(var(--turn, 0deg)); }
}

.kdm__fx--bang { top: -12px; width: 26px; height: 34px; margin-left: -13px; animation: kdm-bang 1.1s ease-out forwards; }
@keyframes kdm-bang {
  0%   { opacity: 0; transform: translateY(10px) scale(0.2); }
  18%  { opacity: 1; transform: translateY(-4px) scale(1.25); }
  32%  { transform: translateY(0) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px) scale(1); }
}

.kdm__fx--spark { top: var(--y, 0px); width: 20px; height: 20px; margin-left: -10px; animation: kdm-twinkle 0.9s ease-out forwards; }
@keyframes kdm-twinkle {
  0%   { opacity: 0; transform: scale(0.1) rotate(0); }
  35%  { opacity: 1; transform: scale(1.15) rotate(40deg); }
  100% { opacity: 0; transform: scale(0.2) rotate(110deg); }
}

.kdm__fx--clap { top: 70px; width: 44px; height: 30px; margin-left: -22px; animation: kdm-burst 0.42s ease-out forwards; }
@keyframes kdm-burst {
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* feedback zigzags from the mic, a drop of sweat, the burst where the dropped mic lands */
.kdm__fx--zig   { top: var(--y, 30px); width: 38px; height: 32px; margin-left: -19px; animation: kdm-flash 0.7s steps(1, end) forwards; }
@keyframes kdm-flash { 0% { opacity: 1; } 18% { opacity: 0; } 34% { opacity: 1; } 52% { opacity: 0; } 68% { opacity: 1; } 100% { opacity: 0; } }
.kdm__fx--sweat { top: var(--y, 10px); width: 13px; height: 18px; margin-left: -6px; animation: kdm-drip 1.1s ease-in forwards; }
@keyframes kdm-drip { 0% { opacity: 0; transform: translateY(-4px) scale(0.5); } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(34px) scale(1); } }
.kdm__fx--boom  { top: var(--y, 130px); width: 56px; height: 24px; margin-left: -28px; animation: kdm-burst 0.5s ease-out forwards; }

/* makeup: a puff of powder; interior: a lightbulb, a stripe of paint, furniture; yoga: a ring of calm spreading out */
.kdm__fx--puff  { top: var(--y, 30px); width: 34px; height: 26px; margin-left: -17px; animation: kdm-puff 0.8s ease-out forwards; }
@keyframes kdm-puff { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translate(10px, -10px) scale(1.5); } }

.kdm__fx--bulb  { top: -18px; width: 28px; height: 36px; margin-left: -14px; animation: kdm-bang 1.4s ease-out forwards; }

.kdm__fx--ring  { top: 38px; width: 64px; height: 64px; margin-left: -32px; animation: kdm-ring 1.6s ease-out forwards; }
@keyframes kdm-ring { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.1); } }

.kdm__fx--swatch { top: var(--y, 24px); width: 13px; height: 64px; margin-left: -6px; transform-origin: 50% 0; animation: kdm-paint 3s ease-out forwards; }
@keyframes kdm-paint { 0% { opacity: 1; transform: scaleY(0); } 14% { opacity: 1; transform: scaleY(1); } 80% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }

.kdm__fx--item  { top: var(--y, 100px); width: var(--w, 36px); height: var(--h, 48px); margin-left: calc(var(--w, 36px) / -2); transform-origin: 50% 100%; animation: kdm-item 3.4s ease-out forwards; }
@keyframes kdm-item {
  0%   { opacity: 0; transform: scale(0.2, 0.2); }
  6%   { opacity: 1; transform: scale(1.18, 0.8); }
  11%  { transform: scale(0.94, 1.12); }
  16%  { transform: scale(1, 1); }
  84%  { opacity: 1; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}

/* =========================================================================
   THE ANCHOR SHOW: the speech bubble, the mic, the dropped mic
   ========================================================================= */

.kdm__say {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 8px);
  width: max-content;              /* as wide as its words, up to the max (not squeezed to the width of the character) */
  min-width: 72px;
  max-width: 190px;
  padding: 6px 11px;
  background: #FFFFFF;
  border: 2px solid #E0BE3E;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  font: 700 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #3F300A;
  text-align: center;
  transform-origin: 80% 100%;
  animation: kdm-say-in 240ms cubic-bezier(.3, 1.6, .5, 1) both;
}
/* the little tail pointing down at its head: a bigger yellow triangle with a white one on top */
.kdm__say::before, .kdm__say::after { content: ""; position: absolute; right: 44px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
.kdm__say::before { bottom: -10px; border-top: 10px solid #E0BE3E; }
.kdm__say::after  { bottom: -6.5px; border-top: 8px solid #FFFFFF; }
.kdm__say.is-out { animation: kdm-say-out 220ms ease-in forwards; }
.kdm__say--soft { font-style: italic; font-weight: 600; color: #7A6A30; }
.kdm__say--loud { font-size: 16px; letter-spacing: 0.5px; color: #D63A1F; border-color: #E4572E; }
.kdm__say--loud::before { border-top-color: #E4572E; }
@keyframes kdm-say-in  { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kdm-say-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.85) translateY(-6px); } }

/* the mic in the hand goes when it is dropped; the falling one tumbles, bounces and lies on the floor a while, then fades */
.kdm__fig[data-mic="off"] .kdm__mic { display: none; }

.kdm__drop {
  position: absolute;
  width: 18px;
  height: 34px;
  transform-origin: 50% 40%;
  animation: kdm-drop var(--ms, 900ms) linear forwards, kdm-vanish 500ms var(--vanish, 5200ms) forwards;
}
.kdm__drop svg { display: block; width: 100%; height: 100%; }
@keyframes kdm-drop {
  0%   { transform: translateY(0) rotate(var(--r0, -78deg)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  55%  { transform: translateY(var(--fall)) rotate(calc(var(--r0, -78deg) + 250deg)); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  72%  { transform: translateY(calc(var(--fall) - 16px)) rotate(calc(var(--r0, -78deg) + 300deg)); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  86%  { transform: translateY(var(--fall)) rotate(calc(var(--r0, -78deg) + 336deg)); animation-timing-function: ease-out; }
  93%  { transform: translateY(calc(var(--fall) - 4px)) rotate(calc(var(--r0, -78deg) + 344deg)); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--fall)) rotate(calc(var(--r0, -78deg) + 348deg)); }
}
@keyframes kdm-vanish { to { opacity: 0; } }

@media (max-width: 600px) {
  .kdm { width: 280px; height: 210px; }
  .kdm__mover { right: 10px; width: 88px; height: 129px; transform: translate(170px, 0); }
  .kdm__fx { width: 20px; height: 20px; margin-left: -10px; }
  .kdm__fx--clap { top: 54px; }
  .kdm__fx--zig, .kdm__fx--boom { width: 30px; }
  .kdm__say { right: 0; max-width: 160px; font-size: 12px; padding: 5px 9px; min-width: 62px; }
  .kdm__say::before, .kdm__say::after { right: 34px; }
  .kdm__say--loud { font-size: 14px; }
}

/* the show is for screens: nothing on paper, and nothing at all for people who ask their device for less motion
   (the script also checks, and never builds it) */
@media print, (prefers-reduced-motion: reduce) { .kdm { display: none !important; } }