<div>
<h1 data-splitting>
	
	<span class="text">cookie</span>
	<span class="copy" aria-hidden="true">cookie</span>
		<span class="icing" aria-hidden="true">cookie</span>

</h1>
</div>

html {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: linear-gradient(to bottom, #fef9f3 0%, #f9dbc8 100%), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/xmasbg-pink.jpg);
	background-size: cover;
	background-blend-mode: color-burn;
}

div {	
	&:before {
		content: "";
		width: 100%;
		height: 100%;
		background: #f5d2ca;
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: soft-light;
    	opacity: 0.2;
		z-index: 3;
	}
}

h1 {
	font-size: 18vw;
	font-family: "This Man This Monster";
	margin: 0;
	margin-top: 20%;
	font-variation-settings: "CHEW" 3, "BITE" 5;
	color: #bca082;
	line-height: 1;
	position: relative;
}

.splitting .char:nth-child(3n + 2) {
	transform: rotate(10deg);
}

.splitting .char:nth-child(2n + 2) {
	transform: rotate(-8deg);
}

.splitting .char {
	display: inline-block;
	background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/cookie.jpg");
	background-repeat: repeat;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 400%;
	background-position: 0 0;
}

.copy {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	text-shadow: 
		0 15px 25px rgba(97, 59, 7, 0.1), 0 -3px 4px rgba(97, 59, 7, 0.1),
		0 -10px 15px rgba(#5a3e0a, 0.2), 0 3px 4px rgba(90, 66, 9, 0.11),
		0 0 5px rgba(56, 39, 22, 0.3), 0 20px 30px rgba(255, 237, 225, 0.2);

	mix-blend-mode: color;
}

.icing {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

	.char {
		transform: scale(0.7, 0.75);
		filter: blur(0);
		font-variation-settings: "CHEW" 3, "BITE" 0;
		position: relative;
		background-image: none;
		-webkit-text-fill-color: white;
		color: #fbfbfb;
		text-shadow: 
			0 8px 15px rgba(0, 0, 0, 0.2), 
			0 -2px 10px rgba(0, 0, 0, 0.15),
			0 -10px 15px rgba(245, 218, 218, 0.1);	
		
		@media screen and (min-width: 500px) {
			filter: blur(1px);
			transform: scale(0.8, 0.85);
		}

		&:after {
			content: attr(data-char);
			background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/sprinkles.jpg);
			background-size: 1000%;
			background-clip: text;
			position: absolute;
			top: 0;
			left: 0;
			-webkit-text-fill-color: transparent;
			mix-blend-mode: hard-light;
		}
	}

	.char:nth-child(3n + 2) {
		transform: 
			scale(0.7, 0.85)
			rotate(10deg);
		
		@media screen and (min-width: 500px) {
			transform: scale(0.8, 0.95) rotate(10deg); 
		}
	}

	.char:nth-child(2n + 2) {
		transform: scale(0.7) rotate(-8deg);
		@media screen and (min-width: 500px) {
			transform: scale(0.8) rotate(-8deg);

		}
	}
}


@keyframes munch {
	0% {
		font-variation-settings: "CHEW" 0, "WONK" 1.4, "BITE" 0;
	}

	25% {
		font-variation-settings: "CHEW" 2, "WONK" 8.64, "BITE" 2;
	}

	75% {
		font-variation-settings: "CHEW" 3, "WONK" 5, "BITE" 3;
	}

	100% {
		font-variation-settings: "CHEW" 5, "WONK" 10, "BITE" 5;
	}
}

Splitting();