style.scss

html {
	font-size: 0.75vmin;
}

body {
	background-image: linear-gradient(to bottom, #131313, #000);
	perspective: 45rem;
	transform-style: preserve-3d;
}

main {
	--color: #1fa3ef;
	display: flex;
	gap: 1rem;
	width: 100%;
	height: 100%;
	position: relative;
	align-items: center;
	justify-content: center;
	animation-composition: add;
	animation: camera-rotate 40s ease-in-out forwards infinite, 
		camera-pan 30s linear forwards infinite;
	transform: rotateY(var(--angle));
	translate: 0rem 1rem 10rem;
	transform-style: preserve-3d;
	
	.digits {
		transform-style: preserve-3d;
		.group {
			display: flex;
			gap: 2rem;
			
			.digit {
				position: relative;
				height: 16rem;
				aspect-ratio: 1/2;
				filter: drop-shadow(0px 0px 4px var(--color)) drop-shadow(0px 0px 10px var(--color));

				span {
					--act: 0;
					--signX: 1;
					--signY: 1;
					position: absolute;
					background-color: white;
					transition: all .3s cubic-bezier(.17,.67,.5,1.15);
					opacity: calc(0.03 + 0.97 * var(--act));
					animation-composition: add;
					scale: var(--signX) var(--signY);

					&.end {
						clip-path: polygon(15% 0%, 7.5% 20%, 25% 100%, 75% 100%, 92.5% 20%, 85% 0%);
						width: 100%;
						height: 10%;

						&.top {
							top: 0;
						}

						&.bottom {
							top: initial;
							bottom: 0;
							--signY: -1;
						}
					}

					&.side {
						clip-path: polygon(0% 15%, 20% 7.5%, 100% 22.5%, 100% 85%, 20% 95%, 0% 90%);
						height: 50%;
						width: 20%;

						&.left {
							top: 0;
							left: 0;

							&.bottom {
								top: initial;
								bottom: 0;
								--signY: -1;
							}
						}

						&.right {
							top: 0;
							left: initial;
							right: 0;
							--signX: -1;

							&.bottom {
								top: initial;
								--signY: -1;
								bottom: 0;
							}
						}
					}

					&.middle {
						clip-path: polygon(22.5% 0%, 6.5% 50%, 22.5% 100%, 77.5% 100%, 93.5% 50%, 77.5% 0%);
						top: 45%;
						height: 10%;
						width: 100%;
					}
				}

				&[data-digit="0"] {
					:not(.middle) {
						--act: 1;
					}
				}

				&[data-digit="1"] {
					.right {
						--act: 1;
					}
				}

				&[data-digit="2"] {
					:not(.top.left, .bottom.right) {
						--act: 1;
					}
				}

				&[data-digit="3"] {
					:not(.left) {
						--act: 1;
					}
				}

				&[data-digit="4"] {
					:not(.end, .bottom.left) {
						--act: 1;
					}
				}

				&[data-digit="5"] {
					:not(.top.right, .bottom.left) {
						--act: 1;
					}
				}

				&[data-digit="6"] {
					:not(.top.right) {
						--act: 1;
					}
				}

				&[data-digit="7"] {
					.top, .right {
						--act: 1;
					}
				}

				&[data-digit="8"] {
					> * {
						--act: 1;
					}
				}

				&[data-digit="9"] {
					:not(.bottom.left) {
						--act: 1;
					}
				}
			}
		}
	}
	
	.colon-group {
		transform-style: preserve-3d;
		.colon {
			span {
				display: flex;
				height: 16rem;
				flex-direction: column;
				justify-content: space-evenly;
				width: 4rem;
				align-items: center;
				filter: drop-shadow(0px 0px 4px var(--color)) drop-shadow(0px 0px 10px var(--color));

				&::before, &::after {
					content: '';
					display: block;
					width: 2rem;
					aspect-ratio: 1/1;
					background-color: white;
					border-radius: 2rem;
				}
			}
		}
	}
	
	.shadow {
		top: 0;
		position: absolute;
		transform-origin: bottom center;
		transform: translateY(1rem) translateZ(2rem) rotateX(-90.1deg); // 90deg won't be visible on safari
		
		.digit {
			span {
				opacity: var(--act);
			}
		}

		&.shadow1 {
			opacity: 0.5;
			filter: drop-shadow(0px 0px 4px var(--color)) 
				drop-shadow(0px 0px 10px var(--color))
				blur(4rem);
			
			> span, .digit {
				mask-image: linear-gradient(to bottom, white, rgba(0,0,0,0.5));
			}
		}

		&.shadow2 {
			opacity: 0.4;
			filter: drop-shadow(0px 0px 4px var(--color)) 
				drop-shadow(0px 0px 10px var(--color))
				blur(4px);
			
			> span, .digit {
				opacity: var(--act);
				mask-image: linear-gradient(to top, black, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0));
			}
		}
	}
}

@keyframes camera-rotate {
	0% {
		transform: rotateY(-10deg);
	}
	
	50% {
		transform: rotateY(10deg);
	}
	
	100% {
		transform: rotateY(-10deg);
	}
}

@keyframes camera-pan {
	0% {
		transform: translate(0rem, 0rem);
	}
	
	20% {
		transform: translate(1rem, 2rem);
	}
	
	40% {
		transform: translate(-2rem, 2.5rem);
	}
	
	50% {
		transform: translate(-1.5rem, 1.5rem);
	}
	
	70% {
		transform: translate(-0.5rem, -0.5rem);
	}
	
	90% {
		transform: translate(1.5rem, -1rem);
	}
	
	100% {
		transform: translate(0rem, 0rem);
	}
}

.safari {
	.digit span {
		// 3d transform with opacity animation breaks filters
		transition: none !important;

		&::before {
			content: '';
			position: absolute;
			display: block;
			// prevent the bounding box to be cut off during content change
			width: 400%;
			height: 400%;
			top: 0;
			left: 0;
			transform: translate(-50%, -50%);
		}
	}
}