/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain: Deriva
*/

body {
	background-color: black;
	cursor: none;
}

a,
button {
	cursor: none !important;
}

.mouseCursor {
	position: fixed;
	z-index: 100000;
	width: 16px;
	height: 16px;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
	-webkit-backdrop-filter: invert(100%);
	backdrop-filter: invert(100%);
	clip-path: polygon(8% 8%, 92% 60%, 30% 92%);

	.arrow {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 24px;
		color: white;
		transition: all 0.3s;
	}

	&.circle {
		width: 50px;
		height: 50px;
		clip-path: circle(44%);
		transform: translate(-50%, -50%);

		.arrow {
			display: block;
		}
	}

	&.circle.right {

		.arrow {
			transform: translate(-50%, -50%) rotate(180deg);
		}
	}

	&.hover {
		transform: scale(1.3);
	}

	&.hide {
		opacity: 0;
	}
}

.mobile {
	cursor: default;

	.mouseCursor {
		display: none !important;
	}

	a,
	button {
		cursor: default !important;
	}
}

.ds-project-nav {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	font-size: 14px;

	.ds-project-nav-prev,
	.ds-project-nav-next {

		.ds-project-nav-link {
			color: var(--awb-color7);

			.ds-project-nav-title {
				font-weight: bold;
				font-size: 16px;
			}
		}
	}

	.ds-project-nav-next {
		text-align: right;
	}
}

.slide-left-enter-active,
.slide-right-enter-active,
.slide-left-leave-active,
.slide-right-leave-active {
	transition: all 0.5s ease;
}

.slide-left-leave-active,
.slide-right-leave-active {
	position: absolute;
}

.slide-left-enter-from,
.slide-right-leave-to {
	transform: translateX(100%);
	opacity: 0;
}

.slide-left-leave-to,
.slide-right-enter-from {
	transform: translateX(-100%);
	opacity: 0;
}

#ds-project-gallery {
	width: 100%;
	height: calc(100vh - 15px);
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.ds-carousel-image-container {
		width: 100%;
		flex: 1 1 0;
		min-height: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.ds-carousel-image,
		.ds-carousel-video {
			max-height: 100%;
			width: 100%;
			height: auto;
			object-fit: contain;
		}

		.ds-carousel-nav {
			border: 0;
			background-color: transparent;
			position: absolute;
			height: 100%;
			width: 50%;
			padding: 0;

			&.ds-carousel-nav-prev {
				left: 0;
			}

			&.ds-carousel-nav-next {
				right: 0;
			}
		}
	}

	.ds-project-info-wrapper {
		width: 100%;
		flex: 0 0 auto;
		position: relative;
		display: flex;
		justify-content: center;

		.ds-project-info {
			text-align: center;
			padding: 25px 0;

			.ds-project-title {
				font-size: 30px;
				margin: 0;
			}

			.ds-project-location {
				font-family: "Libertinus Serif Display";
			}
		}

		.ds-carousel-navigation {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			gap: 3px;

			.ds-carousel-bullet {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				border: 1px solid var(--awb-color7);
				background-color: transparent;
				transition: background-color 0.3s;

				&:hover,
				&.active {
					background-color: var(--awb-color7);
				}
			}
		}
	}
}

#ds-project-gallery-mobile {
	display: flex;
	flex-direction: column;
	gap: 15px;

	.ds-carousel-image,
	.ds-carousel-video {
		width: 100%;
		height: auto;
	}
}