/*******************************************
  VARIABLES
/*******************************************/

:root {
  --makoto-base-font-size: 21px !important;
  --makoto-current-size: 25svh;
  --makoto-base-size: 25svh;
  --makoto-big-size: 40svh;
  --makoto-base-speech-size: calc(var(--makoto-current-size) * 1.5);
  --makoto-base-size-halved: calc(var(--makoto-current-size) / 2);
  --makoto-circle-size: calc(var(--makoto-current-size) - calc(var(--makoto-current-size) / 5));
  --makoto-scale-factor: 1;

  /* Dreamsmithy colours */
  --dream-color-purple: #A28AF7;
  --dream-color-dark-purple: #636FF0;
  --dream-color-darker-purple: #525ECC;
  --dream-color-gold: #F9DA78;
  --makoto-color-light-blue: rgb(205, 255, 255);
  --makoto-color-lighter-blue: rgb(235, 255, 255);
  --makoto-color-purple: #86a2fd;

  /* ELEMI colours */
  --makoto-color-blue: #4facfe; /* 3399ff */
  --makoto-color-gray: #828893; /* 130, 136, 147 */
  --elemi-color-blue: rgb(205, 255, 255);
  --elemi-color-light-blue: rgb(235, 255, 255);
  --makoto-font-family: Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}


/*******************************************
  ANIMATIONS
/*******************************************/

@keyframes appear {
  0% {
    /* transform: rotateZ(-40deg) scale(0); */
    transform: scale(0);
    opacity: 0;
  }
  100% { 
    /* transform: rotateZ(0deg) scale(1); */
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes disappear {
  0% {
    /* transform: rotateZ(-40deg) scale(0); */
    transform: scale(1);
    opacity: 1;
  }
  100% { 
    /* transform: rotateZ(0deg) scale(1); */
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes bellAppear {
  0% {
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 0;
  }
  100% { 
    top: 0;
    opacity: 1;
  }
}

@keyframes bellAlarm {
  0% {
    top: calc(var(--makoto-base-font-size) * 8);
    opacity: 0;
  }
  10% {
    top: calc(var(--makoto-base-font-size) * 6);
    opacity: 1;
  }
  80% {
    top: calc(var(--makoto-base-font-size) * 6);
    opacity: 1;
  }
  100% { 
    top: calc(var(--makoto-base-font-size) * 8);
    opacity: 0;
  }
}

@keyframes bellDisappear {
  0% {
    top: 0;
    opacity: 1;
  }
  100% { 
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 0;
  }
}

@keyframes openChatLog {
  0% {
    opacity: 0;
    right: 0;
  }
  100% { 
    opacity: 1;
    right: 1vw;
  }
}

@keyframes endSpeech {
  0% {
    opacity: 1;
    top: calc(var(--makoto-base-font-size) * .5);
  }
  100% { 
    opacity: 0;
    top: calc(var(--makoto-base-font-size) * 1.6);
  }
}

@keyframes pulse {
  /* Thanks to https://codepen.io/FlorinPop17/pen/drJJzK */
	0% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(79,172,254, 0.7);
	}

	70% {
		/* transform: scale(1); */
		box-shadow: 0 0 0 10px rgba(79,172,254, 0);
	}

	100% {
		/* transform: scale(0.95); */
		box-shadow: 0 0 0 0 rgba(79,172,254, 0);
	}
}

@keyframes snurr {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes wobble {
  0% { -webkit-transform: rotate(0deg); }
  20% { -webkit-transform: rotate(2deg); }
  50% { -webkit-transform: rotate(-2deg); }
  100% { -webkit-transform: rotate(0deg); }
}

@keyframes hypercolor {
  /* From https://codepen.io/P1N2O/pen/pyBNzX */
  0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes squigglevision {
  0% {
    filter: url("#squiggly-1");
  }
  25% {
    filter: url("#squiggly-2");
  }
  50% {
    filter: url("#squiggly-3");
  }
  75% {
    filter: url("#squiggly-4");
  }
  100% {
    filter: url("#squiggly-5");
  }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(6deg); }
  17% { transform: rotate(-4deg); }
  19% { transform: rotate(2deg); }
  20% { transform: rotate(-1deg); }
  22% { transform: rotate(1deg); }
  23% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

@keyframes morph {
  0% { border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius:  30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius:  60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes rotateBrowLeft {
  from {
    transform: rotate(-20deg) scale(1);
  }
  
  to {
    transform: rotate(-35deg) scale(.95);
  }
}

@keyframes zzz {
  0% {
    color: rgba(160,84,246,0);
    font-size: var(--makoto-base-font-size);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  100% {
    color: var(--makoto-color-light-blue);
    font-size: calc(var(--makoto-base-font-size) * 2);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}


/*******************************************
  TEST
/*******************************************/

body.test {
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent linear-gradient(-225deg, #6670F1 0%, var(--dream-color-purple) 100%);
  color: #000;
  font-size: var(--makoto-base-font-size);
  font-family: var(--makoto-font-family);
  margin: 0;
  text-align: center;
  width: 100%;
  height: 100vh;

  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

body.test a, 
body.test a:visited {
  color: var(--makoto-color-purple);
}

body.test .test {
  position: absolute;
  top: calc(var(--makoto-current-size) / 3);
  left: calc(var(--makoto-current-size) / 3);
}

body#dark-mode.test:target {
  background-color: #141d26;

  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

.expressions {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FAFAF5;
  width: 33%;
  height: 100%;
}
.expressions ul {
  margin: 1rem;
  padding: 0;
  list-style: none;
}
.expressions ul li {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  text-align: left;
}


/*******************************************
  BASE
/*******************************************/

#makoto {
  z-index: 999; /* Mike the TV, ReBoot */
  position: absolute;
  bottom: 0svh;
  right: 0svh;
  /* background-size: contain; */
  font-size: calc(var(--makoto-base-font-size) * .8);
  font-family: var(--makoto-font-family);
  min-width: var(--makoto-current-size);
  min-height: var(--makoto-current-size);

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#makoto:focus {
    outline: none !important;
}

.big {
  bottom: 40svh !important;
  right: 15svh !important;
}

#makoto-agent {
  position: relative;
  width: var(--makoto-current-size);
  height: var(--makoto-current-size);
}

/* Thanks to https://codepen.io/Mrshcom/pen/kNmBGm */
#makoto-bell {
  /* border: 2px solid green; */
  z-index: 100;
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -12);
  right: calc(var(--makoto-base-font-size) * 2.25);
  display: block;
  cursor: pointer;
  width: calc(var(--makoto-base-font-size) * 5.25);
  height: calc(var(--makoto-base-font-size) * 5.25);
  font-size: calc(var(--makoto-base-font-size) * 5);
  margin: calc(var(--makoto-base-font-size) * 4) auto 0;
  text-align: center;
  transform-origin: center;
}
#makoto-bell-bell {
  /* border: 2px solid red; */
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -1);
  left: calc(var(--makoto-base-font-size) / 2);
  /* background: transparent url('chrome-extension://ccnppjjdhgmffkbjdbbpifclndeklgmo/makoto-body/img/alarm-clock_23f0.png') no-repeat center; */
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: inherit;
  height: inherit;

  opacity: 0;
  animation: bellAppear 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.5s 1 forwards;
}
#makoto-bell-alarm {
  /* border: 2px solid yellow; */
  top: calc(var(--makoto-base-font-size) * 8);
  right: calc(var(--makoto-base-font-size) * -2.5);
  position: absolute;
  font-size: calc(var(--makoto-base-font-size) * 3);
  opacity: 0;
  /* transform: scale(0);
  transform-origin: center; */
}


/*******************************************
  INFO POPUP
/*******************************************/

/* #makoto-accuracyinfo, 
#makoto-transcriptinfo {
  display: none;
  opacity: 0;
}
#makoto-accuracyinfo.active,
#makoto-transcriptinfo.active,
#makoto-accuracyinfo:target,
#makoto-transcriptinfo:target {
  display: block;
  opacity: 1;

} */

.makoto-infopop {
  position: fixed;
  /* bottom: calc(var(--makoto-base-size) * 1.5); */
  /* bottom: calc(var(--makoto-base-speech-size) / 1.2); */
  bottom: 1vh;
  /* right: calc(var(--makoto-base-size) * 1); */
  right: 1vw;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-color: rgba(130, 136, 147, .3);
  backdrop-filter: blur(.5rem);
  border: 3px solid #fff;
  border-radius: var(--makoto-base-font-size);
  font-family: var(--makoto-font);
  font-size: calc(var(--makoto-base-font-size) * .8);
  line-height: 1.25;
  overflow: hidden;
  width: calc(var(--makoto-current-size) * 1.8);
  height: 60vh;
  /* max-width: var(--makoto-base-size * 2); */
  /* padding: calc(var(--makoto-base-font-size)); */
  word-wrap: break-word;

  opacity: 0;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
  filter: drop-shadow(0 calc(var(--makoto-base-font-size) / 7) calc(var(--makoto-base-font-size) / 17) rgba(0,0,0,.1));
}

.makoto-infopop ul {
  list-style: none;
  margin: var(--makoto-base-font-size) 0;
  padding: 0;
}
.makoto-infopop ul li {
  text-align: left;
}
#makoto-response-options button,
.makoto-infopop ul li button {
  appearance: button;
  backface-visibility: hidden;
  background-color: var(--makoto-color-lighter-blue);
  /* background-color: #405cf5; */
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  line-height: 1;
  margin: calc(var(--makoto-base-font-size) / 3) 0 0;
  outline: none;
  overflow: hidden;
  padding: calc(var(--makoto-base-font-size) / 2.2) var(--makoto-base-font-size);
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  text-shadow: 0 1px #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}
#makoto-response-options button {
  width: auto;
}
#makoto-response-options button:hover,
.makoto-infopop ul li button:hover {
  background-color: #fff;
}
#makoto-response-options button:disabled,
.makoto-infopop ul li button:disabled {
  cursor: default;
}
#makoto-response-options button:focus,
.makoto-infopop ul li button:focus {
  background-color: var(--makoto-color-purple);
  /* border: 1px solid rgba(0, 0, 0, .2); */
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
  text-shadow: 0 1px rgba(255,255,255,.6);
}

#makoto-transcriptinfo {
  /* text-align: center; */
}

#makoto-transcript-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  /* height: 100%; */
  height: 50vh;
}
/* #makoto-transcript-container::before {
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -1);
  left: 0;
  content: "\201C";
  display: block;
  font-family: var(--makoto-font);
  font-size: calc(var(--makoto-base-font-size) * 4);
  width: 1rem;
  height: 1rem;
} */
#makoto-transcript-log-container {
  overflow-y: auto;
  width: 100%;
  height: 100%;
}
ul#makoto-transcript-log {
  border-radius: 1rem;
  display: flex;
  flex-direction: column-reverse;
  /* align-items: center; */
  align-items: flex-end;
  /* align-content: flex-end; */
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
}
ul#makoto-transcript-log li {
  margin: calc(var(--makoto-base-font-size) / 2) 0;
}
ul#makoto-transcript-log li.makoto-transcript-log-self {
  align-self: flex-start;
}
#makoto-transcript-preview {
  background-color: var(--makoto-color-lighter-blue);
  border: 0;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0px -3px 3px rgba(0,0,0,.05);
  font-family: var(--makoto-font);
  font-size: calc(var(--makoto-base-font-size) * .75);
  display: block;
  /* margin-left: calc(var(--makoto-base-font-size) * 2); */
  /* margin-right: calc(var(--makoto-base-font-size) / 2); */
  padding: calc(var(--makoto-base-font-size) / 2);
  width: calc(100% - var(--makoto-base-font-size));
  /* min-height: calc(var(--makoto-base-font-size) * 2); */
  height: 10vh;
}
#makoto-transcript-listening {
  z-index: 3;
  position: absolute;
  bottom: var(--makoto-base-font-size);
  right: 0;
  background: transparent no-repeat center;
  background-size: contain;
  width: calc(var(--makoto-base-font-size) * 2);
  height: calc(var(--makoto-base-font-size) * 2);

  opacity: 0;
}
#makoto-transcript-listening.on {
  opacity: 1;
}


/*******************************************
  VOICE
/*******************************************/

#makoto-voice {
  /* z-index: 3;
  position: absolute;
  top: 0; */
  /* left: calc(var(--makoto-base-speech-size) * -1); */
  /* left: calc(var(--makoto-base-size)); */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--makoto-base-speech-size);
  /* height: 100%; */
}

#makoto-speech {
  /* z-index: 1;
  position: absolute;
  top: calc(var(--makoto-base-speech-size) * .25);
  left: 0; */
  display: flex;
  opacity: 0;
  flex-direction: column;
  padding: calc(var(--makoto-base-font-size) / 2) 0;
  width: var(--makoto-base-speech-size);

  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

#makoto .speech {
  position: relative;
  background-color: #fff;
  border: 3px solid var(--makoto-color-light-blue);
  color: #000;
  border-radius: var(--makoto-base-font-size);
  font-family: var(--makoto-font);
  font-size: calc(var(--makoto-base-font-size) * .8);
  line-height: 1.25;
  width: calc(var(--makoto-base-speech-size) * .8);
  margin-left: var(--makoto-base-font-size);
  padding: calc(var(--makoto-base-font-size) / 2);
  text-align: left;
  word-wrap: break-word;

  filter: drop-shadow(0 calc(var(--makoto-base-font-size) / 7) calc(var(--makoto-base-font-size) / 17) rgba(0,0,0,.1));
}
/* Thanks to https://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */
#makoto .speech::before {
  position: absolute;
  top: calc(var(--makoto-base-font-size) * .5);
  right: calc(calc(var(--makoto-base-speech-size) * .92) - 6px);
  content: "";
  display: block;

  border-style: solid;
  /* bottom left right top */
  /* border-width: calc(var(--makoto-base-font-size) / 2) 0 calc(var(--makoto-base-font-size) / 2) calc(var(--makoto-base-font-size) * 1); */
  border-width: calc(var(--makoto-base-font-size) / 2) calc(var(--makoto-base-font-size) * 1) calc(var(--makoto-base-font-size) / 2) 0 ;
  border-color: transparent var(--makoto-color-light-blue);
  width: 0;
}
#makoto .speech::after {
  position: absolute;
  top: calc(var(--makoto-base-font-size) * .66);
  right: calc(calc(var(--makoto-base-speech-size) * .92) - 6px);
  content: "";
  display: block;

  border-style: solid;
  /* border-width: calc(var(--makoto-base-font-size) / 3) 0 calc(var(--makoto-base-font-size) / 3) calc(var(--makoto-base-font-size) * .8); */
  border-width: calc(var(--makoto-base-font-size) / 3) calc(var(--makoto-base-font-size) * .8) calc(var(--makoto-base-font-size) / 3) 0;
  border-color: transparent #fff;
  width: 0;
}

#makoto .makoto-transcript-log-self .speech {
  background-color: rgba(205, 255, 255, .7);
}
#makoto .makoto-transcript-log-self .speech::after {
  border-color: transparent rgba(205, 255, 255, .7);
}
#makoto .makoto-transcript-log-user .speech {
  background-color: rgba(255, 255, 255, .7);
  border-color: #fff;
  margin-left: 0;
  margin-right: var(--makoto-base-font-size);
}
#makoto .makoto-transcript-log-user .speech::before {
  /* right: calc(calc(var(--makoto-base-font-size) - 6px) * -1);
  border-width: calc(var(--makoto-base-font-size) / 2) 0 calc(var(--makoto-base-font-size) / 2) calc(var(--makoto-base-font-size) * 1); */
  display: none;
}
#makoto .makoto-transcript-log-user .speech::after {
  right: calc(calc(var(--makoto-base-font-size) * .92) * -1);
  border-width: calc(var(--makoto-base-font-size) / 3) 0 calc(var(--makoto-base-font-size) / 3) calc(var(--makoto-base-font-size) * .8);
}

#makoto-response-options {
  z-index: 4;
  position: absolute;
  top: calc(var(--makoto-base-speech-size) * .35);
  /* left: calc(calc(100% - calc(var(--makoto-base-speech-size) * .8)) / 3); */
  right: calc(var(--makoto-base-speech-size) * -.92);
  width: calc(var(--makoto-base-speech-size) * .8);

  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
  display: none;
  opacity: 0;
}


/*******************************************
  BODY
/*******************************************/

#makoto-body {
  z-index: 1;
  position: relative;
  width: var(--makoto-circle-size);
  height: var(--makoto-circle-size);

  filter: drop-shadow(0 calc(var(--makoto-base-font-size) / 7) calc(var(--makoto-base-font-size) / 17) rgba(0,0,0,.1));

  transform-origin: center;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
  /* transition: background 0.5s linear; */
}

#makoto-squiggle {
  position: absolute;
  display: none;
}

#makoto-agent .menu-open:checked + #makoto-body {
  transform:scale(0.7);
  transform-origin:center;
}


#makoto-body .wrap {
  position: relative;
  width: inherit;
  height: inherit;
  
  transform-origin: center;
  transition: transform 0.5s ease;
  transform: scale(0.9)
}
#makoto-body .wrap a {
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: inherit;
  height: inherit;
}

#makoto-body .state {
  /* border: 1px solid red; */
  z-index: 5;
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -1);
  right: calc(var(--makoto-base-font-size) * -1);
  font-family: var(--makoto-font);
}

/* Thanks to https://codepen.io/Charlie-93/pen/mqxWWJ */
#makoto-body .state .zzz {
  z-index: 100;
  position: absolute;
  color: var(--makoto-color-light-blue);
  font-weight: bold;
  opacity: 0;
  
  transform: translateY(100%);
}
#makoto-body .state .zzz-z {
  animation-delay: 0s;
  right: calc(var(--makoto-base-font-size) * .7);
}
#makoto-body .state .zzz-zz {
  animation-delay: 0.5s;
  right: calc(var(--makoto-base-font-size) * -.7);
}
#makoto-body .state .zzz-zzz {
  animation-delay: 1s;
  right: 0;
}


/* MAKOTO sweat drop */

@keyframes sweat {
  0% {
    top: calc(var(--makoto-base-font-size) * -2);
    opacity: 0;
  }
  10% {
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 1;
  }
  90% {
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 1;
  }
  100% { 
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 0;
  }
}

#makoto-body .state .sweat {
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -2);
  left: calc(var(--makoto-base-font-size) * -3.5);
  opacity: 0;
  font-size: calc(var(--makoto-base-font-size) * 4);
}
#makoto.state-sweat #makoto-body .state .sweat {
  animation: sweat 3s linear 0s 1; 
}

/* MAKOTO sparkle */

@keyframes sparkle {
  0% {
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 0;
  }
  10% {
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 1;
    transform: scale(1.5);
  }
  20% {
    top: calc(var(--makoto-base-font-size) * -1.3);
    transform: scale(1);
    opacity: 1;
  }
  30% {
    top: calc(var(--makoto-base-font-size) * -1.1);
    transform: scale(1.5);
  }
  40% {
    top: calc(var(--makoto-base-font-size) * -1.3);
    transform: scale(1);
  }
  90% {
    opacity: 1;
  }
  100% { 
    top: calc(var(--makoto-base-font-size) * -1);
    opacity: 0;
  }
}

@keyframes smile {
  5% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  30% {
    height: calc(var(--makoto-base-font-size) / 1.75);
  }
  35% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  50% {
    height: calc(var(--makoto-base-font-size) / 1.5);
  }
  85% {
    top: calc(var(--makoto-circle-size) / 2.2);
    height: calc(var(--makoto-base-font-size) / 1.5);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}

#makoto-body .state .sparkle {
  position: absolute;
  top: calc(var(--makoto-base-font-size) * -1);
  left: calc(var(--makoto-base-font-size) * -3.5);
  opacity: 0;
  font-size: calc(var(--makoto-base-font-size) * 4);
}
#makoto.state-sparkle #makoto-body .state .sparkle {
  animation: sparkle 3s linear 0s 1; 
}
#makoto.state-sparkle #makoto-body .face .brow {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    smile 2s ease-in-out 0s 1 forwards;
}


/* MAKOTO BLUSH */

@keyframes blush {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% { 
    opacity: 0;
  }
}

#makoto-body .state .blush {
  position: absolute;
  top: calc(var(--makoto-current-size) / 2.3);
  left: calc(var(--makoto-current-size) * (-0.63 + ((1 - var(--makoto-scale-factor)) / 10)));
  opacity: 0;
  text-align: center;
  font-size: calc(var(--makoto-current-size) / 10 );
  background-color: rgba(254, 79, 155, 0.375);
  border-radius: var(--makoto-current-size);
  color: rgba(254, 79, 155, 1);
  box-shadow: 0 0 calc(var(--makoto-base-font-size) / 2) calc(var(--makoto-base-font-size) / 2) rgba(254, 79, 155, 0.375);
  width: calc(var(--makoto-base-size-halved) / 2);
}
#makoto.state-blush #makoto-body .state .blush {
  animation: blush 3s linear 0s 1; 
}
#makoto.state-blush #makoto-body .face .brow {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    smile 2s ease-in-out 0s 1 forwards;
}


/* MAKOTO BODY / CIRCLE */

#makoto-body .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--makoto-circle-size) - calc(calc(var(--makoto-circle-size) / 10)));
  height: calc(var(--makoto-circle-size) - calc(calc(var(--makoto-circle-size) / 50)));
  border-radius: 47%;

  background: transparent linear-gradient(-225deg, #69EACB 0%, #99ffff 5%, #DAF9FB 67%, #d6ddff 100%);
  opacity: .8;

  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

#makoto-body .face {
  z-index: 4;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

#makoto-body .face .brow {
  position: absolute;
  top: calc(var(--makoto-circle-size) / 2.5);
  left: 0;
  width: calc(var(--makoto-circle-size) / 2.75);
  height: calc(var(--makoto-circle-size) / 5);
  border: calc(var(--makoto-current-size)/50) solid var(--makoto-color-purple);
  border-radius: 87% 13% 80% 20% / 72% 65% 35% 28%;
  background: #fff;
  transform: rotateZ(-15deg);

  transition: all 1s ease-in-out;
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
}
#makoto-body .face .brow.left {
  z-index: 1;
  left: calc(var(--makoto-current-size) * -.05);
}
#makoto-body .face .brow.right {
  z-index: 2;
  left: auto;
  right: calc(var(--makoto-current-size) * -.05);
  transform: rotate(15deg) scaleX(-1);
}

#makoto-body .core {
  --girth: calc(var(--makoto-circle-size) / 2);
  z-index: 2;
  top: auto;
  bottom: 10%;
  left: 10%;
  width: 80%;
  height: 80%;

  /* background: #8ec5fc; */
  /* background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%); */
  background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
  /* background-image: linear-gradient(to top, #e8198b 0%, #c7eafd 100%); */

  animation: snurr 8s linear infinite,
    squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
  opacity: 1;
  /* background-blend-mode:color-burn; */
  /* border: 1px solid red; */
}

#makoto-body .body {
  z-index: 1;
  position: relative;
  margin-left: 5%;
}

#makoto-body .one {
  z-index: 1;
  transform: rotateZ(15deg);
  animation: snurr 4s linear infinite;
  box-shadow: 0px 0px calc(var(--makoto-circle-size)/3) calc(var(--makoto-circle-size)/5) rgba(255,255,255,.2);
  animation-direction: reverse;
}
#makoto-body .two {
  z-index: 2;
  transform: rotateZ(30deg);
  animation: snurr 4.5s linear infinite,
    squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
}
#makoto-body .three {
  /* border: 1px solid red; */
  z-index: 3;
  transform: rotateZ(45deg);
  background: linear-gradient(-45deg, #69EACB, #69eab2, #b3ffab, #12fff7, #fad0c4, #ffd1ff, #96fbc4, #f9f586, #abffab, #ff7eb4, #ffff);
  background-size: 400% 400%;
  animation: snurr 6s linear infinite, hypercolor 10s infinite,
    squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
  opacity: 1;
  /* animation-direction: reverse; */
}
#makoto-body .four {
  z-index: 6;
  transform: rotateZ(90deg);
  animation: snurr 7.5s linear infinite;
  animation-direction: reverse;
  /* animation: hypercolor 5s infinite; */
}



/*******************************************
  MENU / FOREHEAD
/*******************************************/

#makoto-agent .menu {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  filter: url('#goo');
  box-sizing: border-box;
  width: var(--makoto-circle-size);
  height: var(--makoto-circle-size);
}
#makoto-agent .menu-item, 
#makoto-agent .menu-open-button {
  /* border: 1px solid red; */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  text-align: center;
  width: var(--makoto-circle-size);
  height: var(--makoto-circle-size);

  transform: translate3d(0, 0, 0);
  transition: transform ease-out 200ms;
}
#makoto-agent .menu-open {
  display: none;
}
#makoto-agent a.menu-item,
#makoto-agent a.menu-item:visited {
  color: white;
  line-height: calc(var(--makoto-circle-size) / 1.5);
  margin: calc(var(--makoto-circle-size) / 6) 0 0 calc(var(--makoto-circle-size) / 5);
  opacity: 0;
  width: calc(var(--makoto-circle-size) / 1.5);
  height: calc(var(--makoto-circle-size) / 1.5);
  text-decoration: none;

  /* transition: all .1s ease-out; */
}
#makoto-agent .hamburger {
  position: absolute;
  top: calc(var(--makoto-current-size) / 3.8);
  left: calc(var(--makoto-current-size) / 3.2);
  background: var(--makoto-color-purple);
  display: block;
  width: calc(var(--makoto-current-size) / 6);
  height: calc(var(--makoto-current-size) / 50);

  /* transition: transform 200ms; */
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
}
#makoto-agent .hamburger-1 {
  transform: translate3d(0, calc(var(--makoto-current-size) / 20 * -1), 0);
}
#makoto-agent .hamburger-2 {
  transform: translate3d(0, 0, 0);
}
#makoto-agent .hamburger-3 {
  transform: translate3d(0, calc(var(--makoto-current-size) / 20), 0);
}

#makoto-agent .menu-open:checked + #makoto-agent .menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg);
}
#makoto-agent .menu-open:checked + #makoto-agent .menu-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}
#makoto-agent .menu-open:checked + #makoto-agent .menu-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg);
}
#makoto-agent a.menu-item:hover {
  /* background: white; */
  /* color: #e91e63; */
  font-weight: bold;
  background-color: #69EACB !important;
}
#makoto-agent a.menu-item:active {
  font-weight: normal;
  background-color: #2784d5 !important;

  transform: scale(.9, .9) !important;
}
#makoto-agent .menu-item:nth-child(3) {
  transition-duration: 180ms;
}
#makoto-agent .menu-item:nth-child(4) {
  transition-duration: 180ms;
}
#makoto-agent .menu-item:nth-child(5) {
  transition-duration: 180ms;
}
/* .menu-item:nth-child(6) {
  transition-duration: 180ms;
}
.menu-item:nth-child(7) {
  transition-duration: 180ms;
}
.menu-item:nth-child(8) {
  transition-duration: 180ms;
}
.menu-item:nth-child(9) {
  transition-duration: 180ms;
} */
#makoto-agent .menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  transform: scale(1, 1) translate3d(0, 0, 0);
  transform-origin: center;
  cursor: pointer;
}

#makotoMenu {
  cursor: pointer;
}

#makotoMenu.disabled {
  pointer-events: none;
}

#makoto-agent .menu-open-button:hover {
  transform-origin: center;
  /* transform: scale(1.2, 1.2) translate3d(0, 0, 0); */
  /* transform: scale(1, 1) translate3d(0, 0, 0); */
}
#makoto-agent .menu-open:checked + #makoto-agent .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
#makoto-agent .menu-open:checked ~ #makoto-agent .menu-item {
  background-color: var(--makoto-color-purple);
  opacity: 1;
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
#makoto-agent .menu-open:checked ~ #makoto-agent .menu-item:nth-child(3) {
  transition-duration: 180ms;
  transform: translate3d(calc(cos(-1.57) * var(--makoto-circle-size)), calc(sin(-1.57) * var(--makoto-circle-size)), 0);
}
#makoto-agent .menu-open:checked ~ #makoto-agent .menu-item:nth-child(4) {
  transition-duration: 280ms;
  transform: translate3d(calc(cos(-0.5233333333) * var(--makoto-circle-size)), calc(sin(-0.5233333333) * var(--makoto-circle-size)), 0);
}
#makoto-agent .menu-open:checked ~ #makoto-agent .menu-item:nth-child(5) {
  transition-duration: 380ms;
  transform: translate3d(calc(cos(0.5233333333) * var(--makoto-circle-size)), calc(sin(0.5233333333) * var(--makoto-circle-size)), 0);
}
/* .menu-open:checked ~ .menu-item:nth-child(6) {
  transition-duration: 480ms;
  transform: translate3d(calc(cos(1.57)*105px, calc(sin(1.57) * 105px), 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  transition-duration: 580ms;
  transform: translate3d(calc(cos(2.6166666667) * 105px), calc(sin(2.6166666667) * 105px), 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
  transition-duration: 680ms;
  transform: translate3d(calc(cos(3.6633333333) * 105px), calc(sin(3.6633333333) * 105px), 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
  transition-duration: 780ms;
  transform: translate3d(calc(cos(4.71) * 105px), calc(sin(4.71) * 105px), 0);
} */


/*******************************************
  STATES
/*******************************************/


/* --------------------------------------- */
/* APPEARING */

#makoto.state-appear {
  opacity: 0;
  transform-origin: center;
  animation: appear 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 forwards;
}

/* --------------------------------------- */
/* DISAPPEARING */

#makoto.state-disappear {
  opacity: 100;
  transform-origin: center;
  animation: disappear 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 forwards;
}


/* --------------------------------------- */
/* SLEEPING */

#makoto-bell.ring #makoto-bell-bell {
  opacity: 1;
  animation: ring 2s 0s cubic-bezier(0.645, 0.045, 0.355, 1) 1;
}
#makoto-bell.ring.away #makoto-bell-bell {
  animation: bellDisappear 0.5s 0s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
#makoto-bell.ring.away #makoto-bell-alarm {
  animation: bellAlarm 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) .75s 1;
}
#makoto-bell.ring.hidden {
  display: none;
}

#makoto.state-sleeping .circle {
  animation: none;
}
#makoto.state-sleeping .hamburger {
  height: calc(var(--makoto-current-size) / 60);
}
#makoto.state-sleeping #makoto-body {
  transform: scale(.9);
}
#makoto.state-sleeping #makoto-body .face .brow {
  top: calc(var(--makoto-circle-size) / 2);
}
#makoto.state-sleeping #makoto-body .state .zzz {
  /* animation: zzz 2s ease-out 1s infinite forwards; */
  animation-name: zzz;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-direction: forwards;
  /* animation-delay: 1s; */
  opacity: 1;
}
#makoto.state-sleeping #makoto-speech {
  opacity: 0;
  top: calc(var(--makoto-base-font-size) * 1.6);
  /* animation: endSpeech .5s ease-out 0s 1 forwards; */
}

#makoto.state-awake .makoto-infopop {
  opacity: 1;
  animation: openChatLog .5s ease-out 0s 1 forwards;
}


/* --------------------------------------- */
/* SPEAKING */

#makoto.state-speaking #makoto-speech,
#makoto-voice:target #makoto-speech {
  opacity: 1;
  top: calc(var(--makoto-base-font-size) * .5);
}

/* RESPONDING */

#makoto-response-options.active {
  display: block;
  opacity: 1;
  /* top: calc(var(--makoto-base-font-size) * .5); */
}

/* GLITCH1 */
/* Thanks to https://codepen.io/konstantindenerz/pen/mdGpxKg */

@keyframes glitch1 {
  from {
    --angle: 45deg;
    transform: translateY(0);
  }

  35% {
    --angle: 360deg;
    transform: translateY(0);
  }
  36% {
    --angle: 360deg;
    transform: translateY(-1rem) scaleY(0.1) skewX(253deg);
  }

  37% {
    --angle: 360deg;
    transform: translateY(-1rem) scaleY(0.5) skewY(37deg);
  }

  38% {
    --angle: 360deg;
    transform: translateY(-0);
  }

  55% {
    --angle: 360deg;
    transform: translateY(0);
  }
  56% {
    --angle: 360deg;
    transform: translateY(-1rem) scaleY(0.1) skewX(37deg);
  }

  57% {
    --angle: 360deg;
    transform: translateY(-1rem) scaleY(0.5) skewY(253deg);
  }

  58% {
    --angle: 360deg;
    transform: translateY(-0);
  }

  to {
    --angle: 45deg;
    transform: translateY(-0);
  }
}

#makoto.state-glitch1 #makoto-body .core,
#makoto.state-glitch1 #makoto-body .face {
  animation: glitch1 4s linear 1;
}

/* GLITCH2 */

@keyframes glitch2 {
  from {
    filter: blur(0);
    transform: translateX(0);
  }

  5% {
    filter: blur(calc(var(--makoto-base-font-size) / 7));
  }
  15% {
    transform: translateX(calc(var(--makoto-base-font-size) * -1));
  }
  20% {
    transform: translateX(calc(var(--makoto-base-font-size) * 1));
  }
  25% {
    transform: translateX(calc(var(--makoto-base-font-size) * -1));
  }
  30% {
    transform: translateX(calc(var(--makoto-base-font-size) * 1));
  }
  35% {
    filter: blur(0);
    transform: translateX(0);
  }
}

#makoto.state-glitch2 #makoto-body .face {
  animation: glitch2 .7s linear 1;
}

#makoto.state-glitch2 #makoto-body .core {
  animation: glitch2 .7s .05s linear 1;
}


/* WINK */

@keyframes wink {
  15% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  30% {
    height: calc(var(--makoto-base-font-size) / 5);
  }
  35% {
    top: calc(var(--makoto-circle-size) / 2);
    height: calc(var(--makoto-base-font-size) / 5);
  }
  60% {
    height: calc(var(--makoto-circle-size) / 5);
  }
  75% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}

@keyframes winkbody {
  0% {
    transform: translateY(0);
  }
  5% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.3));
  }
  10% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.3));
  }
  15% {
    transform: translateY(calc(var(--makoto-base-font-size) * .3));
  }
  70% {
    transform: translateY(0);
  }
}

#makoto.state-wink #makoto-body,
#makoto.state-wink .menu {
  animation: winkbody 4s ease-in-out 0s;
}
#makoto.state-wink #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    wink 2s ease-in-out 0s 1 forwards;
}


/* BROWRAISE */

@keyframes browraise {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
    left: calc(var(--makoto-current-size) * -.05);
  }
  10% {
    top: calc(var(--makoto-circle-size) / 4);
    left: calc(var(--makoto-current-size) * -.05);
    transform: scale(1.1);
  }
  40% {
    top: calc(var(--makoto-circle-size) / 4);
    left: calc(var(--makoto-current-size) * -.05);
  }
  50% {
    top: calc(var(--makoto-circle-size) / 2.5);
    left: calc(var(--makoto-current-size) * -.05);
  }
}

@keyframes browraisebody {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.3));
  }
  50% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.2));
  }
  70% {
    transform: translateY(0);
  }
}

@keyframes browraisemenu {
  0% {
    transform: rotate(0deg);
  }
  8% {
    transform: rotate(10deg);
  }
  45% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

#makoto.state-browraise #makoto-body {
  animation: browraisebody 4s ease-in-out 0s;
}
#makoto.state-browraise .menu {
  animation: browraisebody 4s ease-in-out 0s,
    browraisemenu 4s ease-in-out 0s;
}
#makoto.state-browraise #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    browraise 4s ease-in-out 0s 1 forwards;
}


/* SWAY */

@keyframes sway {
  20% {
    transform: translateX(calc(var(--makoto-base-font-size) * -1));
  }
  80% {
    transform: translateX(calc(var(--makoto-base-font-size) * 1));
  }
}

#makoto.state-sway #makoto-body,
#makoto.state-sway .menu {
  animation: sway 4s ease-in-out 0s;
}


/* HOP */

@keyframes hop {
  20% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.5));
  }
  30% {
    transform: translateY(calc(var(--makoto-base-font-size) * .5));
  }
  60% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.5));
  }
  70% {
    transform: translateY(calc(var(--makoto-base-font-size) * .5));
  }
}

#makoto.state-hop #makoto-body,
#makoto.state-hop .menu {
  animation: hop 4s ease-in-out 0s;
}


/* DODGE */

@keyframes dodge {
  20% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.5));
  }
  30% {
    transform: translateX(calc(var(--makoto-base-font-size) * -1));
  }
  50% {
    transform: translateY(calc(var(--makoto-base-font-size) * .5));
  }
  80% {
    transform: translateY(calc(var(--makoto-base-font-size) * -.5)) 
      translateX(calc(var(--makoto-base-font-size) * 1));
  }
}

#makoto.state-dodge #makoto-body,
#makoto.state-dodge .menu {
  animation: dodge 4s ease-in-out 0s;
}


/* JUMPING */

@keyframes jumping {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes jumpingEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  5% {
    top: calc(var(--makoto-circle-size) / 2.35);
  }
  50% {
    top: calc(var(--makoto-circle-size) / 4);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}

#makoto.state-jumping #makoto-body {
  animation: jumping 1s ease-in-out 0s 1 forwards;
}
#makoto.state-jumping #makoto-agent .menu {
  animation: jumping 1s ease-in-out 0s 1 forwards;
}
#makoto.state-jumping #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    jumpingEye 1s ease-in-out 0s 1 forwards;
}
#makoto.state-jumping #makoto-body .face .brow.right {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    jumpingEye 1s ease-in-out .2s 1 forwards;
}


/* LISTENING LEFT / SINGLE BROW RAISE */

@keyframes questioning {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(.9);
  }
  90% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes questioningEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
    left: calc(var(--makoto-current-size) * -.05);
  }
  10% {
    top: calc(var(--makoto-circle-size) / 4);
    left: calc(var(--makoto-current-size) * -.05);
    transform: scale(1.1);
  }
  90% {
    top: calc(var(--makoto-circle-size) / 4);
    left: calc(var(--makoto-current-size) * -.05);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
    left: calc(var(--makoto-current-size) * -.05);
    /* transform: scale(1); */
  }
}
@keyframes unquestioningEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
    /* right: calc(var(--makoto-base-size) * -.05); */
    transform: rotate(15deg) scaleX(-1);
  }
  10% {
    top: calc(var(--makoto-circle-size) / 2.25);
    /* right: calc(var(--makoto-base-size) * -.07); */
    transform: rotate(15deg) scaleX(-.8);
  }
  90% {
    top: calc(var(--makoto-circle-size) / 2.25);
    /* right: calc(var(--makoto-base-size) * -.07); */
    transform: rotate(15deg) scaleX(-.8);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
    /* right: calc(var(--makoto-base-size) * -.05); */
    transform: rotate(15deg) scaleX(-1);
  }
}
@keyframes listenForeheadLeft {
  0% {
  }
  10% {
    perspective: 619px;
    perspective-origin: 144% 50%;
    transform: rotateZ(20deg) scale(.9);
  }
  90% {
    perspective: 619px;
    perspective-origin: 144% 50%;
    transform: rotateZ(20deg) scale(.9);
  }
  100% {
    perspective: 619px;
    perspective-origin: 144% 50%;
    transform: rotateZ(0) scale(1);
  }
}

#makoto.state-listening-left .menu {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
    listenForeheadLeft 4s ease-in-out 0s 1 forwards;
}
#makoto.state-listening-left #makoto-body {
  animation: questioning 4s ease-in-out 0s 1 forwards;
}
#makoto.state-listening-left #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   questioningEye 4s ease-in-out 0s 1 forwards;
}
#makoto.state-listening-left #makoto-body .face .brow.right {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   unquestioningEye 4s ease-in-out 0s 1 forwards;
}


/* SPEAKINGAURA */

@keyframes snurrspeakingaura {
  0% { transform: scale(1.1); opacity: .6; }
  5% { transform: scale(1.5); }
  10% { transform: scale(1.25); opacity: .2 }
  12% { transform: scale(1.15); }
  15% { transform: scale(1); }

  20% { transform: scale(1.1); }
  22% { transform: scale(1.5); }
  25% { transform: scale(1.25); opacity: .6 }
  28% { transform: scale(1.15); }
  30% { transform: scale(1); opacity: .2 }

  40% { transform: scale(1.2); }
  45% { transform: scale(1.8); }
  48% { transform: scale(1.1); }

  60% { transform: scale(1.3); opacity: .6 }
  62% { transform: scale(1.7); }
  65% { transform: scale(1.5); opacity: .2 }
  68% { transform: scale(1.15); }
  70% { transform: scale(1); }

  80% { transform: scale(1.2); }
  85% { transform: scale(1.5); opacity: .6 }
  88% { transform: scale(1); opacity: .2 }

  90% { transform: scale(1.2); }
  92% { transform: scale(1.6); }
  94% { transform: scale(1.3); }
  96% { transform: scale(1.5); }
  100% { transform: scale(1); opacity: 1; }
}

#makoto.state-speakingaura #makoto-body .body .circle.four {
   animation: snurr 7.5s linear infinite,
    snurrspeakingaura 3.5s linear infinite;
}


/* SPEAKING1 */

@keyframes speakingLeftEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  40% {
    top: calc(var(--makoto-circle-size) / 3);
  }
  60% {
    top: calc(var(--makoto-circle-size) / 3);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes speakingRightEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  40% {
    top: calc(var(--makoto-circle-size) / 3);
  }
  80% {
    top: calc(var(--makoto-circle-size) / 3);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}

#makoto.state-speaking1 #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   speakingLeftEye .7s ease-in-out 0s 2 forwards;
}
#makoto.state-speaking1 #makoto-body .face .brow.right {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   speakingRightEye .7s ease-in-out .05s 2 forwards;
}


/* SPEAKING2 */

@keyframes speaking2LeftEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  40% {
    top: calc(var(--makoto-circle-size) / 2.66);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes speaking2RightEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  50% {
    top: calc(var(--makoto-circle-size) / 2.66);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes rotateBody {
  0% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(15deg);
  }
  70% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(0);
  }
}

#makoto.state-speaking2 #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
  speaking2LeftEye .4s ease-in-out 0s 3 forwards;
}
#makoto.state-speaking2 #makoto-body .face .brow.right {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
  speaking2RightEye .4s ease-in-out .05s 4 forwards;
}
#makoto.state-speaking2 #makoto-agent {
  animation: rotateBody 2s ease-in-out 0s 1 forwards;
}


/* SPEAKING3 */

@keyframes speaking3LeftEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  30% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes speaking3RightEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  30% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  90% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes shrinkBody {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(.8);
  }
  70% {
    transform: scale(.8);
  }
  100% {
    transform: rotate(1);
  }
}

#makoto.state-speaking3 #makoto-body .face .brow.left {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
  speaking3LeftEye 1s ease-in-out 0s 1 forwards;
}
#makoto.state-speaking3 #makoto-body .face .brow.right {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
  speaking3RightEye 2s ease-in-out .0s 1 forwards;
}
#makoto.state-speaking3 #makoto-agent {
  animation: shrinkBody 2s ease-in-out 0s 1 forwards;
}


/* SPEAKING4 */

@keyframes speaking4Eye {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}

#makoto.state-speaking4 #makoto-body .face {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
  speaking4Eye 1s ease-in-out 0s 1 forwards;
}


/* NODDING */

@keyframes noddingEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
  30% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  50% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  65% {
    top: calc(var(--makoto-circle-size) / 1.8);
  }
  70% {
    top: calc(var(--makoto-circle-size) / 2);
  }
  75% {
    top: calc(var(--makoto-circle-size) / 1.8);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes noddingForehead {
  0% {
    top: 0;
  }
  30% {
    top: calc(var(--makoto-circle-size) / 7);
  }
  50% {
    top: calc(var(--makoto-circle-size) / 7);
  }
  65% {
    top: calc(var(--makoto-circle-size) / 6.5);
  }
  70% {
    top: calc(var(--makoto-circle-size) / 7);
  }
  75% {
    top: calc(var(--makoto-circle-size) / 6.5);
  }
  100% {
    top: 0;
  }
}

#makoto.state-nodding #makoto-body .face .brow {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   noddingEye 4s ease-in-out 0s 1 forwards;
}
#makoto.state-nodding .menu {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   noddingForehead 4s ease-in-out 0s 1 forwards;
}


/* TRANSCRIBING */

@keyframes transcribingEye {
  0% {
    top: calc(var(--makoto-circle-size) / 2.3);
  }
  100% {
    top: calc(var(--makoto-circle-size) / 2.5);
  }
}
@keyframes transcribingForehead {
  0% {
    top: calc(var(--makoto-circle-size) / 30);
  }
  100% {
    top: 0;
  }
}

#makoto.state-transcribing #makoto-body .face .brow {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   transcribingEye .5s ease-in-out 0s 10 alternate-reverse;
}
#makoto.state-transcribing .menu {
  animation: squigglevision .1s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate,
   transcribingForehead .5s ease-in-out 0s 10 alternate-reverse;
}



/*******************************************
  TWEETS
/*******************************************/

/* NOTE: Classes overwritten by Twitter hover events */
.makoto-active-tweet {
  /* border: 0.2rem solid rgb(205, 255, 255); */

  box-shadow: 0 0 0 0 rgb(205, 255, 255);
	transform: scale(.96);
	animation: pulse 2s infinite;
}