/**
 * Scroll Animation Slider Widget Styles for Elementor
 */

/* Base Styles */
.scroll-anim-slider {
	position: relative;
	display: flex;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
}

.scroll-anim-slider * {
	box-sizing: border-box;
	position: relative;
}

/* Navigation Status */
.scroll-anim-slider__status {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: flex;
	z-index: 100;
}

.scroll-anim-slider__status .scroll-anim-slider__point {
	position: absolute;
	width: 14px;
	height: 14px;
	top: -2px;
	background-color: #ffff00;
	border-radius: 50%;
	z-index: 15;
	transition: left 500ms ease-in-out;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='0'] {
	left: 4px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='1'] {
	left: 24px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='2'] {
	left: 44px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='3'] {
	left: 64px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='4'] {
	left: 84px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='5'] {
	left: 104px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='6'] {
	left: 124px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='7'] {
	left: 144px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='8'] {
	left: 164px;
}

.scroll-anim-slider__status .scroll-anim-slider__point[data-current='9'] {
	left: 184px;
}

.scroll-anim-slider__status .scroll-anim-slider__stat {
	width: 10px;
	height: 10px;
	background-color: transparent;
	border-radius: 50%;
	z-index: 20;
	margin: 0px 5px;
	border: 1px solid #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
}

.scroll-anim-slider__status .scroll-anim-slider__stat:hover {
	transform: scale(1.2);
	border-width: 2px;
}

/* Text Overlay */
.scroll-anim-slider__text {
	position: absolute;
	color: #ffff00;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	z-index: 20;
	transform-origin: right top;
	transform: rotate(-90deg) translateY(calc(-90vh + 2vw));
	display: grid;
	grid-template-columns: 90vh;
	grid-template-rows: 1fr;
	font-size: 15vw;
	text-transform: uppercase;
	font-weight: 900;
	pointer-events: none;
}

@media (min-width: 70em) {
	.scroll-anim-slider__text {
		font-size: 10em;
	}
}

.scroll-anim-slider__text div {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	opacity: 0;
}

.scroll-anim-slider__text div.current {
	opacity: 0.7;
}

/* Images */
.scroll-anim-slider__image {
	width: 100%;
	margin-right: -100%;
	opacity: 0;
	overflow: hidden;
	transform: translateY(0) scale(1.2);
	z-index: 1;
}

.scroll-anim-slider__image.current {
	z-index: 10;
	transform: translateY(0) scale(1);
	opacity: 1;
}

.scroll-anim-slider__image img {
	object-fit: cover;
	object-position: center center;
	width: 100%;
	height: 100%;
	display: block;
}

.scroll-anim-slider__image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Image Filters */
.scroll-anim-slider.filter-sepia img {
	filter: sepia(1) hue-rotate(180deg);
}

.scroll-anim-slider.filter-grayscale img {
	filter: grayscale(1);
}

.scroll-anim-slider.filter-vintage img {
	filter: sepia(0.5) contrast(1.2) brightness(0.9);
}

/* Responsive */
@media (max-width: 768px) {
	.scroll-anim-slider__text {
		font-size: 12vw;
		transform: rotate(-90deg) translateY(calc(-90vh + 5vw));
	}

	.scroll-anim-slider__status {
		bottom: 15px;
		right: 15px;
	}

	.scroll-anim-slider__status .scroll-anim-slider__point {
		width: 12px;
		height: 12px;
	}

	.scroll-anim-slider__status .scroll-anim-slider__stat {
		width: 8px;
		height: 8px;
		margin: 0px 3px;
	}
}

@media (max-width: 480px) {
	.scroll-anim-slider__text {
		font-size: 10vw;
	}

	.scroll-anim-slider__status {
		bottom: 20px;
		right: 20px;
	}

	.scroll-anim-slider__status .scroll-anim-slider__point {
		width: 10px;
		height: 10px;
	}

	.scroll-anim-slider__status .scroll-anim-slider__stat {
		width: 6px;
		height: 6px;
		margin: 0px 2px;
	}
}

/* Elementor Editor Styles */
.elementor-editor-active .scroll-anim-slider {
	pointer-events: none;
}

.elementor-editor-active .scroll-anim-slider__status .scroll-anim-slider__stat {
	pointer-events: auto;
}