<commit_before>/* Put here animation specific styles */

.bubble-animation {
	height: 300px;
	position: relative;
}

.bubble {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgba(lighten($orange, 10%), .8);
	position: absolute;
	bottom: 0;
	animation: bubble-move-3 3s linear infinite;
}

// .bubble--light {
// 	background-color: lighten($orange, 30%);
// }
//
// .bubble--lighter {
// 	background-color: lighten($orange, 40%);
// }

@function calculate-distance($anim-step, $length){
	// We need to calculate the exact distance a bubble should be at every given keyframe
	// $anim-step : 100 = x : $length
	@return $anim-step * $length / 100;
}

@mixin generate-keyframe( $config-map ) {
	// Get configuration variables
	$anim-name:  map-get($config-map, 'name');
	$length: map-get($config-map, 'length');
	$steps: map-get($config-map, 'steps');
	$sway: map-get($config-map, 'sway');
	// Create the keyframes
	@keyframes $anim-name {
		$steps-length: length($steps);
		// Loop through all steps and get them. We need them in order to calculate the correct translateY distance.
		@for $i from 1 through $steps-length {
			$this-step: nth($steps, $i);
			$distance: calculate-distance($this-step, $length);
			// This is the sway factor. By multiplying it by -1 on each loop execution we are able to sway the bubble from left to right.
			$sway: $sway * -1;
			@if $steps-length - $i >= 2 { // The bubble is just moving up
				#{$this-step}% { transform: translateY(-#{$distance}) translateX(#{$sway}px); }
			} @else if $steps-length - $i == 1{ // We're in the second-to-last keyframe, let's start bursting the bubble<commit_msg>Minor cleanup<commit_after>/* Put here animation specific styles */

.bubble-animation {
	height: 300px;
	position: relative;
}

.bubble {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgba(lighten($orange, 10%), .8);
	position: absolute;
	bottom: 0;
	animation: bubble-move-3 3s linear infinite;
}

@function calculate-distance($anim-step, $length){
	// We need to calculate the exact distance a bubble should be at every given keyframe
	// $anim-step : 100 = x : $length
	@return $anim-step * $length / 100;
}

@mixin generate-keyframe( $config-map ) {
	// Get configuration variables
	$anim-name:  map-get($config-map, 'name');
	$length: map-get($config-map, 'length');
	$steps: map-get($config-map, 'steps');
	$sway: map-get($config-map, 'sway');
	// Create the keyframes
	@keyframes $anim-name {
		$steps-length: length($steps);
		// Loop through all steps and get them. We need them in order to calculate the correct translateY distance.
		@for $i from 1 through $steps-length {
			$this-step: nth($steps, $i);
			$distance: calculate-distance($this-step, $length);
			// This is the sway factor. By multiplying it by -1 on each loop execution we are able to sway the bubble from left to right.
			$sway: $sway * -1;
			@if $steps-length - $i >= 2 { // The bubble is just moving up
				#{$this-step}% { transform: translateY(-#{$distance}) translateX(#{$sway}px); }
			} @else if $steps-length - $i == 1{ // We're in the second-to-last keyframe, let's start bursting the bubble
{'fraction_non_alphanumeric': 0.15658140985651903, 'fraction_numerical': 0.017467248908296942, 'mean_word_length': 3.7023460410557183, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '3648570', 'n_tokens_mistral': 1169, 'n_tokens_neox': 1054, 'n_words': 350}