/**
 * Continuous Carousel Styles
 * 
 * @package Continuous_Carousel
 */

/* Container Styles */
.cc-carousel-container {
	position: relative;
	width: 100%;
}

.cc-overflow-hidden {
	overflow: hidden;
}

.cc-carousel-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Track Styles */
.cc-carousel-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.cc-carousel-track.cc-horizontal {
	flex-direction: row;
	touch-action: pan-y;
}

.cc-carousel-track.cc-vertical {
	flex-direction: column;
	height: max-content;
	touch-action: pan-x;
}

.cc-carousel-track.cc-center {
	justify-content: center;
}

/* Item Styles */
.cc-carousel-item {
	flex-shrink: 0;
	position: relative;
	display: block;
	overflow: hidden;
}

.cc-carousel-item img {
	width: 100%;
	height: 100%;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

/* When aspect ratio is forced, ensure proper sizing */
.cc-carousel-item img[style*="aspect-ratio"] {
	height: 100%;
	width: 100%;
}

.cc-carousel-item.cc-fixed-size {
	flex-shrink: 0;
	flex-grow: 0;
}

.cc-carousel-item a {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
}

/* CSS Animation for Continuous Scrolling */
/* The track contains 2 identical sets of items. Animation moves from 0 to -50% */
/* which scrolls the first set completely off screen, then loops back seamlessly */
.cc-carousel-track.cc-css-animate.cc-horizontal {
	animation: cc-scroll-horizontal var(--cc-speed, 20s) var(--cc-easing, linear) infinite;
	animation-delay: calc(var(--cc-initial-offset, 0) * var(--cc-speed, 20s) / -100);
}

.cc-carousel-track.cc-css-animate.cc-vertical {
	animation: cc-scroll-vertical var(--cc-speed, 20s) var(--cc-easing, linear) infinite;
	animation-delay: calc(var(--cc-initial-offset, 0) * var(--cc-speed, 20s) / -100);
}

/* Reverse direction */
.cc-carousel-container[data-direction="right"] .cc-carousel-track.cc-css-animate.cc-horizontal {
	animation-direction: reverse;
}

.cc-carousel-container[data-direction="bottom"] .cc-carousel-track.cc-css-animate.cc-vertical {
	animation-direction: reverse;
}

/* Pause on hover */
.cc-carousel-container[data-pause-hover="true"]:hover .cc-carousel-track.cc-css-animate {
	animation-play-state: paused;
}

/* Paused state */
.cc-carousel-track.cc-paused {
	animation-play-state: paused !important;
}

/* Stop autoplay */
.cc-carousel-container[data-autoplay="false"] .cc-carousel-track.cc-css-animate {
	animation-play-state: paused;
}

/* Pause when offscreen (set by JS with IntersectionObserver/visibility fallback) */
.cc-carousel-container[data-offscreen-paused="true"] .cc-carousel-track.cc-css-animate {
	animation-play-state: paused !important;
}

/* Keyframes for horizontal scrolling - move exactly 50% to reveal duplicates */
@keyframes cc-scroll-horizontal {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-1 * var(--cc-loop-distance, 50%)));
	}
}

/* Keyframes for vertical scrolling - move exactly 50% to reveal duplicates */
@keyframes cc-scroll-vertical {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(calc(-1 * var(--cc-loop-distance, 50%)));
	}
}

/* Fade Edges Effect */
.cc-fade-edges.cc-fade-horizontal::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		currentColor 0%,
		transparent var(--cc-fade-size, 50px),
		transparent calc(100% - var(--cc-fade-size, 50px)),
		currentColor 100%
	);
	opacity: 1;
	-webkit-mask: linear-gradient(
		to right,
		transparent 0%,
		black var(--cc-fade-size, 50px),
		black calc(100% - var(--cc-fade-size, 50px)),
		transparent 100%
	);
	mask: linear-gradient(
		to right,
		transparent 0%,
		black var(--cc-fade-size, 50px),
		black calc(100% - var(--cc-fade-size, 50px)),
		transparent 100%
	);
}

.cc-fade-edges.cc-fade-vertical::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		currentColor 0%,
		transparent var(--cc-fade-size, 50px),
		transparent calc(100% - var(--cc-fade-size, 50px)),
		currentColor 100%
	);
	opacity: 1;
	-webkit-mask: linear-gradient(
		to bottom,
		transparent 0%,
		black var(--cc-fade-size, 50px),
		black calc(100% - var(--cc-fade-size, 50px)),
		transparent 100%
	);
	mask: linear-gradient(
		to bottom,
		transparent 0%,
		black var(--cc-fade-size, 50px),
		black calc(100% - var(--cc-fade-size, 50px)),
		transparent 100%
	);
}

/* Dragging cursor */
.cc-carousel-track.cc-dragging {
	cursor: grabbing;
}

.cc-carousel-track.cc-draggable {
	cursor: grab;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.cc-carousel-container[data-reduced-motion="true"] .cc-carousel-track.cc-css-animate {
		animation: none !important;
	}
	
	.cc-carousel-container[data-reduced-motion="true"] .cc-carousel-track {
		transform: none !important;
	}
}

/* No-JS Fallback */
.no-js .cc-carousel-track {
	animation: none !important;
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Multi-row/column support */
.cc-carousel-wrapper > .cc-carousel-track + .cc-carousel-track {
	margin-top: 0;
}

/* Accessibility - Focus styles */
.cc-carousel-item a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.cc-carousel-item a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Print styles */
@media print {
	.cc-carousel-track {
		animation: none !important;
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* Performance optimizations */
.cc-carousel-track,
.cc-carousel-item {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Smooth transitions when changing speed */
.cc-carousel-track {
	transition: animation-duration 0.3s ease;
}