/* Joulesの顔。明滅や外側のにじみは使わず、ガラスの濃さをゆっくり変える。 */

.jface {
  display: block;
  overflow: visible;
}

.jface .c {
  opacity: .05;
  animation: jface-breathe 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.07s);
  transition: opacity .9s ease;
}

@keyframes jface-breathe {
  0%, 100% { opacity: .05; }
  50% { opacity: .75; }
}

.jface[data-s="listen"] .c {
  animation: jface-listen 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.15s);
}

@keyframes jface-listen {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

.jface[data-s="think"] .c,
.jface[data-s="done"] .c {
  animation: none;
  opacity: 1;
}

.jface[data-s="speak"] .c {
  animation: none;
  opacity: .8;
}

.jface[data-s="sleep"] .c {
  animation: none;
  opacity: 0;
}

.jface .bub {
  transition: opacity .25s;
}

.jface.m .bub {
  opacity: 0;
}

.jface .orb {
  opacity: 0;
  transform: scale(.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .7s cubic-bezier(.34, 1.5, .64, 1), opacity .25s;
}

.jface.m .orb {
  opacity: 1;
  transform: scale(1);
}

.jface .orb .og {
  animation: jface-orb 2.4s ease-in-out infinite;
}

@keyframes jface-orb {
  0%, 100% { opacity: .75; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jface .c,
  .jface .orb .og {
    animation: none;
  }

  .jface[data-s="idle"] .c { opacity: .4; }
  .jface[data-s="listen"] .c { opacity: .9; }
  .jface[data-s="think"] .c,
  .jface[data-s="done"] .c { opacity: 1; }
  .jface[data-s="speak"] .c { opacity: .8; }
  .jface[data-s="sleep"] .c { opacity: 0; }
  .jface .orb .og { opacity: .9; }
}