- const word = 'No Stress • No Worry •'

div.rotate
	div.circular.circular--solid(style='--shadow-color: #ababab; filter: blur(1px); opacity: 0.7;')
		each char, i in word.split('')
			span.text(data-idx=i)= char

div.rotate
	div.circular
		each char, i in word.split('')
			span.text(data-idx=i)= char

// todo: heavy refactoring

body {
	display: grid;
	justify-content: center;
	align-content: center;
	height: 100vh;
	
	overflow: hidden;
	background: #dadada;
	
	@media screen and (max-width: 1000px) {
		transform: scale(0.9);
	}
	
	@media screen and (max-width: 600px) {
		transform: scale(0.6);
	}
}

@function ease($t, $b, $c, $d) {
	// https://spicyyoghurt.com/tools/easing-functions
	// sine ease-out
	@return (-1 * $c) / 2 * (cos($PI * $t / $d) - 1) + $b;
}

@mixin rotated-text($num-letters: 14, $angle-span: 360deg, $kern: ()) {
	$angle-per-char: $angle-span / $num-letters;
	@for $i from 0 through $num-letters {
		$angle: $angle-per-char * $i;
		@if (map-has-key($kern, $i)) { $angle: map-get($kern, $i); }
		
		& > *[data-idx='#{$i}'] {
			height: 245px;
			transform: rotate($angle) scaleX(0.95);
			transform-origin: bottom center;
			line-height: 0;
		}
	}
}

.text {
	font-size: 6.5rem;
	font-family: Kanit, sans-serif;
	text-transform: uppercase;

	color: white;
	text-stroke: 2px var(--shadow-color, #282828);
	-webkit-text-stroke: 2px var(--shadow-color, #282828);
	letter-spacing: 3px;
	transform: scaleX(0.5);
	
	$shadows: 30;
	$steps: 25;
	animation: stagger 2.5s steps($steps) alternate infinite;

	@keyframes stagger {
		// for each time-step ($i/$step) of the animation...
		@for $i from 0 through $steps {
			$timestep: $i / $steps;
			
			// generate the layer of text shadows for each step of
			// the anim, placing each layer at some x-position using
			// an easing fn for the current time-step
			$text-shadow: null;
			@for $j from 1 through $shadows {
				$shadowstep: $j / $shadows;
				
				$text-shadow: (
					$text-shadow 
					#{ease($timestep, (-10px*$shadowstep), (20px*$shadowstep), 1)} (0.3px*$j) var(--shadow-color, #282828)
					#{if($j != $shadows, ',', '')}
				)
			}
			
			#{$timestep * 100}% {
				text-shadow: $text-shadow;
			}
		}
	}
}

.circular {
	width: 240px;
	height: 240px;
	border-radius: 100%;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(var(--scale, 1));
	& > * {
		position: absolute;
		top: -50%; left: 33%;
	}
	
	@include rotated-text(22, 360deg, (
		1: 19deg,
		5: 81deg,
		6: 99deg,
		7: 117deg,
		8: 134deg,
		10: 154deg,
		12: 185deg,
		13: 205deg,
		15: 238deg,
		16: 257deg,
		17: 276deg,
		21: 337deg
	));
	
	&--solid {
		--scale: 0.9;
		--shadow-color: #d5d5d5;

		.text { color: var(--shadow-color); 	}
	}
}

.rotate {
	--delay: 0;
	
	animation: rotate 5s ease-in-out alternate infinite;
	animation-delay: var(--delay);
	@keyframes rotate {
		100% { transform: rotate(360deg); }
	}
}