.c02 {
  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, #333333 50%);
  background-size: 100% 200%;
  background-position: 0% -100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }
  .c02.active {
    animation-name: kf_c02;
    animation-duration: 2s;
    animation-fill-mode: forwards; }

@keyframes kf_c02 {
  100% {
    background-position: 0% 100%; } }
.s01 {
  text-anchor: start;
  dominant-baseline: hanging; }
  .s01.active {
    stroke-dasharray: 500;
    stroke: #678098;
    animation-name: kf_s01;
    animation-duration: 2s;
    animation-fill-mode: forwards; }

@keyframes kf_s01 {
  0% {
    stroke-dashoffset: 500;
    stroke-width: 0.5px;
    fill: transparent; }
  40% {
    fill: transparent; }
  60% {
    stroke-width: 0.5px; }
  90% {
    stroke-dashoffset: 0; }
  100% {
    stroke-width: 0px;
    fill: #678098; } }