.n-gon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
}

.n-gon::before,
.n-gon::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	background-color: var(--color-bottom);
	-webkit-clip-path: var(--polygon-shape);
	clip-path: var(--polygon-shape);
	left: 50%;
	top: 50%;
	--transform: translate(-50%, -50%) scale(calc(1 - ((var(--bevel) * 1) / 100)));
	transform: var(--transform);
	box-shadow: inset 0 0 0 1px var(--clip-fix-color, #fff);
}

.n-gon::after {
	background-color: var(--color-top);
	transform: var(--transform) translateZ(var(--height));
}

.n-gon > div {
	--slice-angle: calc((var(--start-angle) + (var(--angle) * var(--i))) * 1deg);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--height);
	height: calc(50% - (var(--bevel) * 1% / 2));
	transform: translate(-100%, 0%) rotateY(90deg) rotateX(var(--slice-angle));
	transform-origin: 100% 0;
	transform-style: preserve-3d;
}

.n-gon > div::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	left: 0;
	top: 0;
	background: green;
	transform: rotateX(calc(var(--angle) * 1deg));
	transform-origin: 0 0;
	display: none;
}

.n-gon-sub > div > div,
.n-gon > div::after {
	--shade-binary: calc(var(--i) - (var(--binary) * (2 * var(--l))));
	--shades: clamp(0, (var(--shade-binary) / var(--sides)) * var(--shade-opacity), 1);
	--shade: rgba(var(--shade-color), var(--shade-color), var(--shade-color), calc(var(--shades) + var(--iso, 0)));
	--edge-size: calc(
		var(--edge-length) * var(--diameter) * ((100 - var(--bevel)) / 100) * (var(--edge-fix, 100) / 100)
	);
	content: '';
	position: absolute;
	right: calc(var(--bevel-height) * 0.5%);
	bottom: 0;
	width: calc(100% - var(--bevel-height) * 1%);
	height: var(--edge-size);
	background-color: var(--color-side);
	background-image: linear-gradient(var(--shade), var(--shade));
	display: block;
	transform: rotateX(calc(var(--edge-angle) * 1deg)) translateY(100%);
	transform-origin: 0 100%;
	box-shadow: 0 0 0 2px var(--smooth-color, rgba(0, 0, 0, 0.01));
}

.n-gon[data-slice] > div:nth-child(1) {
	background-color: var(--color-side-start);
}

.n-gon[data-slice] > div:last-child:before {
	background-color: var(--color-side-end);
	display: block;
}

.n-gon.n-gon-sub[data-slice] > div:nth-child(1) {
	background-color: transparent;
}

.n-gon {
	--diameter: calc(500 * var(--px));
	--height: calc(150 * var(--px));
	--clip-fix-color: rgba(255, 255, 255, 0.1);
	--edge-fix: 100;
	--bevel-height: 0;
	--bevel: 0;
	--shade-color: 0;
	--shade-opacity: 1;
	--color-side: #009fff;
	--color-top: #009fff;
	--color-bottom: #0b7fc4;
	--color-side-start: #0575b8;
	--color-side-end: #0b7fc4;
}

.sphere {
	--polygon-shape: polygon(
		95.0484433951% 71.6941869559%,
		81.1744900929% 89.0915741234%,
		61.1260466978% 98.7463956091%,
		38.8739533022% 98.7463956091%,
		18.8255099071% 89.0915741234%,
		4.9515566049% 71.6941869559%,
		0% 50%,
		4.9515566049% 28.3058130441%,
		18.8255099071% 10.9084258766%,
		38.8739533022% 1.2536043909%,
		61.1260466978% 1.2536043909%,
		81.1744900929% 10.9084258766%,
		95.0484433951% 28.3058130441%,
		100% 50%
	);
	--diameter: calc(60 * var(--px));
	--texture: var(--strawberry-texture);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-100%, -50%) rotateY(90deg) translateX(var(--diameter)) translateX(-50%);
	transform-style: preserve-3d;
	transform-origin: 100% 0;
}

.sphere::before,
.sphere::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: block;
	background-image: var(--texture), var(--bgi);
	background-size: 100% 100%;
	transform-origin: 50% 50%;
	--max-rotation: calc((360 + 90 + var(--cameraZ)) * 1deg);
	border-radius: 50%;
}

.sphere::before {
	background-color: orangered;
	transform: rotateY(90deg) rotateZ(calc(90deg + var(--cameraZ) * 1deg)) translateZ(-0.1px);
}

.sphere::after {
	background-color: orange;
	transform: rotateX(calc(90deg + var(--cameraZ) * 1deg)) rotateY(calc(90deg + var(--cameraY) * -1deg));
}

@-webkit-keyframes rotateSphereBefore {
	to {
		transform: rotateY(90deg) rotateZ(var(--max-rotation)) translateZ(-0.1px);
	}
}

@keyframes rotateSphereBefore {
	to {
		transform: rotateY(90deg) rotateZ(var(--max-rotation)) translateZ(-0.1px);
	}
}
@-webkit-keyframes rotateSphereAfter {
	to {
		transform: rotateX(var(--max-rotation)) rotateY(calc(90deg + var(--cameraY) * -1deg));
	}
}
@keyframes rotateSphereAfter {
	to {
		transform: rotateX(var(--max-rotation)) rotateY(calc(90deg + var(--cameraY) * -1deg));
	}
}
.leaf {
	--diameter: calc(40 * var(--px));
	--texture: var(--noise-texture);
	--angleX: 146deg;
	--angleY: 0deg;
	--angleZ: -94deg;
	--shiftZ: 76%;
	--shiftX: calc(-37 * var(--px));
	--shiftY: calc(15 * var(--px));
	--scaleX: -1;
	--shadow-color: transparent;
	--shadow-shift: calc(7 * var(--px));
	--shadow-blur: calc(7 * var(--px));
	position: absolute;
	left: var(--shiftZ);
	top: 50%;
	width: var(--diameter);
	height: var(--diameter);
	transform: translate(-100%, -50%) rotateY(90deg) translateX(var(--diameter)) translateX(-50%);
	transform-style: preserve-3d;
	transform-origin: 100% 0;
}

.leaf::after,
.leaf::before {
	content: '';
	position: absolute;
	right: var(--shiftY);
	bottom: var(--shiftX);
	width: 100%;
	height: 100%;
	display: block;
	background-image: var(--texture), var(--bgi, var(--bgi-def));
	background-size: 100% 100%;
	transform-origin: 50% 50%;
	transform: scaleX(var(--scaleX)) rotateZ(var(--angleZ)) rotateX(var(--angleX)) translateZ(var(--s1, 0px))
		rotateY(var(--angleY));
	-webkit-clip-path: polygon(
		99% 88%,
		90% 92%,
		80% 94%,
		73% 94%,
		65% 92%,
		54% 88%,
		44% 80%,
		33% 73%,
		25% 64%,
		18% 57%,
		12% 49%,
		6% 44%,
		2% 36%,
		8% 35%,
		20% 35%,
		36% 35%,
		49% 35%,
		62% 35%,
		73% 39%,
		84% 44%,
		90% 52%,
		95% 64%,
		97% 72%,
		99% 80%
	);
	clip-path: polygon(
		99% 88%,
		90% 92%,
		80% 94%,
		73% 94%,
		65% 92%,
		54% 88%,
		44% 80%,
		33% 73%,
		25% 64%,
		18% 57%,
		12% 49%,
		6% 44%,
		2% 36%,
		8% 35%,
		20% 35%,
		36% 35%,
		49% 35%,
		62% 35%,
		73% 39%,
		84% 44%,
		90% 52%,
		95% 64%,
		97% 72%,
		99% 80%
	);
}

.leaf::before {
	--s1: var(--shadow-shift);
	background-image: none;
	background-color: var(--shadow-color);
	filter: blur(var(--shadow-blur));
	border-radius: 0 50% 0 50%;
	-webkit-clip-path: none;
	clip-path: none;
	width: 85%;
	height: 61%;
}

.l4 {
	--diameter: calc(34 * var(--px));
	--angleX: 120deg;
	--angleY: 0;
	--angleZ: -96deg;
	--shiftZ: 115%;
	--shiftX: calc(-10 * var(--px));
	--shiftY: calc(14 * var(--px));
	--shadow-shift: 0;
	--shadow-blur: 0;
}

.l5 {
	--angleY: 16deg;
	--angleZ: -146deg;
	--shiftZ: -20%;
	--shiftX: calc(-21 * var(--px));
	--shiftY: calc(13 * var(--px));
}

.l6 {
	--angleX: 119deg;
	--angleZ: -160deg;
	--shiftZ: -131%;
	--shiftX: 0;
	--shiftY: calc(10 * var(--px));
	--angleY: 43deg;
}

.l7 {
	--diameter: calc(36 * var(--px));
	--angleX: 156deg;
	--angleY: 38deg;
	--angleZ: -190deg;
	--shiftZ: -10%;
	--shiftX: calc(30 * var(--px));
	--shiftY: calc(12 * var(--px));
	--shadow-shift: 0;
	--shadow-blur: 0;
}

.l8 {
	--angleX: 135deg;
	--angleY: 22deg;
	--angleZ: -170deg;
	--shiftZ: -22%;
	--shiftX: calc(1 * var(--px));
	--shiftY: calc(14 * var(--px));
}

.l9 {
	--angleX: 207deg;
	--angleY: 6deg;
	--shiftZ: -6%;
	--shiftX: calc(23 * var(--px));
}

/** ==== colors ==== */
:root {
	--strawberry-shadow: rgba(196, 65, 65, 0.75);
	--cake-base-shadow-color: #4933284a;
	--cake-base-shadow-dark-color: #7b6458;
	--cake-top-color: #e8898e;
	--cake-top-color-light: #e3a2a5;
	--cake-base-sides-color: #e5626c;
	--cake-base-sides-color-light: #ea7a82;
	--cake-base-spot-1: #ddbaa6;
	--cake-base-spot-2: #e4c7b7;
	--cake-base-sliced-shadow-color: #47362db5;
	--cake-base-inner-layer-color: #4e372c7a;
	--cake-base-glow-color: #bf333357;
	--cake-sliced-inner-layer-1-1: #e9a6a8;
	--cake-sliced-inner-layer-1-2: #ea7a82;
	--cake-sliced-inner-layer-2-1: #ec999c;
	--cake-sliced-inner-layer-2-2: #ff727c;
	--cake-base-edges-texture: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/sponge-slice.png');
	--sponge-texture: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/sponge.png');
	--strawberry-texture: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/plate.png');
	--cake-top-texture: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/cake-top.png');
	--noise-texture: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/noise.png');
}

html::before {
	background-image: radial-gradient(circle at 25% 42%, #fff, #e2cec4);
}

[data-scene]::before {
	background-color: rgba(0, 0, 0, 0.3);
}

.plate {
	--shade-color: 0;
	--color-side: #fffffb;
	--color-top: #fde8e3;
	--color-bottom: #ebe6d8;
	--color-side-start: #fff;
	--color-side-end: #fff;
	--top-shades: #baa8b3;
	--top-layer-1: #fffffa;
	--top-layer-2: #fefaef;
	--texture-top: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/plate.png');
	--texture-bottom: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/plate-bottom.png');
	--texture-bottom-color: #fde8e3;
	--texture-edges: url('https://shadowshahriar.github.io/assets/codepen/css3d-cake/textures/plate-edges.png');
}

.cake-base {
	--color-side: #f2cab6;
	--color-top: var(--cake-top-color);
	--color-bottom: #eebfa8;
	--color-side-start: #e6b7a0;
	--color-side-end: #fac9b1;
}

.n-gon.n-gon-sub.base-edges {
	--color-side: #edb58e;
	--color-bottom: #e5b899;
}

.spheres .sphere {
	--diameter: var(--sphere-d);
	--bgi: radial-gradient(circle at 0% 110%, #dab0aa 11%, #d94444);
}

.spheres > div:nth-child(3n-1) > .sphere {
	--bgi: radial-gradient(circle at 91% 50%, #d78b6b 11%, #fad3bf);
}

.leaf {
	--bgi-def: radial-gradient(circle at center, #71bc57, #65a234);
}

.l1 {
	--shadow-color: rgba(142, 73, 73, 0.331);
}

.l4 {
	--bgi: radial-gradient(circle at center, #71bc57, #487920);
}

.l5 {
	--bgi: radial-gradient(circle at center, #a4d395, #5a912d);
}

.l6 {
	--bgi: radial-gradient(circle at center, #a4d395, #71bc57);
}

.l7 {
	--bgi: radial-gradient(circle at center, #76c759, #88c357);
}

.l8 {
	--bgi: radial-gradient(circle at center, #89b81c, #68941b);
}

.l9 {
	--bgi: radial-gradient(circle at center, #82ba29, #68941b);
}

.cake-base,
.plate {
	--smooth-color: rgba(0, 0, 0, 0);
}

/** ==== geometrical configuration ==== */
/** ==== physical configuration ==== */
:root {
	--plate-length: calc(640 * var(--px));
	--plate-height: calc(20 * var(--px));
	--plate-shadow-blur: calc(30 * var(--px));
	--cake-base-shadow-blur: calc(29 * var(--px));
	--plate-shadow-transform: translate3d(-50%, -58%, -1px) scaleY(114%);
	--cake-diameter: calc(380 * var(--px));
	--cake-edges-size: calc(16 * var(--px));
	--cake-edges-height: calc(19 * var(--px));
	--cake-height: calc(134 * var(--px));
	--cake-rZ: -108deg;
	--strawberry-circle-diameter: calc(280 * var(--px));
	--strawberry-diameter: calc(60 * var(--px));
	--strawberry-start: -30;
	--strawberry-increment: 27;
	--top-cream-height: calc(20 * var(--px));
	--layer-cream-height: calc(20 * var(--px));
}

/** ==== camera configuration ==== */
[data-camera] {
	--scene-size: 0;
	--perspective: 800;
	--cameraZ: 108;
	--cameraY: 46;
	--translateZ: 10;
}

/** ==== plate shadow ==== */
[data-scene] {
	background: none;
}

[data-scene]::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--plate-length);
	height: var(--plate-length);
	transform: var(--plate-shadow-transform);
	display: block;
	border-radius: 50%;
	filter: blur(var(--plate-shadow-blur));
}

/** ==== plate ==== */
.plate {
	--sides: 14;
	--angle: 25.7142857143;
	--edge-angle: 102.8571428571;
	--edge-length: 0.222520934;
	--start-angle: 64.2857142857;
	--diameter: var(--plate-length);
	--height: var(--plate-height);
	--shade-opacity: 1;
	--polygon-shape: polygon(
		95.0484433951% 71.6941869559%,
		81.1744900929% 89.0915741234%,
		61.1260466978% 98.7463956091%,
		38.8739533022% 98.7463956091%,
		18.8255099071% 89.0915741234%,
		4.9515566049% 71.6941869559%,
		0% 50%,
		4.9515566049% 28.3058130441%,
		18.8255099071% 10.9084258766%,
		38.8739533022% 1.2536043909%,
		61.1260466978% 1.2536043909%,
		81.1744900929% 10.9084258766%,
		95.0484433951% 28.3058130441%,
		100% 50%
	);
	--bevel-height: -0.8;
	transform: translate(-50%, -50%) rotateZ(12deg);
}
.plate::before {
	background-image:
		radial-gradient(circle at center, transparent 50%, var(--texture-bottom-color)), var(--texture-bottom);
}
.plate::after {
	--layer-1: linear-gradient(0deg, var(--top-layer-1), transparent);
	--layer-2: radial-gradient(ellipse at 54% 97%, var(--top-layer-2), transparent);
	background-image: var(--layer-2), var(--texture-top), var(--layer-1);
	box-shadow: inset calc(-28 * var(--px)) calc(53 * var(--px)) calc(58 * var(--px)) calc(-29 * var(--px))
		var(--top-shades);
	border-radius: 50%;
}

.plate > div:nth-child(1) {
	--binary: 0;
	--i: 0;
	--l: -7;
}

.plate > div:nth-child(2) {
	--binary: 0;
	--i: 1;
	--l: -6;
}

.plate > div:nth-child(3) {
	--binary: 0;
	--i: 2;
	--l: -5;
}

.plate > div:nth-child(4) {
	--binary: 0;
	--i: 3;
	--l: -4;
}

.plate > div:nth-child(5) {
	--binary: 0;
	--i: 4;
	--l: -3;
}

.plate > div:nth-child(6) {
	--binary: 0;
	--i: 5;
	--l: -2;
}

.plate > div:nth-child(7) {
	--binary: 0;
	--i: 6;
	--l: -1;
}

.plate > div:nth-child(8) {
	--binary: 0;
	--i: 7;
	--l: 0;
}

.plate > div:nth-child(9) {
	--binary: 1;
	--i: 8;
	--l: 1;
}

.plate > div:nth-child(10) {
	--binary: 1;
	--i: 9;
	--l: 2;
}

.plate > div:nth-child(11) {
	--binary: 1;
	--i: 10;
	--l: 3;
}

.plate > div:nth-child(12) {
	--binary: 1;
	--i: 11;
	--l: 4;
}

.plate > div:nth-child(13) {
	--binary: 1;
	--i: 12;
	--l: 5;
}

.plate > div:nth-child(14) {
	--binary: 1;
	--i: 13;
	--l: 6;
}

.plate > div::after {
	background-image: var(--texture-edges), linear-gradient(var(--shade), var(--shade));
	background-size: auto 100%;
	background-position: 0 calc(var(--i) * 40 * var(--px));
}

/** ==== cake base ==== */
.cake-base {
	--sides: 24;
	--angle: 15;
	--edge-angle: 97.5;
	--edge-length: 0.1305261922;
	--start-angle: 75;
	--edge-fix: 102;
	--shade-color: 255;
	--shade-opacity: 0.6;
	--diameter: var(--cake-diameter);
	--height: var(--cake-height);
	--polygon-shape: polygon(
		98.2962913145% 62.9409522551%,
		50% 50%,
		50% 50%,
		50% 50%,
		62.9409522551% 98.2962913145%,
		50% 100%,
		37.0590477449% 98.2962913145%,
		25% 93.3012701892%,
		14.6446609407% 85.3553390593%,
		6.6987298108% 75%,
		1.7037086855% 62.9409522551%,
		0% 50%,
		1.7037086855% 37.0590477449%,
		6.6987298108% 25%,
		14.6446609407% 14.6446609407%,
		25% 6.6987298108%,
		37.0590477449% 1.7037086855%,
		50% 0%,
		62.9409522551% 1.7037086855%,
		75% 6.6987298108%,
		85.3553390593% 14.6446609407%,
		93.3012701892% 25%,
		98.2962913145% 37.0590477449%,
		100% 50%
	);
	--bevel-height: -0.8;
	transform: translate(-50%, -50%) translateZ(var(--plate-height)) rotateZ(var(--cake-rZ));
}

.cake-base > div:nth-child(1) {
	--binary: 0;
	--i: 0;
	--l: -12;
}

.cake-base > div:nth-child(2) {
	--binary: 0;
	--i: 1;
	--l: -11;
}

.cake-base > div:nth-child(3) {
	--binary: 0;
	--i: 2;
	--l: -10;
}

.cake-base > div:nth-child(4) {
	--binary: 0;
	--i: 3;
	--l: -9;
}

.cake-base > div:nth-child(5) {
	--binary: 0;
	--i: 4;
	--l: -8;
}

.cake-base > div:nth-child(6) {
	--binary: 0;
	--i: 5;
	--l: -7;
}

.cake-base > div:nth-child(7) {
	--binary: 0;
	--i: 6;
	--l: -6;
}

.cake-base > div:nth-child(8) {
	--binary: 0;
	--i: 7;
	--l: -5;
}

.cake-base > div:nth-child(9) {
	--binary: 0;
	--i: 8;
	--l: -4;
}

.cake-base > div:nth-child(10) {
	--binary: 0;
	--i: 9;
	--l: -3;
}

.cake-base > div:nth-child(11) {
	--binary: 0;
	--i: 10;
	--l: -2;
}

.cake-base > div:nth-child(12) {
	--binary: 0;
	--i: 11;
	--l: -1;
}

.cake-base > div:nth-child(13) {
	--binary: 0;
	--i: 12;
	--l: 0;
}

.cake-base > div:nth-child(14) {
	--binary: 1;
	--i: 13;
	--l: 1;
}

.cake-base > div:nth-child(15) {
	--binary: 1;
	--i: 14;
	--l: 2;
}

.cake-base > div:nth-child(16) {
	--binary: 1;
	--i: 15;
	--l: 3;
}

.cake-base > div:nth-child(17) {
	--binary: 1;
	--i: 16;
	--l: 4;
}

.cake-base > div:nth-child(18) {
	--binary: 1;
	--i: 17;
	--l: 5;
}

.cake-base > div:nth-child(19) {
	--binary: 1;
	--i: 18;
	--l: 6;
}

.cake-base > div:nth-child(20) {
	--binary: 1;
	--i: 19;
	--l: 7;
}

/** ==== strawberries ==== */
.spheres {
	--d: var(--strawberry-circle-diameter);
	--sphere-d: var(--strawberry-diameter);
	--start: var(--strawberry-start);
	--increment: var(--strawberry-increment);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--d);
	height: var(--d);
	transform: translate(-50%, -50%) translateZ(calc(var(--cake-height) + var(--plate-height) + (1 * var(--px))));
}

.spheres > div:nth-child(1) {
	--i: 1;
	z-index: -1;
}

.spheres > div:nth-child(2) {
	--i: 2;
	z-index: -2;
}

.spheres > div:nth-child(3) {
	--i: 3;
	z-index: -3;
}

.spheres > div:nth-child(4) {
	--i: 4;
	z-index: -4;
}

.spheres > div:nth-child(5) {
	--i: 5;
	z-index: -5;
}

.spheres > div:nth-child(6) {
	--i: 6;
	z-index: -6;
}

.spheres > div:nth-child(7) {
	--i: 7;
	z-index: -7;
}

.spheres > div:nth-child(8) {
	--i: 8;
	z-index: -8;
}

.spheres > div:nth-child(9) {
	--i: 9;
	z-index: -9;
}

.spheres > div:nth-child(10) {
	--i: 10;
	z-index: -10;
}

.spheres > div {
	--angle: calc((var(--start) + (var(--increment) * var(--i))) * 1deg);
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--sphere-d);
	height: var(--sphere-d);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(calc(var(--d) * 0.5))
		rotate(calc(var(--angle) * -1));
	transform-style: preserve-3d;
	box-shadow:
		calc(-8 * var(--px)) calc(-8 * var(--px)) calc(4 * var(--px)) 0 rgba(0, 0, 0, 0.13),
		calc(-3 * var(--px)) calc(-9 * var(--px)) calc(27 * var(--px)) 0 var(--strawberry-shadow);
}

/** ==== shadows ==== */
.cake-base-shadow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--cake-diameter);
	height: var(--cake-diameter);
	transform: translate3d(-50%, -50%, var(--plate-height));
	filter: blur(var(--cake-base-shadow-blur));
}

.cake-base-shadow::before,
.cake-base-shadow::after {
	content: '';
	position: absolute;
	display: block;
	right: 0;
	top: 0;
	background-color: var(--cake-base-shadow-color);
}

.cake-base-shadow::before {
	width: 115%;
	height: 115%;
	border-radius: 50%;
	transform: translate(11%, -12%);
	background-image: radial-gradient(circle at center, var(--cake-base-shadow-dark-color) 40%, transparent 17%);
}

.cake-base-shadow::after {
	width: 50%;
	height: 77%;
	transform: translate(70%, -13%) rotate(28deg);
	transform-origin: 0 0;
}

/** ==== decoration ==== */
.cake-base > div {
	--light: linear-gradient(-90deg, var(--cake-base-glow-color), transparent);
}

.cake-base > div::after {
	--common:
		var(--sponge-texture), linear-gradient(var(--shade), var(--shade)),
		linear-gradient(90deg, var(--cake-base-sides-color), var(--cake-base-sides-color-light)),
		linear-gradient(var(--cake-base-inner-layer-color), var(--cake-base-inner-layer-color));
	background-image: var(--light), var(--common);
	background-size:
		100% 100%,
		cover,
		100% 100%,
		var(--top-cream-height) 100%,
		var(--cake-edges-height) 100%;
	background-repeat: no-repeat, repeat, repeat, repeat-y, repeat-y;
	background-position:
		0 0,
		calc(var(--i) * 14 * var(--px)) calc(var(--i) * 11 * var(--px)),
		0 0,
		0 0,
		top right;
}

.cake-base > div:last-child::after {
	--l1: radial-gradient(circle at center, var(--cake-base-spot-1) 30%, transparent 34%);
	--l2: radial-gradient(circle at center, var(--cake-base-spot-2) 30%, transparent 34%);
	background-image: var(--light), var(--l2), var(--l1), var(--l1), var(--common);
	background-size:
		100% 100%,
		14% 14%,
		20% 20%,
		30% 30%,
		68% 83%,
		100% 100%,
		var(--top-cream-height) 100%,
		var(--cake-edges-height) 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat-y, repeat-y;
	background-position:
		0 0,
		55% 52%,
		36% 72%,
		20% 40%,
		0 0,
		0 0,
		0 0,
		top right;
}

.n-gon.cake-base > div:first-child {
	--common:
		linear-gradient(0deg, var(--cake-base-inner-layer-color) 51%, var(--color-side)), var(--sponge-texture),
		linear-gradient(var(--shade, transparent), var(--shade, transparent)),
		linear-gradient(49deg, var(--cake-base-sides-color), var(--cake-base-sides-color-light));
	background-image:
		linear-gradient(200deg, var(--cake-base-sliced-shadow-color), transparent), var(--light),
		linear-gradient(49deg, var(--cake-sliced-inner-layer-1-1), var(--cake-sliced-inner-layer-1-2)), var(--common);
	background-size:
		100% 100%,
		100% 100%,
		var(--layer-cream-height) 100%,
		var(--cake-edges-height) 1px,
		cover,
		100% 100%,
		var(--top-cream-height) 100%;
	background-repeat: repeat, no-repeat, repeat-y, repeat-y, repeat, repeat, repeat-y;
	background-position:
		0 0,
		0 0,
		top center,
		top right,
		0 0,
		0 0,
		0 0;
}

.n-gon.cake-base > div:last-child::before {
	--common:
		linear-gradient(0deg, var(--color-side), var(--cake-base-inner-layer-color) 51%), var(--sponge-texture),
		linear-gradient(var(--shade, transparent), var(--shade, transparent)),
		linear-gradient(49deg, var(--cake-base-sides-color), var(--cake-base-sides-color-light));
	background-image:
		linear-gradient(185deg, var(--cake-base-sliced-shadow-color), transparent), var(--light),
		linear-gradient(49deg, var(--cake-sliced-inner-layer-2-1), var(--cake-sliced-inner-layer-2-2)), var(--common);
	background-size:
		100% 100%,
		100% 100%,
		var(--layer-cream-height) 100%,
		var(--cake-edges-height) 1px,
		cover,
		100% 100%,
		var(--top-cream-height) 100%;
	background-repeat: repeat, no-repeat, repeat-y, repeat-y, repeat, repeat, repeat-y;
	background-position:
		0 0,
		0 0,
		top center,
		top right,
		0 0,
		0 0,
		0 0;
}

.n-gon.cake-base::after {
	background-image:
		var(--cake-top-texture),
		conic-gradient(from 106deg at center, var(--cake-top-color), var(--cake-top-color-light), var(--cake-top-color));
}

/** ==== rotation ==== */
[data-camera][data-autorotate] > [data-scene] {
	-webkit-animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration)
		var(--auto-rotate-direction) infinite;
	animation: rotateCamera var(--auto-rotate-timing-func) var(--auto-rotate-duration) var(--auto-rotate-direction)
		infinite;
}

[data-camera][data-autorotate] .sphere::before {
	-webkit-animation: rotateSphereBefore var(--auto-rotate-timing-func) var(--auto-rotate-duration)
		var(--auto-rotate-direction) infinite;
	animation: rotateSphereBefore var(--auto-rotate-timing-func) var(--auto-rotate-duration)
		var(--auto-rotate-direction) infinite;
}

[data-camera][data-autorotate] .sphere::after {
	-webkit-animation: rotateSphereAfter var(--auto-rotate-timing-func) var(--auto-rotate-duration)
		var(--auto-rotate-direction) infinite;
	animation: rotateSphereAfter var(--auto-rotate-timing-func) var(--auto-rotate-duration) var(--auto-rotate-direction)
		infinite;
}