/* Houdini */
@property --cube-size {
	syntax: "<number>";
	initial-value: 100;
	inherits: true;
}

:root {
	--background-color: rgb(17, 17, 17);
	--header-color: rgb(202, 144, 69);
	--cube-size: 100;
	--orbit-radius: max(0px, min(100px, calc(50vw - 112px), calc(50vh - 112px)));
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background:
		radial-gradient(
			ellipse 100% 45% at 50% 100%,
			rgba(110, 140, 185, 0.28) 0%,
			rgba(120, 125, 135, 0.1) 45%,
			transparent 100%
		),
		var(--background-color);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.wrapper {
	width: min(200px, calc(100vw - 24px), calc(100vh - 24px));
	height: min(200px, calc(100vw - 24px), calc(100vh - 24px));
	position: fixed;
	top: 50%;
	left: 50%;
	perspective: 800px;
	margin: 0;
	animation: explode 7s 5s infinite alternate ease,
		orbit 8s infinite linear;
	offset-path: circle(var(--orbit-radius));
	offset-rotate: 0deg;
}

.description {
	padding-left: 30px;
	color: var(--header-color);
}

.cube {
	width: 100%;
	height: 100%;
	position: relative;
	animation: rotate 3s infinite linear;
	transform-style: preserve-3d;
}

.face {
	position: absolute;
	width: 100%;
	height: 100%;
	transform: var(--face-transform) translateZ(calc(var(--cube-size) * 1px));
	transform-style: preserve-3d;
}

.face::before,
.face::after {
	content: "";
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
}

.face::before {
	background: url("assets/texture1.png") center / cover no-repeat;
}

.face::after {
	background: url("assets/texture2.png") center / cover no-repeat;
	transform: rotateY(180deg);
}

.front {
	--face-transform: rotateX(0deg);
}

.back {
	--face-transform: rotateX(-180deg);
}

.left {
	--face-transform: rotateY(-90deg);
}

.right {
	--face-transform: rotateY(90deg);
}

.top {
	--face-transform: rotateX(90deg);
}

.bottom {
	--face-transform: rotateX(-90deg);
}

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

@keyframes orbit {
	0% {
		offset-distance: 0%;
	}
	100% {
		offset-distance: 100%;
	}
}

@keyframes explode {
	0%,
	100% {
		--cube-size: 100;
	}
	50% {
		--cube-size: 170;
	}
}