/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Aug 27 2026 | 05:54:22 */
/* 2 кейса одновременно на desktop*/
/* 1. Mask оставляем штатным для Webflow Slider */
.portfolio-mask {
	display: block;
}

/* 2. Два слайда одновременно на desktop */
.portfolio-mask > .port-slide {
	width: 50%;
	box-sizing: border-box;
	padding-right: 10px;
	padding-left: 10px;
}

/* 3. Контент растягиваем на ширину слайда */
.portf-slide-cont {
	width: 100%;
	max-width: none;
}

/* 4. Tablet и mobile */
@media screen and (max-width: 991px) {
	.portfolio-mask > .port-slide {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}
}

/* 1. Основной контейнер Before / After */
.portf-slide-cont {
	position: relative;
	max-width: 50rem;
	overflow: hidden;
	isolation: isolate;
	user-select: none;
	-webkit-user-select: none;
}


/* 2. Общие настройки фотографий */
.portf-ba-before,
.portf-ba-after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;

	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}


/* 3. Фотография "До" */
.portf-ba-before {
	z-index: 1;
}


/* 4. Фотография "После" */
.portf-ba-after {
	z-index: 2;

	/* Показываем правую половину фотографии */
	clip-path: inset(0 0 0 50%);
	-webkit-clip-path: inset(0 0 0 50%);

	will-change: clip-path;
}


/* 5. Контрол разделителя */
.portf-ba-control {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;

	width: 0;
	z-index: 3;

	pointer-events: none;
}


/* 6. Вертикальная линия */
.portf-ba-line {
	position: absolute;
	top: 0;
	left: 50%;

	width: 2px;
	height: 100%;

	background-color: #fff;

	transform: translateX(-50%);
}


/* 7. Круглая кнопка */
.portf-ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;

	width: 46px;
	height: 46px;

	border: 2px solid #fff;
	border-radius: 50%;

	background-color: rgba(0, 0, 0, 0.15);

	transform: translate(-50%, -50%);
}


/* 8. Стрелки внутри кнопки */
.svg-prev,
.svg-next {
	width: 8px;
	height: 8px;

	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
}

.svg-prev {
	transform: rotate(-45deg);
}

.svg-next {
	transform: rotate(135deg);
}


/* 9. Мобильная версия */
@media screen and (max-width: 767px) {
	.portf-ba-handle {
		width: 40px;
		height: 40px;
	}

	.svg-prev,
	.svg-next {
		width: 7px;
		height: 7px;
	}
}

/* 10. Интерактивная область Before / After */
.portf-slide-cont {
	cursor: ew-resize;
	touch-action: pan-y;
}


/* 11. Слой After обновляется во время движения */
.portf-ba-after {
	will-change: clip-path;
}


/* 12. Контрол не перехватывает события мыши */
.portf-ba-control {
	pointer-events: none;
}

/* 14. Активное состояние при drag */
.portf-slide-cont.is-dragging {
	cursor: grabbing;
}


/* 15. Небольшая реакция кнопки */
.portf-ba-handle {
	transition:
		transform 0.2s ease,
		background-color 0.2s ease;
}


.portf-slide-cont:hover .portf-ba-handle {
	transform: translate(-50%, -50%) scale(1.06);
}


.portf-slide-cont.is-dragging .portf-ba-handle {
	transform: translate(-50%, -50%) scale(0.96);
	background-color: rgba(0, 0, 0, 0.3);
}


/* 16. На touch-устройствах hover не нужен */
@media (hover: none) {
	.portf-slide-cont:hover .portf-ba-handle {
		transform: translate(-50%, -50%);
	}
}