homepage/styles/finish.scss

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

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

.finish-hero {
	--dark-idle-color: #{colors.$gray-900};
	--light-idle-color: #{colors.$gray-600};
	--idle-color-1: #{colors.$teal-600};
	--idle-color-2: #{colors.$yellow-600};
	--idle-color-3: #{colors.$blue-800};
	--gradient-color-1: var(--dark-idle-color);
	--gradient-color-2: var(--dark-idle-color);
	--gradient-color-3: #{colors.$blue-500};
	--gradient-color-4: #{colors.$teal-500};
	--gradient-color-5: #{colors.$yellow-500};
	--gradient-color-6: #{colors.$teal-500};
	--gradient-color-7: #{colors.$gray-300};
	--gradient-color-8: #{colors.$yellow-500};
	--gradient-color-9: #{colors.$blue-500};
	--gradient-color-10: #{colors.$gray-300};
	--gradient-color-11: var(--dark-idle-color);
	--gradient-color-12: var(--dark-idle-color);
	--gradient-color-13: var(--dark-idle-color);

	@include colors.coderdojo-theme {
		--dark-idle-color: #{colors.$brown-800};
		--light-idle-color: #{colors.$brown-500};
		--idle-color-1: #{colors.$green-500};
		--idle-color-2: #{colors.$orange-500};
		--idle-color-3: #{colors.$yellow-500};
		--gradient-color-3: #{colors.$orange-500};
		--gradient-color-4: #{colors.$orange-400};
		--gradient-color-5: #{colors.$yellow-500};
		--gradient-color-6: #{colors.$green-500};
		--gradient-color-7: #{colors.$green-300};
		--gradient-color-8: #{colors.$orange-400};
		--gradient-color-9: #{colors.$orange-500};
		--gradient-color-10: #{colors.$green-500};
	}

	@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 {
		@for $i from 1 through 4 {
			> stop:nth-of-type(#{$i}) {
				@keyframes finish-stroke-gradient-#{$i} {
					0% {
						stop-color: var(--dark-idle-color);
					}
					15% {
						stop-color: var(--dark-idle-color);
					}
					// This is some 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 10 {
						#{15% + $j * 5%} {
							stop-color: var(--gradient-color-#{4 + $j - $i});
						}
					}
					70% {
						stop-color: var(--dark-idle-color);
					}
					100% {
						stop-color: var(--dark-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: var(--dark-idle-color);
			}
			100% {
				fill: var(--light-idle-color);
			}
		}
		@keyframes finish-hero-plug-idle {
			0% {
				fill: var(--light-idle-color);
			}
			25% {
				fill: var(--idle-color-1);
			}
			50% {
				fill: var(--idle-color-2);
			}
			75% {
				fill: var(--idle-color-3);
			}
			100% {
				fill: var(--light-idle-color);
			}
		}

		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;
	}
}