/* carousel.css */

/* Full-Width Carousel */
.carousel-section {
	position: relative;
	width: 99vw;
	height: 720px;
	overflow: hidden;
	background: #000;
	contain: layout size paint;
	/* Optimize performance */
}

.carousel-container {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
	touch-action: pan-y pinch-zoom;
}

#circleIndicator {
	pointer-events: none;
	display: none;
	z-index: 10;
	position: absolute;
	top: 45%;
	left: 45%;
	width: 40px;
	align-items: center;
	text-align: center;
	zoom: 1.75;
	opacity: 0.6;
}

#circleIndicator i {
	font-size: 24px;
	width: 100%;
	height: 100%;
	margin-right: -106%;
	color: #e0e0e0;
	filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}

#circleIndicator svg circle {
	width: 100%;
}

/* Background circle for unfilled area */
#circleIndicator svg circle.progress-background {
	fill: none;
	stroke: #333;
	/* Change this to your preferred background color */
	stroke-width: 3;
}

/* Progress circle for the filling effect */
#circleIndicator svg circle.progress-circle {
	fill: none;
	stroke: #e0e0e0;
	;
	/* Color for the filled area */
	stroke-width: 4;
	stroke-dasharray: 113;
	/* Approx. circumference for r=18 */
	stroke-dashoffset: 113;
	/* Start fully hidden */
}

/* Define the progress animation */
@keyframes progress {
	from {
		stroke-dashoffset: 113;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* Class to trigger the progress animation */
.animate-progress {
	animation: progress 3s linear forwards;
}

/* Info Overlay Enhancement */
.carousel-info-overlay {
	position: absolute;
	bottom: 20%;
	/* Moved up slightly */
	left: 4%;
	/* Left aligned */
	width: 40%;
	/* Limit width */
	padding: 0;
	/* Reset padding */
	background: transparent;
	/* Remove background gradient */
	color: #fff;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;
	text-align: left;
	/* Ensure left alignment */
}

.carousel-slide.visible .carousel-info-overlay {
	opacity: 1;
	transform: translateY(0);
}

.carousel-title {
	font-size: 4rem;
	/* Much larger */
	margin-bottom: 15px;
	font-weight: 800;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	line-height: 1;
	text-transform: uppercase;
}

.carousel-tagline {
	font-size: 1.2rem;
	margin-bottom: 20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.carousel-metadata {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
	font-size: 1rem;
	align-items: center;
}

.carousel-rating-stars {
	color: #46d369;
	/* Match score color */
	font-weight: bold;
}

.carousel-actions {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

.carousel-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 25px;
	border-radius: 4px;
	font-size: 1.2rem;
	font-weight: bold;
	cursor: pointer;
	border: none;
	transition: transform 0.2s, opacity 0.2s;
}

.carousel-btn:hover {
	transform: scale(1.05);
	opacity: 0.9;
}

.btn-play {
	background-color: white;
	color: black;
}

.btn-info {
	background-color: rgba(109, 109, 110, 0.7);
	color: white;
}

.carousel-btn i {
	font-size: 1.4rem;
}

/* Main Slide Styles - Single Source of Truth */
.carousel-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: top;
	/* Always align to top */
	opacity: 0;
	transform-origin: center center;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;

	/* Hardware acceleration hints */
	transform: translateZ(0) scale(0.95);
	backface-visibility: hidden;
}

/* Slide States */
.carousel-slide.visible {
	opacity: 1;
	transform: translateZ(0) scale(1);
	z-index: 2;
	cursor: pointer;
}

.carousel-slide.next-hidden {
	opacity: 0;
	transform: translateZ(0) translate3d(100%, 0, 0) scale(0.95);
}

.carousel-slide.prev-hidden {
	opacity: 0;
	transform: translateZ(0) translate3d(-100%, 0, 0) scale(0.95);
}

/* Modern Hover Effect */
.carousel-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	background-size: cover;
	background-position: top;
	transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: -1;
}

.carousel-slide.visible:hover::before {
	transform: scale(1.05);
}

/* Carousel arrows */
.carousel-arrows {
	position: absolute;
	width: 100%;
	height: 20%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
	/* Let clicks pass through the container */
	z-index: 20;
	/* Ensure above overlay */
}

.carousel-arrows button {
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: white;
	padding: 20px;
	cursor: pointer;
	transition: background 0.3s;
	pointer-events: auto;
	/* Re-enable clicks on buttons */
	font-size: 2rem;
}

#carouselPrev {
	left: 0;
	border-radius: 0 8px 8px 0;
}

#carouselNext {
	right: 0;
	border-radius: 8px 0 0 8px;
}

.carousel-section:hover .carousel-arrows button {
	opacity: 0.8;
}

.carousel-arrows button:hover {
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	opacity: 1;
	width: 70px;
}


/* Trailer iframe styling */
.carousel-container .trailer-iframe {
	position: absolute;
	top: -650px;
	width: 100%;
	height: 300%;
	border: none;
	z-index: 3;
}

.carousel-indicators {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
	padding: 15px;
}

/* Carousel Indicators */
.carousel-indicators .indicator {
	width: 30px;
	height: 15px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.carousel-indicators .indicator.active {
	background: var(--hover-color);
	width: 40px;
}

/* Enhanced tooltip design */
.carousel-indicators .indicator::after {
	content: "";
	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: 200px;
	height: 112.5px;
	background-image: var(--preview-image);
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	border: 2px solid var(--background-color);
	z-index: 11;
}

.carousel-indicators .indicator::before {
	content: attr(data-title);
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(5px);
	padding: 3px 5px;
	font-size: 0.9em;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	border-radius: 0 0 4px 4px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 12;
	width: 190px;
	text-align: center;
	text-align: center;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.carousel-indicators .indicator:hover::before,
.carousel-indicators .indicator:hover::after {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Loading animation for lazy-loaded images */
.carousel-slide[data-bg]::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.1) 50%,
			transparent 100%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite linear;
}

@keyframes loading {
	from {
		background-position: 200% 0;
	}

	to {
		background-position: -200% 0;
	}
}

/* Enhanced slide transitions */
.carousel-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(0.95);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	background-size: cover;
	background-position: center;
	will-change: transform, opacity;
}

.carousel-slide.visible {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

.carousel-slide.hidden {
	opacity: 0;
	pointer-events: none;
}

/* Direction-aware transitions */
.carousel-slide.next-hidden {
	transform: translateX(5%) scale(0.95);
}

.carousel-slide.prev-hidden {
	transform: translateX(-5%) scale(0.95);
}

/* Enhanced info overlay transitions */
.carousel-info-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.95));
	color: #fff;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide.visible .carousel-info-overlay {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 768px) {

	#carouselContainer {
		height: 100%;
	}

	.carousel-slide {
		height: 100%;
		background-position: center;
	}

	/* Fix navigation arrows positioning */
	.carousel-arrows {
		position: absolute;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.carousel-arrows button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 50px !important;
		height: 70px !important;
		font-size: 20px !important;
		margin: 0;
		opacity: 0.8;
		background: rgba(0, 0, 0, 0.2);
	}

	#carouselPrev {
		left: 0;
		border-radius: 0 8px 8px 0;
	}

	#carouselNext {
		right: 0;
		border-radius: 8px 0 0 8px;
	}

	/* Adjust content overlay for better mobile visibility */
	.carousel-info-overlay {
		padding: 10px 15px !important;
		bottom: 0 !important;
		width: 100% !important;
		background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.95) 100%) !important;
	}

	.carousel-title {
		font-size: 1.2em !important;
		margin-bottom: 5px;
	}

	.carousel-metadata {
		font-size: 0.9em !important;
		gap: 10px !important;
	}

	.carousel-tagline {
		font-size: 0.9em;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.carousel-indicators {
		width: 100vw;
		gap: 5px;
		justify-content: center;
	}

	.carousel-indicators .indicator {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}

	.carousel-indicators .indicator.active {
		width: 12px;
		height: 12px;
	}

	.carousel-btn {
		font-size: 14px;
		margin-bottom: 35px;
		padding: 7px 20px;
		gap: 5px;
	}
}