- var text = "Drink more water!";
- var sides = 10;

.bottle
	.bottle__sides
		- sides = Math.ceil(sides/2) + 1;
		- while (sides--) {
			.bottle__side
				- for (var t = 0; t < text.length; ++t) {
					span=text[t]
				- }
		- }

$sides: 10;
$transforms:
	// z-pos (ch), angle (deg), y-scale
	(2      0 1) 
	(2      0 1) 
	(2.25 -30 1) 
	(2.75 -30 1.3) 
	(3.25 -30 1.5) 
	(3.5    0 1.75) 
	(3.5    0 1.75) 
	(3.5    0 1.75) 
	(3.3   15 1.5) 
	(3     15 1.4) 
	(2.8    0 1.3) 
	(2.8    0 1.3) 
	(3    -15 1.4) 
	(3.3  -15 1.5) 
	(3.5    0 1.75) 
	(3.5    0 1.75) 
	(3.25  15 1.5);

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: calc(24px + (36 - 24)*(100vw - 320px)/(1280 - 320));
}
body {
	background: #0b46da;
	color: #ffffff;
	display: flex;
	font: bold 1em/1.5 "DM Mono", monospace;
	height: 100vh;
	text-transform: uppercase;
}
.bottle {
	margin: auto;
	perspective: 25em;
	position: relative;
	width: 11em;
	height: 11em;
	&__sides, &__side {
		position: absolute;
		top: 50%;
		left: 0;
		transform-style: preserve-3d;
	}
	&__sides {
		animation: spin 1s linear infinite;
		top: 0;
		width: 100%;
		height: 100%;
		transform: rotateZ(90deg) rotateX(-90deg);
	}
	&__side {
		display: flex;
		$visibleSides: ceil($sides/2) + 1;
		@for $s from 1 through $sides {
			&:nth-child(#{$s}) {
				$rotateX: 360deg/$sides * ($s - 1);
				transform: translateY(-50%) rotateX($rotateX);
			}
		}
		span {
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			display: inline-block;
			width: 1ch;
			@for $c from 1 through length($transforms) {
				&:nth-child(#{$c}) {
					transform:
						translateZ(0ch + nth(nth($transforms,$c),1)) 
						rotateY(0deg + nth(nth($transforms,$c),2)) 
						scaleY(nth(nth($transforms,$c),3));
				}
			}
		}
	}
}

@keyframes spin {
	from {
		transform: rotateZ(90deg) rotateX(-90deg);
	}
	to {
		transform: rotateZ(90deg) rotateX(-90deg + 360deg/$sides);
	}
}