/* Mo and Maya, drawn once and used on every page. A face can feel things: the mood is a single attribute on the figure
   (data-mood="sad"), and the rules below turn it into eyebrows, eyes and a mouth that glide from one feeling to the next.
   The page's script only ever changes that attribute; none of the drawing is done by script. */

.bust { --skin: #c68642; --hair: #2a1a14; --shirt: #A855F7; --shirt2: #8B3FE0; display: block; width: 100%; height: auto; overflow: visible; stroke: #111; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.char-maya { --skin: #f0bf98; --hair: #3b2219; --shirt: #FF4FCB; --shirt2: #E000A0; }
.sk { fill: var(--skin); }
.hr { fill: var(--hair); }
.sh { fill: var(--shirt); }
.sh2 { fill: var(--shirt2); }
.gold { fill: var(--yellow); }
.tie { fill: var(--rose); }
.ink { fill: #111; stroke: none; }
.spot { fill: #fff; stroke: none; }
.line { fill: none; }
.blush { fill: #ff8fa3; opacity: var(--bo); stroke: none; transition: opacity .3s; }
.case { fill: #2a2330; }
.scr { fill: #e6f4ff; stroke: none; transition: fill .3s; }
.scr-off { fill: #0c0a10; stroke: none; opacity: calc(1 - var(--screen)); transition: opacity .35s; }
svg .glow { fill: #bfe6ff; stroke: none; opacity: calc(var(--screen) * .55); filter: blur(7px); transition: opacity .5s; }
.pb { fill: #fff; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .25s; }
.pb.on { opacity: 1; }
.pb.me { fill: var(--pink); }
.pdots circle { fill: #7d7a86; stroke: none; }
.pdots { opacity: 0; transition: opacity .2s; }
.her.typing .pdots { opacity: 1; }
.her.typing .pdots circle { animation: dot 1s infinite; }
.her.typing .pdots circle:nth-child(2) { animation-delay: .15s; } .her.typing .pdots circle:nth-child(3) { animation-delay: .3s; }

/* the mood: everything a face can do is one of these numbers */
.actor { --es: 1; --lx: 0px; --ly: 0px; --bl: 0deg; --br: 0deg; --by: 0px; --bo: .4; --screen: 1;
  --m-smile: 0; --m-grin: 0; --m-flat: 0; --m-frown: 0; --m-o: 0; --m-wobble: 0; --m-smirk: 0;
  --eyes: 1; --hap: 0; --shut: 0; --lovey: 0; --sweat: 0; --tear: 0; --steam: 0;
  position: relative; margin: 0; }
.sway { transform-origin: 50% 100%; }
.bust { transform-origin: 50% 100%; transition: rotate .7s var(--glide), translate .7s var(--glide); }
.eyes { opacity: var(--eyes); transition: opacity .15s; transform-box: fill-box; transform-origin: center; }
.eye { transform-box: fill-box; transform-origin: center; transform: scaleY(var(--es)); transition: transform .25s var(--glide); }
.gaze { transform: translate(var(--lx), var(--ly)); transition: transform .35s var(--glide); }
.hap, .shut, .heart-eyes { fill: none; stroke-width: 4.4; }
.hap { opacity: var(--hap); transition: opacity .15s; }
.shut { opacity: var(--shut); transition: opacity .15s; }
.heart-eyes { opacity: var(--lovey); fill: #ff4d79; stroke-width: 2.6; transition: opacity .15s; }
.brow { fill: none; stroke-width: 4.2; transform-box: fill-box; transform-origin: center; transition: transform .3s var(--glide); }
.bl { transform: translateY(var(--by)) rotate(var(--bl)); }
.br { transform: translateY(var(--by)) rotate(var(--br)); }
.lash { fill: none; stroke-width: 3; }
.mouth { fill: none; stroke-width: 3.6; transition: opacity .15s; }
.m-smile { opacity: var(--m-smile); } .m-grin { opacity: var(--m-grin); } .m-flat { opacity: var(--m-flat); } .m-frown { opacity: var(--m-frown); }
.m-o { opacity: var(--m-o); } .m-wobble { opacity: var(--m-wobble); } .m-smirk { opacity: var(--m-smirk); }
.m-grin .in-mouth { fill: #5b1a2e; } .m-grin .tongue { fill: #ff8fa3; stroke: none; } .m-o .in-mouth { fill: #5b1a2e; }
.sweat { fill: #cdeeff; opacity: var(--sweat); transition: opacity .2s; }
.tear { fill: #8fd3ff; opacity: var(--tear); transition: opacity .3s; }
.steam circle { fill: #fff; stroke: #111; stroke-width: 2.4; }
.steam { opacity: var(--steam); transition: opacity .3s; }

.actor[data-mood="calm"]     { --m-smile: 1; }
.actor[data-mood="chat"]     { --lx: 5px; --ly: 6px; --by: -2px; --m-smile: 1; --bo: .55; }
.actor[data-mood="surprise"] { --es: 1.2; --by: -7px; --m-o: 1; --bo: .3; }
.actor[data-mood="think"]    { --lx: -6px; --ly: -6px; --bl: -12deg; --by: -3px; --m-flat: 1; --bo: .2; }
.actor[data-mood="panic"]    { --es: 1.15; --bl: -18deg; --br: 18deg; --by: -5px; --m-wobble: 1; --sweat: 1; --bo: .1; }
.actor[data-mood="meh"]      { --es: .55; --ly: 3px; --by: 2px; --m-flat: 1; --bo: .1; }
.actor[data-mood="wait"]     { --lx: 4px; --ly: 4px; --bl: -6deg; --br: 6deg; --by: -6px; --m-flat: 1; --bo: .2; }
.actor[data-mood="bored"]    { --es: .5; --ly: 2px; --by: 3px; --m-flat: 1; --bo: .1; }
.actor[data-mood="annoyed"]  { --es: .6; --lx: -5px; --ly: -6px; --bl: 14deg; --br: -14deg; --by: 1px; --m-frown: 1; --bo: .5; }
.actor[data-mood="fume"]     { --es: .7; --bl: 22deg; --br: -22deg; --by: 2px; --m-frown: 1; --bo: 1; --steam: 1; }
.actor[data-mood="off"]      { --eyes: 0; --shut: 1; --bl: 12deg; --br: -12deg; --by: 3px; --m-frown: 1; --bo: .3; --screen: 0; }
.actor[data-mood="sad"]      { --es: 1.1; --ly: 6px; --bl: -18deg; --br: 18deg; --by: -1px; --m-frown: 1; --tear: 1; --bo: .15; }
.actor[data-mood="hope"]     { --es: 1.15; --lx: 3px; --ly: -3px; --bl: -4deg; --br: 4deg; --by: -6px; --m-smile: 1; --bo: .5; }
.actor[data-mood="smirk"]    { --lx: 4px; --br: -8deg; --by: -3px; --m-smirk: 1; --bo: .6; }
.actor[data-mood="grin"]     { --by: -3px; --m-grin: 1; --bo: .6; }
.actor[data-mood="happy"]    { --eyes: 0; --hap: 1; --by: -4px; --m-grin: 1; --bo: .75; }
.actor[data-mood="laugh"]    { --eyes: 0; --hap: 1; --by: -6px; --m-grin: 1; --bo: .85; }
.actor[data-mood="love"]     { --eyes: 0; --lovey: 1; --by: -5px; --m-smile: 1; --bo: .95; }
.actor[data-mood="chill"]    { --es: .55; --ly: 2px; --by: 1px; --m-smile: 1; --bo: .4; }
.actor[data-mood="curious"]  { --es: 1.1; --lx: -5px; --ly: -4px; --bl: -8deg; --by: -5px; --m-smile: 1; --bo: .3; }

/* posture */
.actor.her[data-mood="off"] .bust { rotate: -8deg; translate: -5% 0; }
.actor.him[data-mood="sad"] .bust { rotate: 3deg; translate: 0 5%; }
.actor[data-mood="happy"] .bust, .actor[data-mood="laugh"] .bust, .actor[data-mood="love"] .bust { translate: 0 -2%; }

/* alive: blinking, breathing, a hop when they send something. Only while the page is playing (the .live parts). */
.live .actor .eyes, .idle .actor .eyes { animation: blink 5.2s infinite; }
.live .actor.her .eyes, .idle .actor.her .eyes { animation-delay: -2.4s; }
.live .actor .sway, .idle .actor .sway { animation: sway 4.6s ease-in-out infinite; }
.live .actor.her .sway, .idle .actor.her .sway { animation-delay: -2.3s; }
.live .actor.hop .bust, .idle .actor.hop .bust { animation: hop .5s var(--spring); }
.live .actor .steam circle, .idle .actor .steam circle { animation: steam 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.live .actor .steam circle:nth-child(2n), .idle .actor .steam circle:nth-child(2n) { animation-delay: -.8s; }
.live .actor .sweat .dr, .idle .actor .sweat .dr { animation: drip 2.4s ease-in infinite; }
.live .actor .tear .dr, .idle .actor .tear .dr { animation: tear 2.4s ease-in infinite; }
.live .actor[data-mood="panic"] .gaze { animation: dart 1.1s infinite; }
@keyframes sway { 50% { translate: 0 -.3em; } }
@keyframes hop { 40% { scale: 1.07 .96; } 70% { scale: .98 1.03; } }
@keyframes steam { from { opacity: .9; translate: 0 6px; scale: .6; } to { opacity: 0; translate: 0 -16px; scale: 1.3; } }
@keyframes drip { 0%, 40% { translate: 0 0; opacity: 1; } 100% { translate: 0 20px; opacity: 0; } }
@keyframes tear { 0%, 30% { translate: 0 0; opacity: 1; } 100% { translate: 0 26px; opacity: 0; } }
@keyframes dart { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 60% { translate: 5px 1px; } }

/* little extras that go with them: Peek, and a speech bubble that turns up over a head */
.peek { display: block; width: 5.2rem; height: 5.2rem; border-radius: 22%; filter: drop-shadow(0 8px 10px rgba(50,25,90,.3)); }
.live .peek, .idle .peek { transform-origin: 50% 100%; animation: peek-bob 3.2s ease-in-out infinite; }
@keyframes peek-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.says { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% 0; background: var(--yellow); color: var(--on-accent); font-weight: 700; font-size: .95rem; padding: .4rem .85rem; border-radius: var(--r-m); white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.says::after { content: ""; position: absolute; left: 50%; bottom: -.3rem; width: .7rem; height: .7rem; margin-left: -.35rem; background: var(--yellow); transform: rotate(45deg); border-radius: 0 0 .2rem 0; }
.live .says { animation: say 9s infinite both; }
.idle .says { animation: say 7s infinite both; }
@keyframes say { 0%, 6% { opacity: 0; scale: .5; translate: -50% .6rem; } 12%, 78% { opacity: 1; scale: 1; translate: -50% 0; } 86%, 100% { opacity: 0; scale: .8; translate: -50% 0; } }
.live .pb.on:not(.keep) { animation: pb-pop .4s var(--spring); }
@keyframes pb-pop { from { transform: scale(.4); } }

/* Biscuit, the dog who ate a sock */
.dog { display: block; width: 100%; height: auto; overflow: visible; stroke: #111; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dg-fur { fill: #e8b77a; } .dg-ear { fill: #b9753b; } .dg-cream { fill: #fff3df; stroke: none; } .dg-ink { fill: #111; stroke: none; } .dg-spot { fill: #fff; stroke: none; } .dg-line { fill: none; }
.dg-tongue { fill: #ff8fa3; } .dg-sock { fill: #fff; } .dg-stripe { fill: none; stroke: #ff8a5b; stroke-width: 5; } .dg-toe { fill: #ff8a5b; }
.live .dog .ear-l, .idle .dog .ear-l { transform-box: fill-box; transform-origin: 100% 0; animation: flop 2.8s ease-in-out infinite; }
.live .dog .ear-r, .idle .dog .ear-r { transform-box: fill-box; transform-origin: 0 0; animation: flop 2.8s ease-in-out infinite reverse; }
.live .dog .dg-tongue, .idle .dog .dg-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: pant .9s ease-in-out infinite; }
@keyframes flop { 50% { transform: rotate(6deg); } }
@keyframes pant { 50% { transform: scaleY(1.2); } }