wp-red-orbital/src/style.scss

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-red-block-red-orbital {
	--width__inner-content: 11em;
	--width__orbital: 7.5em;

	--radius: 14em;

	--duration__rotation: 50s;
	--duration__pulse: 1.5s;
	--duration__image-hover: 0.3s;
	--duration__feature-hover: 0.3s;

	position: relative;
	width: 80vw;
	height: 80vh;
	overflow: hidden;

	font-size: 1rem;

	background-color: white;

	background-color: #21759b;

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.orbitals {
		--count__orbitals: 4;
		@for $i from 1 through 12 {
			&.count-#{$i} {
				--count__orbitals: #{$i};
			}
		}

		position: relative;
		width: 0;
		height: 0;
		left: 50%;
		top: 50%;
	}

	.orbital {
		position: absolute;
		width: var(--width__orbital);
		height: var(--width__orbital);
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(
			calc(-50% + var(--x-offset)),
			calc(-50% - var(--y-offset))
		);
	}

	.orbital {
		/* --angle must be in radians so multiply by 2 * pi  */
		--angle: calc(6.2831853036 * var(--index) / var(--count__orbitals));

		/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
		--sin-term1: var(--angle);
		--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
		--sin-term3: calc(
			(var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) /
				120
		);
		--sin-term4: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle)
				) / 5040
		);
		--sin-term5: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle)
				) / 362880
		);
		--sin: calc(
			var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) +
				var(--sin-term5)
		);

		/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
		--cos-term1: 1;
		--cos-term2: calc((var(--angle) * var(--angle)) / 2);
		--cos-term3: calc(
			(var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24
		);
		--cos-term4: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle)
				) / 720
		);
		--cos-term5: calc(
			(
					var(--angle) * var(--angle) * var(--angle) * var(--angle) *
						var(--angle) * var(--angle) * var(--angle) * var(--angle)
				) / 40320
		);
		--cos: calc(
			var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) +
				var(--cos-term5)
		);

		--x-offset: calc(var(--radius) * var(--cos));
		--y-offset: calc(var(--radius) * var(--sin));

		&:nth-child(1) {
			--index: 0;
		}
		&:nth-child(2) {
			--index: 1;
		}

		&:nth-child(3) {
			--index: -1;
		}
		&:nth-child(4) {
			--index: 2;
		}

		&:nth-child(5) {
			--index: -2;
		}
		&:nth-child(6) {
			--index: 3;
		}

		&:nth-child(7) {
			--index: -3;
		}
		&:nth-child(8) {
			--index: 4;
		}

		&:nth-child(9) {
			--index: -4;
		}
		&:nth-child(10) {
			--index: 5;
		}

		&:nth-child(11) {
			--index: -5;
		}
		&:nth-child(12) {
			--index: 6;
		}
	}

	.orbital-content {
		width: 100%;
		height: 100%;
	}

	.inner-content {
		position: absolute;
		width: var(--width__inner-content);
		height: var(--width__inner-content);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		border-radius: 3em;
		overflow: hidden;
	}

	.image-hover {
		width: 100%;
		height: 100%;

		& > .img {
			position: absolute;
			width: 100%;
			height: 100%;
			inset: 0;
			object-fit: cover;

			&:last-child {
				transition: opacity var(--duration__image-hover);
				opacity: 0;
			}
		}

		&:hover > .img {
			&:last-child {
				opacity: 1;
			}
		}
	}

	.content-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bg {
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 50%;

			transition: background-color var(--duration__feature-hover);
		}
	}

	.bg--red {
		&::before {
			background-color: rgba(255, 200, 200);
		}

		&:hover::before {
			background-color: rgba(255, 150, 150);
		}
	}

	.bg--green {
		&::before {
			background-color: rgba(200, 255, 200);
		}

		&:hover::before {
			background-color: rgba(150, 255, 150);
		}
	}

	.bg--blue {
		&::before {
			background-color: rgba(200, 200, 255);
		}

		&:hover::before {
			background-color: rgba(150, 150, 255);
		}
	}

	.feature {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;

		& > *[class*=' wp-block-'],
		& > *[class^='wp-block-'],
		& > .feature-item {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			transition: opacity var(--duration__feature-hover);

			&:first-child {
				opacity: 1;
			}

			&:last-child {
				opacity: 0;
			}
		}

		&:hover {
			& > *[class*=' wp-block-'],
			& > *[class^='wp-block-'],
			& > .feature-item {
				&:first-child {
					opacity: 0;
				}

				&:last-child {
					opacity: 1;
				}
			}
		}
	}

	.orbitals:hover {
		&.clockwise,
		& .anti-clockwise {
			animation-play-state: paused;
		}
	}

	.orbital.pulse:hover {
		&::before {
			animation-play-state: paused;
		}
	}

	.clockwise {
		animation: rotate var(--duration__rotation) linear infinite running;
	}

	.anti-clockwise {
		animation: rotate var(--duration__rotation) reverse linear infinite running;
	}

	.pulse {
		&::before {
			animation: pulse var(--duration__pulse) alternate ease-in-out infinite
				running;
		}

		&:nth-child(2) {
			&::before {
				animation-delay: 2s;
			}
		}

		&:nth-child(3) {
			&::before {
				animation-delay: 0.4s;
			}
		}

		&:nth-child(4) {
			&::before {
				animation-delay: 1.5s;
			}
		}

		&:nth-child(5) {
			&::before {
				animation-delay: 0.7s;
			}
		}

		&:nth-child(6) {
			&::before {
				animation-delay: 0.2s;
			}
		}

		&:nth-child(7) {
			&::before {
				animation-delay: 1.1s;
			}
		}

		&:nth-child(8) {
			&::before {
				animation-delay: 0.4s;
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes pulse {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(1.1);
		}
	}
}

body.wp-admin .wp-block-red-block-red-orbital {
	.clockwise {
		animation-play-state: paused;
	}

	.anti-clockwise {
		animation-play-state: paused;
	}

	.pulse {
		&::before {
			animation: rotate var(--duration__rotation) reverse linear infinite
				running;
		}
	}
}