homepage/styles/components/_actions.scss

@use '../lib/colors';
@use '../lib/motion';
@use '../lib/layout';

// Actions are another module that is present on the home page. It shows a small
// number of CTA-style buttons which lead to different parts of the site.
.page-actions {
	padding: layout.$large-gap;
	background-color: colors.$teal-300;

	@include colors.coderdojo-theme {
		background-color: colors.$orange-300;
	}

	> *:not(:last-child) {
		margin-bottom: layout.$large-gap;
	}

	> div {
		> *:first-child {
			margin-top: 0;
		}

		> *:last-child {
			margin-bottom: 0;
		}
	}

	> a {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		margin: layout.$large-gap 0;
		padding: layout.$large-gap;
		background: colors.$gray-50;
		color: inherit;
		text-decoration: none;
		@include colors.card-shadow;
		transition: motion.$subtle background-color, motion.$subtle transform;

		> h3 {
			margin: 0;
			text-transform: uppercase;
		}

		> svg {
			align-self: center;
			margin-bottom: layout.$normal-gap;
			height: 10rem;
		}

		&:hover {
			background-color: colors.$gray-100;
			transform: translateY(-0.5rem);

			> .action-icon {
				@extend %action-icon-hover;
			}
		}
	}

	@media screen and (min-width: layout.$breakpoint) {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: layout.$large-gap;
		align-items: stretch;

		> * {
			grid-column: span 3;

			&:not(:last-child) {
				margin-bottom: 0;
			}
		}

		> a {
			margin: 0;

			&:first-of-type {
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				margin-top: #{-1 * layout.$huge-gap};
			}

			&:not(:first-of-type) {
				grid-column: span 2;
			}
		}
	}
}

.action-icon {
	overflow: visible;
	fill: colors.$main-text;
	// This seems to prevent jittering in Firefox:
	pointer-events: none;

	&:hover {
		@extend %action-icon-hover;
	}

	.emphasis-gradient > stop {
		stop-color: colors.$blue-500;
		transition: motion.$gentle stop-color;
	}

	.emphasis {
		transition: motion.$gentle transform;

		&.sun {
			transform-origin: 50% 50%;
		}

		&.heart-left {
			transform-origin: top left;
		}

		&.heart-right {
			transform-origin: top right;
		}

		&.coin {
			transform-origin: 58% 39%;
		}
	}
}

%action-icon-hover {
	.emphasis-gradient {
		@keyframes action-icon-emphasis-gradient-1 {
			0% {
				stop-color: colors.$blue-500;
			}
			40% {
				stop-color: colors.$yellow-500;
			}
			80% {
				stop-color: colors.$teal-500;
			}
		}

		@keyframes action-icon-emphasis-gradient-2 {
			0% {
				stop-color: colors.$blue-500;
			}
			20% {
				stop-color: colors.$blue-800;
			}
			60% {
				stop-color: colors.$yellow-500;
			}
			100% {
				stop-color: colors.$teal-500;
			}
		}

		@for $i from 1 through 2 {
			> stop:nth-of-type(#{$i}) {
				stop-color: colors.$teal-500;
				animation: motion.$prominent
					0s
					1
					normal
					backwards
					running
					action-icon-emphasis-gradient-#{$i};
			}
		}
	}

	.sun {
		$final-transformation: translateX(20%) translateY(10%) scale(3.4);

		@keyframes action-icon-sun {
			0% {
				transform: none;
			}
			50% {
				transform: translateX(5%) translateY(10%) scale(1.7);
			}
			100% {
				transform: $final-transformation;
			}
		}

		transform: $final-transformation;
		animation: motion.$gentle 0s 1 normal backwards running action-icon-sun;
	}

	.heart-left {
		$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
			rotate(-25deg);

		@keyframes action-icon-heart-left {
			0% {
				transform: none;
			}
			50% {
				transform: translateX(0.2rem) translateY(0.8rem) scale(1.2)
					rotate(-10deg);
			}
			100% {
				transform: $final-transformation;
			}
		}

		transform: $final-transformation;
		animation: motion.$gentle 0s 1 normal backwards running
			action-icon-heart-left;
	}

	.heart-right {
		$final-transformation: translateX(1.4rem) translateY(-0.1rem) scale(1.6)
			rotate(15deg);

		@keyframes action-icon-heart-right {
			0% {
				transform: none;
			}
			50% {
				transform: translateX(1.3rem) translateY(0.8rem) scale(1.4)
					rotate(30deg);
			}
			100% {
				transform: $final-transformation;
			}
		}

		transform: $final-transformation;
		animation: motion.$gentle 0s 1 normal backwards running
			action-icon-heart-right;
	}

	.coin {
		$final-transformation: scale(0.8);

		@keyframes action-icon-coin {
			0% {
				transform: none;
			}
			50% {
				transform: scale(1.1);
			}
			100% {
				transform: $final-transformation;
			}
		}

		transform: $final-transformation;
		animation: motion.$gentle 0s 1 normal backwards running action-icon-coin;
	}
}