/**
 * Watercolor Slideshow — Auto-advancing with organic transitions
 * Uses SVG filters + CSS blend modes for flowing watercolor reveal
 *
 * @package KK_Gallery_3D
 */

/* ── Container ─────────────────────────────── */

.gallery-slideshow-container {
	position: relative;
	width: 100%;
	max-height: 82vh;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: transparent;
	border-radius: 2px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* ── Progress Bar ──────────────────────────── */

.slideshow-progress-bar {
	position: absolute;
	top: 1px;
	left: 0;
	height: 2px;
	width: 0%;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(50, 45, 40, 0.9) 0px,
			rgba(35, 30, 25, 0.7) 2px,
			rgba(50, 45, 40, 0.85) 4px,
			rgba(60, 55, 48, 0.6) 7px,
			rgba(40, 35, 30, 0.95) 9px
		);
	z-index: 10;
	transition: none;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='4'%3E%3Cpath d='M0 2.2 C8 1.4,15 2.8,25 2.1 S40 1.2,55 2.4 S70 1.6,85 2.3 S100 1.3,115 2.5 S130 1.5,145 2.2 S160 1.8,175 2.4 S190 1.6,200 2.1' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='4'%3E%3Cpath d='M0 2.2 C8 1.4,15 2.8,25 2.1 S40 1.2,55 2.4 S70 1.6,85 2.3 S100 1.3,115 2.5 S130 1.5,145 2.2 S160 1.8,175 2.4 S190 1.6,200 2.1' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-size: 200px 4px;
	-webkit-mask-size: 200px 4px;
	mask-repeat: repeat-x;
	-webkit-mask-repeat: repeat-x;
}

/* ── Stage (image container) ───────────────── */

.slideshow-stage {
	position: relative;
	width: 100%;
	height: 100%;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

/* ── Canvas ────────────────────────────────── */

.slideshow-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

/* ── Navigation Buttons ────────────────────── */

.slideshow-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	z-index: 5;
	padding: 4px;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.slideshow-nav:hover {
	opacity: 0.9;
}

.slideshow-nav svg {
	display: block;
	width: 22px;
	height: 22px;
}

.slideshow-prev {
	left: 12px;
}

.slideshow-next {
	right: 12px;
}

/* ── Play/Pause Button ─────────────────────── */

.slideshow-playpause {
	position: absolute;
	bottom: 10px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 5;
	padding: 4px;
	opacity: 0.5;
	transition: opacity 0.2s;
}

.slideshow-playpause:hover {
	opacity: 0.9;
}

.slideshow-playpause svg {
	display: block;
	width: 18px;
	height: 18px;
}

.slideshow-icon-pause,
.slideshow-icon-play {
	display: inline;
}

/* ── Counter ───────────────────────────────── */

.slideshow-counter {
	position: absolute;
	bottom: 12px;
	left: 14px;
	font-size: 0.8125rem;
	color: rgba(0, 0, 0, 0.7);
	z-index: 5;
	pointer-events: none;

}

/* ── Label ─────────────────────────────────── */

.slideshow-label {
	position: absolute;
	bottom: 16px;
	right: 64px;
	font-family: 'Unna', Georgia, 'Times New Roman', serif;
	color: #333;
	text-align: right;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 6px 12px;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	max-width: 280px;
}

.slideshow-label.slideshow-label-visible {
	opacity: 1;
}

.slideshow-label-title {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}

.slideshow-label-caption {
	font-size: 0.75rem;
	color: #666;
	line-height: 1.3;
	margin-top: 2px;
}

/* ── Mobile Optimizations ──────────────────── */

@media (max-width: 768px) {
	.gallery-slideshow-container {
		aspect-ratio: 10 / 16;
		max-height: calc(100svh - 60px);
		width: 100%;
	}

	.slideshow-progress-bar {
		height: 2px;
	}

	.slideshow-nav svg {
		width: 18px;
		height: 18px;
	}

	.slideshow-prev {
		left: 4px;
	}

	.slideshow-next {
		right: 4px;
	}

	.slideshow-playpause {
		bottom: 6px;
		right: 8px;
	}

	.slideshow-playpause svg {
		width: 14px;
		height: 14px;
	}

	.slideshow-counter {
		bottom: 8px;
		left: 10px;
		font-size: 0.75rem;
	}

	.slideshow-label {
		bottom: 12px;
		right: 48px;
		max-width: 200px;
		padding: 4px 10px;
	}
}


/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
	.slideshow-progress-bar,
	.slideshow-nav,
	.slideshow-playpause,
	.slideshow-label {
		transition: none;
	}
}