.float {
  opacity: 0;
  transition: opacity 1.2s;
}

.float.appeared {
  opacity: 1;
}

#chara-aoi.float-chara .word {
  height: 0;
  background: #f78;
  color: white;
  left: 80%;
  transition: height 1.5s 0.3s, background 1s 1.5s, color 1s 1.5s, left 1s 1.5s;
}

#chara-aoi.float-chara.appeared .word {
  will-change: height, background, color, left;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #f78;
  left: calc(20% - 80px);
}

#chara-mio.float-chara .word {
  height: 0;
  background: #ff813e;
  color: white;
  right: 80%;
  transition: height 1.5s 0.3s, background 1s 1.5s, color 1s 1.5s, right 1s 1.5s;
}

#chara-mio.float-chara.appeared .word {
  will-change: height, background, color, right;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #ff813e;
  right: calc(20% - 80px);
}

#chara-hatsune.float-chara .word {
  height: 0;
  background: #944cb5;
  color: white;
  left: 80%;
  transition: height 1.5s 0.3s, background 1s 1.5s, color 1s 1.5s, left 1s 1.5s;
}

#chara-hatsune.float-chara.appeared .word {
  will-change: height, background, color, left;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  color: #944cb5;
  left: calc(20% - 80px);
}

@keyframes slidein-aoi {
  from {
    transform: translate(0, 100%);
    filter: contrast(0) sepia(1) hue-rotate(-55deg) saturate(7.5)
      brightness(1.2);
  }
  60% {
    filter: contrast(0) sepia(1) hue-rotate(-55deg) saturate(7.5)
      brightness(1.2);
  }
  70% {
    filter: contrast(0) sepia(0) hue-rotate(0) saturate(0.5) brightness(2);
  }
  to {
    transform: translate(0, 3%);
    filter: contrast(1) sepia(0) hue-rotate(0) saturate(1) brightness(1);
  }
}

@keyframes slidein-mio {
  from {
    top: 100%;
    filter: contrast(0) sepia(1) hue-rotate(-22deg) saturate(6.5)
      brightness(1.5);
  }
  60% {
    filter: contrast(0) sepia(1) hue-rotate(-22deg) saturate(6.5)
      brightness(1.5);
  }
  70% {
    filter: contrast(0) sepia(0) hue-rotate(0) saturate(0.5) brightness(2);
  }
  to {
    top: 3%;
    filter: contrast(1) sepia(0) hue-rotate(0) saturate(1) brightness(1);
  }
}

@keyframes slidein-hatsune {
  from {
    top: 100%;
    filter: contrast(0) sepia(1) hue-rotate(-150deg) saturate(8.5)
      brightness(0.5);
  }
  60% {
    filter: contrast(0) sepia(1) hue-rotate(-150deg) saturate(8.5)
      brightness(0.5);
  }
  70% {
    filter: contrast(0) sepia(0) hue-rotate(0) saturate(0.5) brightness(2);
  }
  to {
    top: 3%;
    filter: contrast(1) sepia(0) hue-rotate(0) saturate(1) brightness(1);
  }
}

#chara-aoi.float-chara.appeared .chara-main {
  animation: 1.5s 1s both slidein-aoi;
}

#chara-mio.float-chara.appeared .chara-main {
  animation: 1.5s 1s both slidein-mio;
}

#chara-hatsune.float-chara.appeared .chara-main {
  animation: 1.5s 1s both slidein-hatsune;
}

.float-chara .chara-sub {
  opacity: 0;
  transition: opacity 1s 1.5s;
}

.float-chara.appeared .chara-sub {
  will-change: opacity;
  opacity: 0.7;
}

.float-chara .chara-profile {
  opacity: 0;
  transition: opacity 1s 2s;
}

.float-chara.appeared .chara-profile {
  will-change: opacity;
  opacity: 1;
}