homepage/styles/finish.scss

/**
 * finish.scss
 * This is the stylesheet for the finish page that is displayed after submiting
 * a contact form.
 */

@use 'sass:list';
@use 'lib/colors';
@use 'lib/layout';
@use 'lib/motion';

.finish-hero {
	@keyframes finish-hero {
		0% {
			stroke-width: 3px;
		}
		10% {
			stroke-width: 3px;
		}
		20% {
			stroke-width: 5px;
		}
		60% {
			stroke-width: 5px;
		}
		100% {
			stroke-width: 3px;
		}
	}

	display: block;
	height: 15vmin;
	margin: layout.$huge-gap auto;
	overflow: visible;
	stroke-linecap: round;
	stroke-miterlimit: 10;
	animation: motion.$prominent 0s 1 normal both running finish-hero;

	> .stroke-gradient {
		$idle-color: colors.$gray-900;
		$colors: [ $idle-color $idle-color $idle-color colors.$blue-500
			colors.$teal-500 colors.$yellow-500 colors.$teal-500 colors.$gray-300
			colors.$yellow-500 colors.$blue-500 colors.$gray-300 $idle-color
			$idle-color $idle-color ];

		@for $i from 1 through 4 {
			> stop:nth-of-type(#{$i}) {
				@keyframes finish-stroke-gradient-#{$i} {
					0% {
						stop-color: $idle-color;
					}
					15% {
						stop-color: $idle-color;
					}
					// This is some which magic that chooses the correct colors for each
					// stop - don't change it unless you know what you are doing! In
					// general, the output will look something like this:
					//   <animation stop>: <color stop 1> <color stop 2> ...
					//   20%: 4 3 2 1
					//   25%: 5 4 3 2
					//   35%: 6 5 4 3
					//   ...
					// In order to achieve the 'moving' effect, we make sure that the
					// first and last three colors match the ones we are given at 15% and
					// 70% (before and after the core animation).
					@for $j from 1 to list.length($colors) - 3 {
						#{15% + $j * 5%} {
							stop-color: list.nth($colors, 4 + $j - $i);
						}
					}
					70% {
						stop-color: $idle-color;
					}
					100% {
						stop-color: $idle-color;
					}
				}

				animation: motion.$prominent
					0s
					1
					normal
					both
					running
					finish-stroke-gradient-#{$i};
			}
		}
	}

	> .cable {
		@keyframes finish-hero-cable {
			0% {
				transform: translateX(0.5rem);
			}
			20% {
				transform: translateX(0.5rem);
			}
			70% {
				transform: translateX(0.5rem);
			}
			100% {
				transform: none;
			}
		}

		animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
	}

	> .plug {
		@keyframes finish-hero-plug {
			0% {
				transform: translateX(-0.5rem);
			}
			20% {
				transform: translateX(-0.5rem);
			}
			70% {
				transform: translateX(-0.5rem);
			}
			100% {
				transform: none;
			}
		}
		@keyframes finish-hero-plug-transition {
			0% {
				fill: colors.$gray-900;
			}
			100% {
				fill: colors.$gray-600;
			}
		}
		@keyframes finish-hero-plug-idle {
			0% {
				fill: colors.$gray-600;
			}
			25% {
				fill: colors.$teal-600;
			}
			50% {
				fill: colors.$yellow-600;
			}
			75% {
				fill: colors.$blue-800;
			}
			100% {
				fill: colors.$gray-600;
			}
		}

		animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
			motion.$gentle 0.7s 1 normal forwards running finish-hero-plug-transition,
			motion.$background 1s infinite normal none running finish-hero-plug-idle;
	}

	> .contacts {
		@keyframes finish-hero-contacts {
			0% {
				transform: translateX(0rem);
			}
			20% {
				transform: translateX(-0.7rem);
			}
			70% {
				transform: translateX(-0.7rem);
			}
			100% {
				transform: none;
			}
		}

		animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;
	}
}