/**
 * E-Potion Hero Slider
 *
 * Photo-only slider with crossfade + Ken Burns. Stacked-slide architecture:
 * all slides absolutely positioned on top of each other; opacity drives the
 * crossfade. CSS scroll-snap is intentionally not used (it gives slide motion,
 * not crossfade — different feel).
 *
 * Theming: each slide carries data-theme="dark" or "light". The container
 * inherits the active slide's theme via JS so pagination dots and pause button
 * pick the right contrast color automatically.
 *
 * @package Shoptimizer_Child
 */

/* ==========================================================================
   0. Container — sets aspect ratio so there's zero layout shift before
   images load. Desktop: 8:3. Mobile (≤ 768px): 4:5 portrait.
   ========================================================================== */

.ep-hero-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 3;
	background: #0a0807;
	overflow: hidden;
	border-radius: 0;
	outline: none;
}

.ep-hero-slider:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
	.ep-hero-slider {
		aspect-ratio: 4 / 5;
	}
}

/* ==========================================================================
   1. Track — fills the container. Slides stack on top of each other.
   ========================================================================== */

.ep-hero-slider__track {
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   2. Individual slide — absolute fill, opacity-driven crossfade
   ========================================================================== */

.ep-hero-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ep-hero-transition, 800ms) ease-in-out, visibility 0ms linear var(--ep-hero-transition, 800ms);
	will-change: opacity;
	pointer-events: none;
	text-decoration: none;
}

.ep-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ep-hero-transition, 800ms) ease-in-out, visibility 0ms linear 0ms;
	pointer-events: auto;
	z-index: 1;
}

.ep-hero-slide__picture,
.ep-hero-slide__img {
	display: block;
	width: 100%;
	height: 100%;
}

.ep-hero-slide__img {
	object-fit: cover;
	object-position: center center;
	user-select: none;
	-webkit-user-drag: none;
}

/* ==========================================================================
   3. Ken Burns — 1.00 → 1.05 scale + tiny translate over 7s, alternating.
   Only on the active slide; non-active slides return to scale(1) so the next
   activation starts fresh without a visible snap.
   ========================================================================== */

.ep-hero-slider.has-ken-burns .ep-hero-slide__img {
	transform: scale(1);
	transition: transform 800ms ease-in-out;
	transform-origin: center center;
}

.ep-hero-slider.has-ken-burns .ep-hero-slide.is-active .ep-hero-slide__img {
	animation: ep-hero-kb 7s ease-in-out infinite alternate;
	transition: none;
}

@keyframes ep-hero-kb {
	0%   { transform: scale(1.00) translate(0, 0); }
	100% { transform: scale(1.05) translate(-1.5%, -1%); }
}

/* ==========================================================================
   4. Pagination dots — capsule pills, theme-aware
   ========================================================================== */

.ep-hero-slider__dots {
	position: absolute;
	bottom: 20px;
	right: 24px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0; /* gap handled by 24px button width; visual separation comes from the small inner dots */
	padding: 0 4px;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
	.ep-hero-slider__dots {
		bottom: 16px;
		right: 50%;
		transform: translateX(50%);
	}
}

.ep-hero-slider__dot {
	/* 24×24 px touch target (WCAG 2.5.5). The visual dot is rendered
	   by ::after so the button area stays transparent outside the dot. */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 99px;
	cursor: pointer;
}

.ep-hero-slider__dot::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.4);
	transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms ease;
}

.ep-hero-slider__dot:hover::after {
	background: rgba(255, 255, 255, 0.7);
}

.ep-hero-slider__dot.is-active::after {
	width: 22px;
	background: #ffffff;
}

.ep-hero-slider__dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Light-theme inversion: dark dots over a light photo. */
.ep-hero-slider[data-theme="light"] .ep-hero-slider__dots {
	background: rgba(255, 255, 255, 0.6);
}
.ep-hero-slider[data-theme="light"] .ep-hero-slider__dot::after {
	background: rgba(14, 17, 22, 0.35);
}
.ep-hero-slider[data-theme="light"] .ep-hero-slider__dot.is-active::after {
	background: #0e1116;
}
.ep-hero-slider[data-theme="light"] .ep-hero-slider__dot:focus-visible {
	outline-color: #0e1116;
}

/* ==========================================================================
   5. Pause / play button — bottom-right on desktop, top-right on mobile.
   Fades in on hover/focus on desktop, always visible on mobile.
   ========================================================================== */

.ep-hero-slider__pause {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 3;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.ep-hero-slider:hover .ep-hero-slider__pause,
.ep-hero-slider:focus-within .ep-hero-slider__pause,
.ep-hero-slider__pause:focus-visible {
	opacity: 1;
}

.ep-hero-slider__pause:hover {
	background: rgba(0, 0, 0, 0.48);
}

.ep-hero-slider__pause:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.ep-hero-slider__pause {
		top: 12px;
		right: 12px;
		opacity: 1;
	}
}

.ep-hero-slider[data-theme="light"] .ep-hero-slider__pause {
	background: rgba(255, 255, 255, 0.72);
	color: #0e1116;
}
.ep-hero-slider[data-theme="light"] .ep-hero-slider__pause:hover {
	background: rgba(255, 255, 255, 0.92);
}
.ep-hero-slider[data-theme="light"] .ep-hero-slider__pause:focus-visible {
	outline-color: #0e1116;
}

/* ==========================================================================
   6. Reduced motion — no autoplay (JS handles), no Ken Burns, instant fades
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ep-hero-slide {
		transition: opacity 0ms linear, visibility 0ms linear;
	}
	.ep-hero-slider.has-ken-burns .ep-hero-slide.is-active .ep-hero-slide__img {
		animation: none;
		transform: none;
	}
	.ep-hero-slider__dot {
		transition: none;
	}
}

/* ==========================================================================
   7. Screen-reader-only utility (reused if not already loaded)
   ========================================================================== */

.ep-hero-slider .ep-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}