/* break */
.break {
	position: relative;
	width: 100%;
	min-height: 220dvh;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.break-scroll {
	position: relative;
	width: 100%;
	min-height: 220dvh;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.break-stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.break figure {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.break figure img,
.break figure video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.break figcaption {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 5;
	color: rgb(var(--b) / .75);
	font-size: .75rem;
}

.break .layer_one {
	z-index: 1;
}

.break .layer_two {
	--x0: 0;
	--y0: 0;
	--x1: 0;
	--y1: 15dvh;
	--scale0: 1;
	--scale1: 1.1;
	--op0: 1;
	--op1: 0;
	--blur0: 0;
	--blur1: 12px;
	z-index: 2;
	opacity: var(--op-current, 0);
	transform:
		translate(var(--x-current, -50%), var(--y-current, -50%))
		scale(var(--scale-current, 1));
	filter: blur(var(--blur-current, 0px));
	will-change: transform, opacity, filter;
}

.break .layer_three {
	--x0: 36%;
	--y0: -50%;
	--x1: 27%;
	--y1: -50%;
	--scale0: .9;
	--scale1: 1;
	--op0: .1;
	--op1: 1;
	--blur0: 0px;
	--blur1: 0px;
	--w0: 27%;
	--w1: 27%;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 3;
	width: var(--w-current, 36%);
	margin: 0;
	overflow: visible;
	opacity: var(--op-current, 0);
	transform:
		translate(var(--x-current, -50%), var(--y-current, -50%))
		scale(var(--scale-current, 1));
	filter: blur(var(--blur-current, 0px));
	will-change: transform, opacity, filter, width;
}
.break figure .overlay {
	position: absolute;
	top: 10dvh;
	left: 21%;
	transform: translateX(-50%);
	width: 27%;
	height: 80dvh;
	background: linear-gradient(
		90deg,
		rgb(var(--n) / 1) 0%,
		rgb(var(--c1) / 1) 100%
	);
	mix-blend-mode: multiply;
	z-index: 10
}

.break .layer_three dt {
	
}

.break .layer_three dd {
	
}


/* break mobile */
@media (max-width: 767px) {
	.break {
		min-height: 220svh;
		padding: 0;
	}
	

	.break-scroll {
		min-height: 220svh;
	}

	.break-stage {
		height: 100dvh;
		min-height: 100dvh;
		contain: paint;
		transform: translateZ(0);
		backface-visibility: hidden;
	}

	.break .layer_two {
		--x0: 0;
		--y0: 0;
		--x1: 0;
		--y1: 0;
		--scale0: 1;
		--scale1: 1.1;
		--op0: 1;
		--op1: 0;
		--blur0: 12px;
		--blur1: 0px;
	}

	.break .layer_three {
		--x0: -50%;
		--y0: -100%;
		--x1: -50%;
		--y1: -50%;
		--scale0: 1;
		--scale1: 1;
		--op0: 0;
		--op1: 1;
		--blur0: 0px;
		--blur1: 0px;
		--w0: 63%;
		--w1: 63%;
		left: 30%;
		width: var(--w-current, 42%);
		padding: 0 2rem;
	}

	.break figure .overlay {
		position: absolute;
		top: 10dvh;
		left: 0;
		transform: none;
		width: 63%;
		height: 80dvh;
		background: linear-gradient(
			90deg,
			rgb(var(--n) / 1) 0%,
			rgb(var(--c1) / 1) 100%
		);
		mix-blend-mode: multiply;
		z-index: 10
	}
}