.segmenter {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.segmenter__background,
.segmenter__pieces,
.segmenter__piece-wrap,
.segmenter__piece-parallax,
.segmenter__piece {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.segmenter__piece-parallax {
	-webkit-transition: -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
}

.segmenter__pieces {
	-webkit-perspective: 400px;
	perspective: 400px;
}

.segmenter__background,
.segmenter__piece {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.segmenter__shadow {
	position: absolute;
    opacity: 0;
    box-shadow: -1px 0px 50px rgb(0, 0, 0,1); 
}

/* Individual shadow styles */
.demo-1 .segmenter__shadow {
	box-shadow: 0px 20px 50px rgba(18, 20, 28, 1);
}

.demo-2 .segmenter__shadow {
	box-shadow: 10px 20px 30px rgba(43, 27, 19, 1);
}

.demo-3 .segmenter__shadow {
	border: 7px solid rgba(255,255,255,1);
	box-shadow: none;
}

.demo-3 .segmenter__shadow::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	width: 100%;
	height: 100%;
	box-shadow: -5px -5px 30px rgba(0, 0, 0, 1);
}

.demo-4 .segmenter__shadow {
	box-shadow: 8px 8px 30px rgba(15, 32, 38, 1);
}

.demo-5 .segmenter__shadow {
	box-shadow: 0px 18px 29px rgba(4, 19, 22, 1);
}

.demo-6 .segmenter__shadow {
	box-shadow: 2px 20px 35px rgba(25, 23, 20, 1);
}