/* carousel.css */

/* Full-Width Carousel */
.carousel-section {
	position: relative;
	width: 100%;
	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: 50%;
	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: 0;
	width: 100%;
	padding: 30px;
	background: linear-gradient(transparent, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.95));
	color: #fff;
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;
}

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

.carousel-title {
	font-size: 2rem;
	margin-bottom: 10px;
	font-weight: bold;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.carousel-tagline {
	font-style: italic;
	opacity: 0.9;
	margin-bottom: 15px;
	line-height: 1.6;
}

.carousel-metadata {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
	font-size: 1.1rem;
}

.carousel-rating-stars {
	color: gold;
	margin-right: 3px;
	text-shadow: 1px 1px 2px #000;
}

/* 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: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 0;
}

.carousel-arrows button {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 120px;
	background: rgba(0, 0, 0, 0.6);
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	margin: 0;
}

#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; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.carousel-section {
		height: 400px;
	}

	.carousel-title {
		font-size: 1.5rem;
	}

	.carousel-metadata {
		font-size: 0.9rem;
		gap: 10px;
	}

	.carousel-info-overlay {
		padding: 20px;
		background: linear-gradient(
			transparent,
			rgba(0,0,0,0.8) 20%,
			rgba(0,0,0,0.95)
		);
	}

	.carousel-arrows button {
		width: 45px;
		height: 90px;
		font-size: 20px;
	}

	.carousel-indicators .indicator {
		width: 30px;
		height: 6px;
	}

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

/* 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;
	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);
}