<commit_before>.stack-diagram {
  display: flex;
  margin: 10rem 2rem;
  position: relative;
  height: 215px;
  width: 100%;
}

.stack-diagram__top, .stack-diagram__middle, .stack-diagram__bottom {
  margin: auto;
  left: 0; right: 0;
  position: absolute;
  width: 100%;
  transition: top 0.8s ease;
}

.stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
  display: none;
  position: absolute;
  text-align: left;
  width: 200px;
  opacity: 1;
  transition: opacity 0.3s;

  &.hide {
    opacity: 0;
  }

  h3 {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  p {
    margin-top: 0px;
    font-size: 0.9rem;
  }
}

.stack-diagram__arrow {
  position: absolute;
  border-top: 2px solid #CFA8FF;
  top: 50%;
}

.stack-diagram__dot {
  position: absolute;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: #CFA8FF;
  top: -4px;
}

.stack-diagram__top {
  z-index: 3;
  top: -34px;
  height: 215px;
  background-image: url('/assets/images/stack/top.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  &.animate {
    top: -52px;
  }

  .stack-diagram__arrow {
    right: -230px;
    width: 230px;
  }

  .stack-diagram__dot {
    right: 0;
  }
}

.stack-diagram__top-info {
  left: 0;
  top: -40px;
}

.stack-diagram__middle {
  z-index: 2;
  top: 0;
  height: 213px;
  background-image: url('/assets/images/stack/middle.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  .stack-diagram__arrow {
    left: -80px;
    width: 70px;
  }

  .stack-diagram__dot {
    left: 0;
  }
}

.stack-diagram__middle-info {
  right: 0;
  top: 20px;
}

.stack-diagram__bottom {
  z-index: 1;
  top: 63px;
  height: 186px;
  background-image: url('/assets/images/stack/bottom.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  &.animate {
    top: 80px;
  }

  .stack-diagram__arrow {
    right: -180px;
    width: 180px;
  }

  .stack-diagram__dot {
    right: 0;
  }
}

.stack-diagram__bottom-info {
  width: 280px;
  left: 0;
  top: 80px;
}

@include break($tablet-landscape) {
  .stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
    display: block;
  }
}

@include break($desktop-small) {
  .stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
    width: 250px;
  }

  .stack-diagram__top-info {
    //left: 60px;
  }

  .stack-diagram__bottom-info {
    //left: 50px;
  }
}<commit_msg>Add annotation animation (fade from top to bottom)<commit_after>.stack-diagram {
  display: flex;
  margin: 10rem 2rem;
  position: relative;
  height: 215px;
  width: 100%;
}

.stack-diagram__top, .stack-diagram__middle, .stack-diagram__bottom {
  margin: auto;
  left: 0; right: 0;
  position: absolute;
  width: 100%;
  transition: top 0.8s ease;
}

.stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
  display: none;
  position: absolute;
  text-align: left;
  width: 200px;
  opacity: 1;
  transition: all 0.3s;

  &.hide {
    opacity: 0;
  }

  h3 {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  p {
    margin-top: 0px;
    font-size: 0.9rem;
  }
}

.stack-diagram__arrow {
  position: absolute;
  border-top: 2px solid #CFA8FF;
  top: 50%;
}

.stack-diagram__dot {
  position: absolute;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: #CFA8FF;
  top: -4px;
}

.stack-diagram__top {
  z-index: 3;
  top: -34px;
  height: 215px;
  background-image: url('/assets/images/stack/top.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  &.animate {
    top: -52px;
  }

  .stack-diagram__arrow {
    right: -230px;
    width: 230px;
  }

  .stack-diagram__dot {
    right: 0;
  }
}

.stack-diagram__top-info {
  left: 0;
  top: -40px;

  &.hide {
    top: -60px;
  }
}

.stack-diagram__middle {
  z-index: 2;
  top: 0;
  height: 213px;
  background-image: url('/assets/images/stack/middle.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  .stack-diagram__arrow {
    left: -80px;
    width: 70px;
  }

  .stack-diagram__dot {
    left: 0;
  }
}

.stack-diagram__middle-info {
  right: 0;
  top: 20px;

  &.hide {
    top: 0;
  }
}

.stack-diagram__bottom {
  z-index: 1;
  top: 63px;
  height: 186px;
  background-image: url('/assets/images/stack/bottom.png');
  background-size: 404px auto;
  background-repeat: no-repeat;
  background-position: center;

  &.animate {
    top: 80px;
  }

  .stack-diagram__arrow {
    right: -180px;
    width: 180px;
  }

  .stack-diagram__dot {
    right: 0;
  }
}

.stack-diagram__bottom-info {
  width: 280px;
  left: 0;
  top: 80px;

  &.hide {
    top: 60px;
  }
}

@include break($tablet-landscape) {
  .stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
    display: block;
  }
}

@include break($desktop-small) {
  .stack-diagram__top-info, .stack-diagram__middle-info, .stack-diagram__bottom-info {
    width: 250px;
  }
}
{'fraction_non_alphanumeric': 0.14732928976716886, 'fraction_numerical': 0.04206613187243201, 'mean_word_length': 2.8727272727272726, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7365592', 'n_tokens_mistral': 2271, 'n_tokens_neox': 2045, 'n_words': 400}