/* Tiktik — ESGTrack's data companion (update 158). The drawing is includes/tiktik.php; this file gives him his moods and his motion,
   assets/js/tiktik.js his life and voice. docs/TIKTIK.md explains each part.
   The rig: every moving part turns about a point in drawing units (transform-box: view-box; each drawing's viewBox starts at 0 0).
   Moods (data-mood) and gestures (data-pose) set positions; transitions carry him between them. Motion that runs by itself stops for
   visitors who ask for less motion, while the home page's animations are paused, and while he is off screen (.is-asleep). */

.tt { display: block; overflow: visible; width: 100%; height: auto; --lx: .8; --ly: -.3; --tilt: 0deg; --al: 0deg; --ar: 0deg; --ps: 1; --es: 1;
  --lid-l: -46px; --lid-r: -40px; --lid-rl: 0deg; --lid-rr: 0deg; -webkit-tap-highlight-color: transparent; }
.tt * { transform-box: view-box; }
.tt-shadow { fill: #0b2e3f; opacity: .16; }

/* ---- pivots (drawing units) */
.tt-root { transform-origin: 186px 628px; }
.tt-head { transform-origin: 190px 372px; rotate: var(--tilt); transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1); }
.tt--head .tt-head { transform-origin: 185px 262px; }   /* a head on its own tilts about its middle */
.tt-torso { transform-origin: 192px 488px; }
.tt-ant-l { transform-origin: 100px 184px; rotate: var(--al); transition: rotate .5s cubic-bezier(.34, 1.7, .64, 1); }
.tt-ant-r { transform-origin: 117px 170px; rotate: var(--ar); transition: rotate .5s cubic-bezier(.34, 1.7, .64, 1); }
.tt-eye-l { transform-origin: 166px 271px; } .tt-eye-r { transform-origin: 274px 233px; }
.tt-eye { scale: 1 1; transform: scale(var(--es)); transition: scale .07s ease-in, transform .25s ease; }
.tt-eye-l .tt-pupil { transform-origin: 166px 271px; translate: calc(var(--lx) * 15px) calc(var(--ly) * 8px); scale: var(--ps); transition: translate .16s ease-out, scale .25s ease; }
.tt-eye-r .tt-pupil { transform-origin: 274px 233px; translate: calc(var(--lx) * 8.5px) calc(var(--ly) * 5px); scale: var(--ps); transition: translate .16s ease-out, scale .25s ease; }
.tt-eyes, .tt-brows, .tt-mouths, .tt-cheek { translate: calc(var(--lx) * 3px) calc(var(--ly) * 2px); transition: translate .2s ease-out, opacity .25s ease; }
.tt-eye-l .tt-lid { translate: 0 var(--lid-l); rotate: var(--lid-rl); transform-origin: 166px 271px; transition: translate .22s ease, rotate .22s ease; }
.tt-eye-r .tt-lid { translate: 0 var(--lid-r); rotate: var(--lid-rr); transform-origin: 274px 233px; transition: translate .22s ease, rotate .22s ease; }
.tt-brow-l { transform-origin: 151px 211px; transition: translate .25s ease, rotate .25s ease; }
.tt-brow-r { transform-origin: 262px 181px; transition: translate .25s ease, rotate .25s ease; }
.tt-tablet { transform-origin: 280px 414px; transition: rotate .3s ease, translate .3s ease, opacity .2s ease, scale .2s ease; }
.tt-wave-arm { transform-origin: 298px 350px; }

/* ---- what is shown: the mouth for the mood, the gesture's arms, the signs around him */
.tt-m, .tt-happy, .tt-fx > *, .tt-confetti, .tt-arm { opacity: 0; transition: opacity .16s ease; }
.tt[data-mood="content"] .tt-m-smile, .tt:not([data-mood]) .tt-m-smile { opacity: 1; }
.tt[data-pose="hold"] .tt-arm-hold, .tt:not([data-pose]) .tt-arm-hold, .tt[data-pose="wave"] .tt-arm-wave, .tt[data-pose="think"] .tt-arm-think,
.tt[data-pose="think"] .tt-arm-think-back, .tt[data-pose="cheer"] .tt-arm-cheer { opacity: 1; }
.tt-arm-back { opacity: 1; }
.tt[data-pose="cheer"] .tt-arm-back, .tt[data-pose="wave"] .tt-arm-back { opacity: 0; }
.tt[data-pose="cheer"] .tt-tablet { opacity: 0; scale: .7; }
.tt[data-pose="wave"] .tt-tablet { rotate: 6deg; translate: -4px 8px; }
.tt[data-pose="think"] .tt-tablet { rotate: -6deg; translate: 6px 8px; }

/* happy: eyes closed in a smile, the open grin, brows up, antennae up */
.tt[data-mood="happy"] .tt-eye, .tt[data-mood="celebrating"] .tt-eye { opacity: 0; }
.tt[data-mood="happy"] .tt-happy, .tt[data-mood="celebrating"] .tt-happy { opacity: 1; }
.tt[data-mood="happy"] .tt-m-grin, .tt[data-mood="celebrating"] .tt-m-grin { opacity: 1; }
.tt[data-mood="happy"], .tt[data-mood="celebrating"] { --al: 6deg; --ar: -5deg; }
.tt[data-mood="happy"] .tt-brows, .tt[data-mood="celebrating"] .tt-brows { translate: 0 -5px; }
.tt[data-mood="happy"] .tt-cheek, .tt[data-mood="celebrating"] .tt-cheek { opacity: 1; }
.tt-cheek { opacity: .75; }
/* curious: a tilt, a little "o", one brow up, a question mark */
.tt[data-mood="curious"] { --tilt: -7deg; --lx: .75; --ly: -.65; --ps: 1.04; --ar: 8deg; --al: -4deg; }
.tt[data-mood="curious"] .tt-m-o, .tt[data-mood="curious"] .tt-fx-q { opacity: 1; }
.tt[data-mood="curious"] .tt-brow-l { translate: 0 -7px; rotate: -6deg; }
/* excited: wide eyes, the big open mouth, sparkles, antennae straight up */
.tt[data-mood="excited"] { --es: 1.07; --ps: .9; --al: 9deg; --ar: -9deg; --lx: .2; --ly: -.3; }
.tt[data-mood="excited"] .tt-m-big, .tt[data-mood="excited"] .tt-fx-spark { opacity: 1; }
.tt[data-mood="excited"] .tt-brows { translate: 0 -8px; }
/* thinking: eyes up and to the side, mouth to one side, thought dots, the ear disc glowing */
.tt[data-mood="thinking"] { --lx: -.55; --ly: -.95; --tilt: 5deg; --al: -3deg; --ar: 4deg; }
.tt[data-mood="thinking"] .tt-m-side, .tt[data-mood="thinking"] .tt-fx-dots { opacity: 1; }
.tt[data-mood="thinking"] .tt-brow-r { translate: 0 -6px; rotate: 6deg; }
.tt[data-mood="thinking"] .tt-brow-l { translate: 0 2px; }
/* surprised: eyes wide, small pupils, the "o", lines around his head, antennae spring up */
.tt[data-mood="surprised"] { --es: 1.09; --ps: .78; --lx: 0; --ly: -.1; --al: 12deg; --ar: -12deg; }
.tt[data-mood="surprised"] .tt-m-o, .tt[data-mood="surprised"] .tt-fx-burst { opacity: 1; }
.tt[data-mood="surprised"] .tt-brows { translate: 0 -10px; }
/* determined: lids down and slanted, brows down to the middle, a firm line */
.tt[data-mood="determined"] { --lid-l: -21px; --lid-r: -17px; --lid-rl: 14deg; --lid-rr: -14deg; --lx: .25; --ly: .05; --al: -5deg; --ar: 5deg; }
.tt[data-mood="determined"] .tt-m-flat { opacity: 1; }
.tt[data-mood="determined"] .tt-brow-l { translate: 3px 10px; rotate: 22deg; }
.tt[data-mood="determined"] .tt-brow-r { translate: -3px 10px; rotate: -22deg; }
/* tired: lids half closed, brows sloping down, antennae drooping */
.tt[data-mood="tired"] { --lid-l: 4px; --lid-r: 3px; --lx: .1; --ly: .3; --al: -18deg; --ar: 15deg; --tilt: 3deg; }
.tt[data-mood="tired"] .tt-m-flat, .tt[data-mood="tired"] .tt-fx-z { opacity: 1; }
.tt[data-mood="tired"] .tt-brow-l { translate: 0 4px; rotate: -10deg; }
.tt[data-mood="tired"] .tt-brow-r { translate: 0 4px; rotate: 10deg; }
/* celebrating: as happy, with both arms out, confetti and sparkles */
.tt[data-mood="celebrating"] .tt-confetti, .tt[data-mood="celebrating"] .tt-fx-spark { opacity: 1; }
.tt[data-mood="celebrating"] { --al: 10deg; --ar: -10deg; }
/* worried: brows up in the middle, small pupils looking away, a wavy mouth, a drop */
.tt[data-mood="worried"] { --ps: .84; --lx: -.6; --ly: .15; --al: -12deg; --ar: 10deg; --tilt: -3deg; }
.tt[data-mood="worried"] .tt-m-wavy, .tt[data-mood="worried"] .tt-fx-drop { opacity: 1; }
.tt[data-mood="worried"] .tt-brow-l { translate: 2px -7px; rotate: -24deg; }
.tt[data-mood="worried"] .tt-brow-r { translate: -2px -7px; rotate: 24deg; }

/* blinking (the script), talking (the script opens the mouth with each sound) */
.tt.is-blink .tt-eye { scale: 1 .08; }
.tt.is-talking .tt-m { opacity: 0 !important; }
.tt.is-talking .tt-m-flat { opacity: 1 !important; }
.tt.is-talking.is-mouth .tt-m-flat { opacity: 0 !important; }
.tt.is-talking.is-mouth .tt-m-talk { opacity: 1 !important; }
.tt.is-talking.is-mouth-wide .tt-m-talk { scale: 1.12 1.35; }
.tt-m-talk { transform-origin: 240px 289px; transition: opacity .05s linear, scale .06s ease; }
/* reading his tablet (an idle moment): the screen lights up */
.tt-screen, .tt-leaf { transition: fill .3s ease, opacity .3s ease; }
.tt.is-reading .tt-screen { fill: #3e7375; }
/* listening (someone is typing to him): eyes down towards the words, antennae forward */
.tt.is-listening { --lx: -.55; --ly: .85; --al: 5deg; --ar: 7deg; --tilt: -4deg; }

/* ---- motion that runs by itself (only with motion allowed — see the end) */
@keyframes tt-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.012 1.026; } }
@keyframes tt-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.4px; } }
@keyframes tt-sway-l { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.6deg); } }
@keyframes tt-sway-r { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2.4deg); } }
@keyframes tt-hop { 0% { transform: none; } 22% { transform: translateY(2px) scale(1.04, .95); } 48% { transform: translateY(-20px) scale(.97, 1.04); }
  74% { transform: translateY(0) scale(1.05, .94); } 88% { transform: scale(.99, 1.01); } 100% { transform: none; } }
@keyframes tt-enter { 0% { transform: translateY(46px) scale(.6); opacity: 0; } 55% { transform: translateY(-14px) scale(1.04, .97); opacity: 1; }
  78% { transform: translateY(0) scale(.98, 1.03); } 100% { transform: none; opacity: 1; } }
@keyframes tt-wave { 0% { transform: rotate(-2deg); } 100% { transform: rotate(20deg); } }   /* (the hand stays clear of his head) */
@keyframes tt-twitch { 0%, 100% { transform: none; } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } }
@keyframes tt-glow { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
@keyframes tt-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes tt-spark { 0%, 100% { transform: scale(.85) rotate(0deg); } 50% { transform: scale(1.15) rotate(12deg); } }
@keyframes tt-fall { 0% { transform: translateY(-30px) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(120px) rotate(220deg); opacity: 0; } }
@keyframes tt-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .tt.is-alive .tt-torso { animation: tt-breathe 3.6s ease-in-out infinite; }
  .tt.is-alive .tt-head { animation: tt-bob 3.6s ease-in-out infinite; }
  .tt.is-alive .tt-ant-l { animation: tt-sway-l 4.3s ease-in-out infinite; }
  .tt.is-alive .tt-ant-r { animation: tt-sway-r 3.7s ease-in-out infinite; }
  .tt.is-hop .tt-root { animation: tt-hop .62s cubic-bezier(.3, .7, .4, 1) both; }
  .tt.is-entering .tt-root { animation: tt-enter .85s cubic-bezier(.3, .8, .4, 1) both; }
  .tt.is-twitch .tt-ant-l { animation: tt-twitch .6s ease-in-out; }
  .tt[data-pose="wave"] .tt-wave-arm { animation: tt-wave .42s ease-in-out infinite alternate; }
  .tt[data-mood="thinking"] .tt-ring-glow, .tt.is-listening .tt-ring-glow { animation: tt-glow 1.2s ease-in-out infinite; }
  .tt[data-mood="thinking"] .tt-fx-dots circle { animation: tt-dot 1.2s ease-in-out infinite; }
  .tt[data-mood="thinking"] .tt-fx-dots circle:nth-child(2) { animation-delay: .2s; } .tt[data-mood="thinking"] .tt-fx-dots circle:nth-child(3) { animation-delay: .4s; }
  .tt[data-mood="excited"] .tt-fx-spark path, .tt[data-mood="celebrating"] .tt-fx-spark path { transform-box: fill-box; transform-origin: center; animation: tt-spark .9s ease-in-out infinite; }
  .tt[data-mood="celebrating"] .tt-confetti rect { animation: tt-fall 1.5s linear infinite; }
  .tt[data-mood="celebrating"] .tt-confetti rect:nth-child(2n) { animation-duration: 1.9s; animation-delay: .3s; }
  .tt[data-mood="celebrating"] .tt-confetti rect:nth-child(3n) { animation-duration: 1.7s; animation-delay: .6s; }
  .tt[data-mood="celebrating"].is-alive .tt-root, .tt[data-mood="excited"].is-alive .tt-root { animation: tt-hop .7s cubic-bezier(.3, .7, .4, 1) infinite; }
  .tt.is-asleep *, .lp-paused .tt *, .lp-paused .tt.is-alive .tt-root { animation-play-state: paused !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tt *, .tt { transition: none !important; animation: none !important; }
}

/* ---- the speech bubble and the voice button (shared by the home page and the assistant) */
.tt-bubble { position: relative; background: #fffdf4; color: #0b2e3f; border: 2px solid #0b2e3f; border-radius: 18px; padding: 10px 14px; font-size: 15px; line-height: 1.45;
  box-shadow: 0 6px 0 rgba(11, 46, 63, .18); max-width: 300px; }
.tt-bubble p { margin: 0; }
.tt-bubble::after { content: ""; position: absolute; width: 16px; height: 16px; background: inherit; border: inherit; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0;
  inset-inline-end: 38px; bottom: -9px; transform: rotate(45deg); }
[dir="rtl"] .tt-bubble::after { transform: rotate(-45deg) scaleX(-1); }
.tt-bubble.is-new { animation: none; }
@media (prefers-reduced-motion: no-preference) { .tt-bubble.is-new { animation: tt-pop .28s cubic-bezier(.34, 1.56, .64, 1) both; } }
.tt-voice { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.tt-voice svg { width: 18px; height: 18px; flex: none; }
.tt-voice .i-off { display: none; } .tt-voice[aria-pressed="false"] .i-on { display: none; } .tt-voice[aria-pressed="false"] .i-off { display: block; }
.tt-voice:focus-visible { outline: 3px solid #8cc63f; outline-offset: 2px; }
.tt-poke { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 24px; color: inherit; }
.tt-poke:focus-visible { outline: 3px solid #8cc63f; outline-offset: 6px; }