body {
	height: 100vh;
	margin: 0;
	display: grid;
	width: 100vw;
	overflow: hidden;
}

img {
	object-fit: cover;
	object-position: 63% 50%;
	width: 100vw;
	height: 100vh;
	position: absolute;
}

div {
	width: 1vmax;
	aspect-ratio: 1;
	margin: auto;
	translate: 6vmax 0;
	transform: skew(-11deg, 0);
}
div::after {
	content: "";
	position: absolute;
	width: 88%;
	aspect-ratio: 1;
	background: goldenrod;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	translate: -35% -34%;
	filter: blur(.02vmax);
}
@media (max-aspect-ratio: 1) {
	div {
		translate: -50% -50%;
		position: absolute;
		top: 50%;
		left: calc(63% - 7vh);
	}
}

svg {
	position: absolute;
	  height: auto;
	  bottom: 0;
	  width: 2vmax;
	  width: 3.7vmax;
	  translate: -1.2vmax .5vmax;
	  transform-origin: 50% 94%;
	  rotate: calc( var(--progress) * 1turn );
	  filter: drop-shadow(0.2vmax 0.2vmax .1vmax hsl(0 0 0 / 0.4));
	  fill: hsl(0 0% 16%);
}