/* ============================================
   AutoScroll Widget Styles
   ============================================ */

/* Main Container */
[id^="apeiron-autoscroll-"] {
	position: fixed;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	--ak-widget-offset-x: 0;
	--ak-widget-offset-y: 0;
	transform: translate(var(--ak-widget-offset-x, 0), var(--ak-widget-offset-y, 0));
}

/* Position: Top */
[id^="apeiron-autoscroll-"].pos-top-left {
	top: 0;
	left: 0;
	transform: translate(var(--ak-widget-offset-x, 0), var(--ak-widget-offset-y, 0));
}

[id^="apeiron-autoscroll-"].pos-top-center {
	top: 0;
	left: 50%;
	transform: translate(calc(-50% + var(--ak-widget-offset-x, 0)), var(--ak-widget-offset-y, 0));
}

[id^="apeiron-autoscroll-"].pos-top-right {
	top: 0;
	right: 0;
	transform: translate(var(--ak-widget-offset-x, 0), var(--ak-widget-offset-y, 0));
}

/* Position: Center */
[id^="apeiron-autoscroll-"].pos-center-left {
	top: 50%;
	left: 0;
	transform: translate(var(--ak-widget-offset-x, 0), calc(-50% + var(--ak-widget-offset-y, 0)));
}

[id^="apeiron-autoscroll-"].pos-center-center {
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + var(--ak-widget-offset-x, 0)), calc(-50% + var(--ak-widget-offset-y, 0)));
}

[id^="apeiron-autoscroll-"].pos-center-right {
	top: 50%;
	right: 0;
	transform: translate(var(--ak-widget-offset-x, 0), calc(-50% + var(--ak-widget-offset-y, 0)));
}

/* Position: Bottom */
[id^="apeiron-autoscroll-"].pos-bottom-left {
	bottom: 0;
	left: 0;
	transform: translate(var(--ak-widget-offset-x, 0), var(--ak-widget-offset-y, 0));
}

[id^="apeiron-autoscroll-"].pos-bottom-center {
	bottom: 0;
	left: 50%;
	transform: translate(calc(-50% + var(--ak-widget-offset-x, 0)), var(--ak-widget-offset-y, 0));
}

[id^="apeiron-autoscroll-"].pos-bottom-right {
	bottom: 0;
	right: 0;
	transform: translate(var(--ak-widget-offset-x, 0), var(--ak-widget-offset-y, 0));
}

/* Legacy support for old position classes */
[id^="apeiron-autoscroll-"].pos-right-center {
	top: 50%;
	right: 0;
	transform: translate(var(--ak-widget-offset-x, 0), calc(-50% + var(--ak-widget-offset-y, 0)));
}

[id^="apeiron-autoscroll-"].pos-left-center {
	top: 50%;
	left: 0;
	transform: translate(var(--ak-widget-offset-x, 0), calc(-50% + var(--ak-widget-offset-y, 0)));
}

/* Button Container */
[id^="apeiron-autoscroll-"] .apeiron-btn-container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-fill-mode: both;
}

/* Hidden state for appear animation — JS adds this class, then adds anim-* */
[id^="apeiron-autoscroll-"] .apeiron-btn-container.await-animation {
	opacity: 0;
}

/* Button Appear Animations */
[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-fade {
	animation: buttonAppearFade var(--ak-button-appear-duration, 0.5s) ease-out var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-slide {
	animation: buttonAppearSlide var(--ak-button-appear-duration, 0.5s) ease-out var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-scale {
	animation: buttonAppearScale var(--ak-button-appear-duration, 0.5s) cubic-bezier(0.34, 1.56, 0.64, 1) var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-bounce {
	animation: buttonAppearBounce var(--ak-button-appear-duration, 0.5s) ease-out var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-zoom {
	animation: buttonAppearZoom var(--ak-button-appear-duration, 0.5s) ease-out var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-flip {
	animation: buttonAppearFlip var(--ak-button-appear-duration, 0.5s) ease-out var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-btn-container.anim-elastic {
	animation: buttonAppearElastic var(--ak-button-appear-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) var(--ak-button-appear-delay, 0s) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	z-index: 2;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: var(--ak-btn-bg, #083c57);
	color: var(--ak-btn-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active {
	background: var(--ak-btn-bg-active, #083c57);
	color: var(--ak-btn-color-active, #ffffff);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.btn-pressed {
	animation: buttonPress 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.btn-released {
	animation: buttonRelease 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn .btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Progress Ring - Proportionally Centered via CSS Variable */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ak-progress-ring-size, calc(100% + 14px));
	height: var(--ak-progress-ring-size, calc(100% + 14px));
	transform: translate(-50%, -50%) rotate(-90deg);
	pointer-events: none;
	z-index: 1;
}

[id^="apeiron-autoscroll-"] .apeiron-progress-ring circle {
	stroke-width: 3;
	fill: none;
	transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

[id^="apeiron-autoscroll-"] .apeiron-progress-ring .track {
	stroke: var(--ak-progress-bg-color, rgba(8, 60, 87, 0.2));
	opacity: 1;
	visibility: visible;
}

[id^="apeiron-autoscroll-"] .apeiron-progress-ring .progress {
	stroke: var(--ak-progress-color, #083c57);
	stroke-linecap: round;
	transition: stroke-dashoffset 0.15s ease-out, stroke 0.3s ease;
}

/* ========================= */
/* Progress Ring Animations  */
/* ========================= */

/* Linear Clean — smooth linear transition instead of ease */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring.progress-anim-linear-clean .progress {
	transition: stroke-dashoffset var(--ak-progress-animation-speed, 1.5s) linear, stroke 0.3s ease;
}

/* Smooth Fill — cubic-bezier for buttery smooth fill */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring.progress-anim-smooth-fill .progress {
	transition: stroke-dashoffset var(--ak-progress-animation-speed, 1.5s) cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

/* Wave Stroke — subtle pulsing stroke-width effect */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring.progress-anim-wave-stroke .progress {
	transition: stroke-dashoffset 0.15s ease-out, stroke 0.3s ease;
	animation: apeiron-progress-wave var(--ak-progress-animation-speed, 1.5s) ease-in-out infinite;
}

@keyframes apeiron-progress-wave {

	0%,
	100% {
		stroke-width: var(--ak-progress-stroke-width, 3);
		opacity: 1;
	}

	50% {
		stroke-width: calc(var(--ak-progress-stroke-width, 3) + 2);
		opacity: 0.85;
	}
}

/* Rotating Stroke — ring rotates continuously around center */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring.progress-anim-rotating-stroke {
	animation: apeiron-progress-rotate var(--ak-progress-animation-speed, 1.5s) linear infinite;
}

@keyframes apeiron-progress-rotate {
	from {
		transform: translate(-50%, -50%) rotate(-90deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(270deg);
	}
}

/* Elastic Stroke — springy stroke-dashoffset jitter */
[id^="apeiron-autoscroll-"] .apeiron-progress-ring.progress-anim-elastic-stroke .progress {
	transition: stroke-dashoffset var(--ak-progress-animation-speed, 1.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55), stroke 0.3s ease;
}

/* Tooltip */
[id^="apeiron-autoscroll-"] .apeiron-scroll-tooltip {
	position: absolute;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	pointer-events: none;
	font-size: 12px;
	z-index: 10;
}

/* Tooltip Position - Otomatis menyesuaikan: kiri = tooltip kanan, kanan = tooltip kiri */
/* Position: Horizontal Kiri -> Tooltip di Kanan */
[id^="apeiron-autoscroll-"].pos-top-left .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-center-left .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-bottom-left .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-left-center .apeiron-scroll-tooltip {
	left: calc(100% + 12px);
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* Position: Horizontal Kanan -> Tooltip di Kiri */
[id^="apeiron-autoscroll-"].pos-top-right .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-center-right .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-bottom-right .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-right-center .apeiron-scroll-tooltip {
	right: calc(100% + 12px);
	left: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* Position: Horizontal Tengah -> Tooltip di Atas */
[id^="apeiron-autoscroll-"].pos-top-center .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-center-center .apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"].pos-bottom-center .apeiron-scroll-tooltip {
	bottom: calc(100% + 12px);
	top: auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn:hover~.apeiron-scroll-tooltip,
[id^="apeiron-autoscroll-"] .apeiron-scroll-tooltip.show {
	opacity: 1;
	visibility: visible;
}

/* Speed Control - Base Styles */
[id^="apeiron-autoscroll-"] .apeiron-speed-control {
	display: none;
	opacity: 0;
	transform: scale(0.85) translateY(10px);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 5;
	backdrop-filter: none;
	border: 1px solid var(--ak-speed-control-border, rgba(255, 255, 255, 0.12));
	background: var(--ak-speed-control-bg, transparent);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control {
	will-change: opacity, transform;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.show {
	display: flex;
	opacity: var(--ak-speed-control-opacity, 1);
	transform: scale(1) translateY(0);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Speed Control Appear Animations */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-fade,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-scale,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-bounce,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-zoom,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-flip,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-elastic,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide-up,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide-down,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-fade,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-scale,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-zoom,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-flip,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide-up,
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide-down {
	transition: none !important;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-fade {
	animation: speedControlAppearFade var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide {
	animation: speedControlAppearSlide var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-scale {
	animation: speedControlAppearScale var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-bounce {
	animation: speedControlAppearBounce var(--ak-speed-control-animation-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-zoom {
	animation: speedControlAppearZoom var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-flip {
	animation: speedControlAppearFlip var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-elastic {
	animation: speedControlAppearElastic var(--ak-speed-control-animation-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide-up {
	animation: speedControlAppearSlideUp var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.appear-slide-down {
	animation: speedControlAppearSlideDown var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Speed Control Disappear Animations */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-fade {
	animation: speedControlDisappearFade var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide {
	animation: speedControlDisappearSlide var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-scale {
	animation: speedControlDisappearScale var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-bounce {
	animation: speedControlDisappearBounce var(--ak-speed-control-animation-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-zoom {
	animation: speedControlDisappearZoom var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-flip {
	animation: speedControlDisappearFlip var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-elastic {
	animation: speedControlDisappearElastic var(--ak-speed-control-animation-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide-up {
	animation: speedControlDisappearSlideUp var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.disappear-slide-down {
	animation: speedControlDisappearSlideDown var(--ak-speed-control-animation-duration, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.draggable {
	cursor: move;
	position: absolute;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.draggable.is-dragging {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	z-index: 100;
}

/* Drag Handle */
[id^="apeiron-autoscroll-"] .speed-drag-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	padding: 2px;
	cursor: grab;
}

[id^="apeiron-autoscroll-"] .speed-drag-handle:active {
	cursor: grabbing;
}

/* Horizontal Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-horizontal {
	flex-direction: row;
	align-items: center;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-horizontal .speed-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ak-speed-inner-gap, 8px);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-horizontal .apeiron-speed-slider {
	width: 60px;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-horizontal .speed-arrows {
	display: flex;
	gap: var(--ak-speed-inner-gap, 8px);
}

/* Vertical Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical {
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 10px 8px;
	text-align: center;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .speed-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
	gap: var(--ak-speed-inner-gap, 8px);
	width: 100%;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider {
	width: var(--ak-slider-track-height, 6px);
	height: 60px;
	writing-mode: vertical-lr;
	direction: rtl;
	align-self: center;
	margin: 0 auto;
	position: relative;
	display: block;
	-webkit-appearance: none;
	appearance: none;
	left: 0;
	right: 0;
	padding: 0;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .speed-arrows {
	display: flex;
	flex-direction: column;
	gap: var(--ak-speed-inner-gap, 8px);
}

/* Position Variants */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-left {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-left.show {
	transform: translateY(-50%) scale(1);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-right {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-right.show {
	transform: translateY(-50%) scale(1);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-top {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-control.pos-top.show {
	transform: translateX(-50%) scale(1);
}

/* Slider Base - Colors controlled by Elementor */
[id^="apeiron-autoscroll-"] .apeiron-speed-slider {
	appearance: none;
	-webkit-appearance: none;
	border-radius: var(--ak-slider-track-radius, 6px);
	cursor: pointer;
	outline: none;
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: var(--ak-slider-track, #e2e8f0);
	height: var(--ak-slider-track-height, 6px);
	width: 60px;
	display: block;
	margin: 0 auto;
	align-self: center;
	flex-shrink: 0;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider:focus {
	box-shadow: 0 0 0 3px rgba(8, 60, 87, 0.2);
}

/* Webkit Slider Track - Active portion (Horizontal) */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-horizontal .apeiron-speed-slider::-webkit-slider-runnable-track {
	border-radius: var(--ak-slider-track-radius, 6px);
	height: var(--ak-slider-track-height, 6px);
	background: linear-gradient(to right,
			var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57)) 0%,
			var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57)) var(--slider-progress, 0%),
			var(--ak-slider-track, #e2e8f0) var(--slider-progress, 0%),
			var(--ak-slider-track, #e2e8f0) 100%);
	vertical-align: middle;
	align-self: center;
}

/* Webkit Slider Track - Active portion (Vertical) */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider::-webkit-slider-runnable-track {
	border-radius: var(--ak-slider-track-radius, 6px);
	width: var(--ak-slider-track-height, 6px);
	background: linear-gradient(to top,
			var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57)) 0%,
			var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57)) var(--slider-progress, 0%),
			var(--ak-slider-track, #e2e8f0) var(--slider-progress, 0%),
			var(--ak-slider-track, #e2e8f0) 100%);
	-webkit-appearance: none;
	appearance: none;
	margin: 0 auto;
	left: 0;
	right: 0;
}

/* Firefox Slider Track */
[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-moz-range-track {
	border-radius: var(--ak-slider-track-radius, 6px);
	height: var(--ak-slider-track-height, 6px);
	background: var(--ak-slider-track, #e2e8f0);
}

/* Firefox Slider Track - Vertical Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider::-moz-range-track {
	width: var(--ak-slider-track-height, 6px);
	height: 60px;
	border-radius: var(--ak-slider-track-radius, 6px);
	background: var(--ak-slider-track, #e2e8f0);
	margin: 0 auto;
	left: 0;
	right: 0;
}

/* Firefox Active Track (portion before thumb) */
[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-moz-range-progress {
	background: var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57));
	border-radius: var(--ak-slider-track-radius, 6px);
	height: var(--ak-slider-track-height, 6px);
}

/* Firefox Active Track - Vertical Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider::-moz-range-progress {
	width: var(--ak-slider-track-height, 6px);
	height: 60px;
	border-radius: var(--ak-slider-track-radius, 6px);
	background: var(--ak-slider-track-active, var(--ak-slider-thumb, #083c57));
}

/* Webkit Slider Thumb */
[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	border-radius: var(--ak-slider-thumb-radius, 50%);
	cursor: pointer;
	box-shadow: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	background: var(--ak-slider-thumb, #083c57);
	width: var(--ak-slider-thumb-size, 18px);
	height: var(--ak-slider-thumb-size, 18px);
	margin-top: calc((var(--ak-slider-thumb-size, 18px) - var(--ak-slider-track-height, 6px)) / -2);
	vertical-align: middle;
	border-width: var(--ak-slider-thumb-border-width, 0);
	border-style: solid;
	border-color: var(--ak-slider-thumb-border-color, transparent);
}

/* Webkit Slider Thumb - Vertical Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider::-webkit-slider-thumb {
	margin-top: 0;
	margin-left: calc((var(--ak-slider-thumb-size, 18px) - var(--ak-slider-track-height, 6px)) / -2);
	margin-right: 0;
	margin-bottom: 0;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-webkit-slider-thumb:hover {
	transform: scale(1.2);
	box-shadow: none;
	background: var(--ak-slider-thumb-hover, var(--ak-slider-thumb, #083c57));
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-webkit-slider-thumb:active {
	transform: scale(1.1);
	box-shadow: none;
	background: var(--ak-slider-thumb-active, var(--ak-slider-thumb, #083c57));
}

/* Firefox Slider Thumb */
[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-moz-range-thumb {
	border-radius: var(--ak-slider-thumb-radius, 50%);
	cursor: pointer;
	border-width: var(--ak-slider-thumb-border-width, 0);
	border-style: solid;
	border-color: var(--ak-slider-thumb-border-color, transparent);
	box-shadow: 0 2px 8px rgba(8, 60, 87, 0.4);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	background: var(--ak-slider-thumb, #083c57);
	width: var(--ak-slider-thumb-size, 18px);
	height: var(--ak-slider-thumb-size, 18px);
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-moz-range-thumb:hover {
	transform: scale(1.2);
	box-shadow: 0 4px 12px rgba(8, 60, 87, 0.6);
	background: var(--ak-slider-thumb-hover, var(--ak-slider-thumb, #083c57));
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider::-moz-range-thumb:active {
	transform: scale(1.1);
	background: var(--ak-slider-thumb-active, var(--ak-slider-thumb, #083c57));
}

/* Firefox Slider Thumb - Vertical Layout */
[id^="apeiron-autoscroll-"] .apeiron-speed-control.layout-vertical .apeiron-speed-slider::-moz-range-thumb {
	margin-left: calc((var(--ak-slider-thumb-size, 18px) - var(--ak-slider-track-height, 6px)) / -2);
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Speed Value - Colors controlled by Elementor */
[id^="apeiron-autoscroll-"] .speed-value {
	font-weight: 700;
	min-width: var(--ak-speed-value-size, 26px);
	min-height: var(--ak-speed-value-size, auto);
	text-align: center;
	padding: var(--ak-speed-value-padding, 5px 5px);
	border-radius: var(--ak-speed-value-radius, 23px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	color: var(--ak-speed-value-color, #083c57);
	background: var(--ak-speed-value-bg, #e8f0f4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 9px;
}

/* Animation Types for Speed Value */
[id^="apeiron-autoscroll-"] .speed-value.anim-pulse {
	animation: speedValuePulse 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: scale(1.15);
}

[id^="apeiron-autoscroll-"] .speed-value.anim-fade {
	animation: speedValueFade 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[id^="apeiron-autoscroll-"] .speed-value.anim-slide {
	animation: speedValueSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[id^="apeiron-autoscroll-"] .speed-value.anim-bounce {
	animation: speedValueBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Speed Arrows */
[id^="apeiron-autoscroll-"] .speed-arrow {
	width: var(--ak-speed-arrow-size, 30px);
	height: var(--ak-speed-arrow-size, 30px);
	border: none;
	border-radius: var(--ak-speed-arrow-radius, 8px);
	background-color: var(--ak-speed-arrow-bg, #f1f5f9);
	background: var(--ak-speed-arrow-bg, #f1f5f9);
	background-image: none;
	color: var(--ak-speed-arrow-color, #1e293b);
	opacity: var(--ak-speed-arrow-opacity, 1);
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: visible;
	box-sizing: border-box !important;
	padding: var(--ak-speed-arrow-padding, 0);
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	visibility: visible !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow svg {
	stroke: var(--ak-speed-arrow-color, #1e293b);
	stroke-width: 3;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	width: var(--ak-speed-arrow-icon-size, 14px);
	height: var(--ak-speed-arrow-icon-size, 14px);
	max-width: var(--ak-speed-arrow-icon-size, 14px);
	max-height: var(--ak-speed-arrow-icon-size, 14px);
	fill: var(--ak-speed-arrow-color, #1e293b);
	color: var(--ak-speed-arrow-color, #1e293b);
	display: block !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow svg * {
	stroke: var(--ak-speed-arrow-color, #1e293b);
	fill: var(--ak-speed-arrow-color, #1e293b);
	color: var(--ak-speed-arrow-color, #1e293b);
}

[id^="apeiron-autoscroll-"] .speed-arrow i {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1;
	font-size: var(--ak-speed-arrow-icon-size, 14px);
	line-height: 1;
	width: var(--ak-speed-arrow-icon-size, 14px);
	height: var(--ak-speed-arrow-icon-size, 14px);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	color: var(--ak-speed-arrow-color, #1e293b);
}

[id^="apeiron-autoscroll-"] .speed-arrow i::before {
	display: block !important;
	visibility: visible !important;
	opacity: 1;
	color: var(--ak-speed-arrow-color, #1e293b);
	font-size: inherit;
	line-height: inherit;
}

[id^="apeiron-autoscroll-"] .speed-arrow>* {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1;
	font-size: var(--ak-speed-arrow-icon-size, 14px);
	width: var(--ak-speed-arrow-icon-size, 14px);
	height: var(--ak-speed-arrow-icon-size, 14px);
	line-height: 1;
	color: inherit;
}

[id^="apeiron-autoscroll-"] .speed-arrow-icon-wrap {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: inherit;
	fill: inherit;
	stroke: inherit;
	visibility: visible !important;
	opacity: 1 !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow-icon-wrap svg,
[id^="apeiron-autoscroll-"] .speed-arrow-icon-wrap svg * {
	stroke: inherit;
	fill: inherit;
	color: inherit;
}

[id^="apeiron-autoscroll-"] .speed-arrow-icon-wrap i,
[id^="apeiron-autoscroll-"] .speed-arrow-icon-wrap i::before {
	color: inherit;
}

[id^="apeiron-autoscroll-"] .speed-arrow span {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: var(--ak-speed-arrow-icon-size, 14px) !important;
	width: var(--ak-speed-arrow-icon-size, 14px) !important;
	height: var(--ak-speed-arrow-icon-size, 14px) !important;
	line-height: 1 !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow span i {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: inherit !important;
	width: inherit !important;
	height: inherit !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow span i::before {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

[id^="apeiron-autoscroll-"] .speed-arrow:hover {
	background-color: var(--ak-speed-arrow-hover-bg, #083c57);
	background: var(--ak-speed-arrow-hover-bg, #083c57);
	background-image: none;
	color: var(--ak-speed-arrow-hover-color, #ffffff);
	opacity: var(--ak-speed-arrow-hover-opacity, 1);
	transform: scale(1.05);
}

[id^="apeiron-autoscroll-"] .speed-arrow:hover svg {
	stroke: var(--ak-speed-arrow-hover-color, #ffffff);
	fill: var(--ak-speed-arrow-hover-color, #ffffff);
	color: var(--ak-speed-arrow-hover-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:hover i {
	color: var(--ak-speed-arrow-hover-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:hover i::before {
	color: var(--ak-speed-arrow-hover-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:hover>* {
	color: var(--ak-speed-arrow-hover-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:active {
	transform: scale(0.95);
	background-color: var(--ak-speed-arrow-active-bg, #062d42);
	background: var(--ak-speed-arrow-active-bg, #062d42);
	background-image: none;
	color: var(--ak-speed-arrow-active-color, #ffffff);
	opacity: var(--ak-speed-arrow-active-opacity, 1);
}

[id^="apeiron-autoscroll-"] .speed-arrow:active svg {
	stroke: var(--ak-speed-arrow-active-color, #ffffff);
	fill: var(--ak-speed-arrow-active-color, #ffffff);
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:active i {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:active i::before {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow:active>* {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.active {
	animation: speedArrowClick 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--ak-speed-arrow-active-bg, #062d42);
	background: var(--ak-speed-arrow-active-bg, #062d42);
	background-image: none;
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.active svg {
	stroke: var(--ak-speed-arrow-active-color, #ffffff);
	fill: var(--ak-speed-arrow-active-color, #ffffff);
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.active i {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.active>* {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.active i::before {
	color: var(--ak-speed-arrow-active-color, #ffffff);
}

[id^="apeiron-autoscroll-"] .speed-arrow.is-limit {
	color: var(--ak-speed-arrow-limit-color, #ef4444);
	opacity: var(--ak-speed-arrow-limit-opacity, 0.5);
}

[id^="apeiron-autoscroll-"] .speed-arrow.is-limit svg {
	stroke: var(--ak-speed-arrow-limit-color, #ef4444);
	color: var(--ak-speed-arrow-limit-color, #ef4444);
}

[id^="apeiron-autoscroll-"] .speed-arrow.is-limit i {
	color: var(--ak-speed-arrow-limit-color, #ef4444);
}

[id^="apeiron-autoscroll-"] .speed-arrow.is-limit i::before {
	color: var(--ak-speed-arrow-limit-color, #ef4444);
}

/* Icon colored class for mobile */
[id^="apeiron-autoscroll-"] .speed-arrow i.apeiron-icon-colored,
[id^="apeiron-autoscroll-"] .speed-arrow i.apeiron-icon-colored::before,
[id^="apeiron-autoscroll-"] .speed-arrow i.apeiron-icon-colored::after {
	color: var(--ak-speed-arrow-color, #1e293b);
	fill: var(--ak-speed-arrow-color, #1e293b);
	stroke: var(--ak-speed-arrow-color, #1e293b);
}

/* Scroll Top Button */
[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn {
	display: none;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 12px;
	opacity: 0;
	transform: scale(0.8);
	margin-top: var(--ak-scroll-top-gap, 10px);
	padding: 0 !important;
	box-sizing: border-box !important;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn.show {
	display: flex;
	opacity: 1;
	transform: scale(1);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn:hover {
	transform: scale(1.1);
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn svg {
	width: var(--ak-scroll-top-icon-size, 12px) !important;
	height: var(--ak-scroll-top-icon-size, 12px) !important;
	max-width: var(--ak-scroll-top-icon-size, 12px) !important;
	max-height: var(--ak-scroll-top-icon-size, 12px) !important;
	stroke: currentColor !important;
	fill: currentColor !important;
	display: block !important;
	padding: var(--ak-scroll-top-icon-padding-top, 0) var(--ak-scroll-top-icon-padding-right, 0) var(--ak-scroll-top-icon-padding-bottom, 0) var(--ak-scroll-top-icon-padding-left, 0) !important;
	box-sizing: content-box !important;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn i {
	display: inline-block !important;
	font-size: var(--ak-scroll-top-icon-size, 12px) !important;
	width: var(--ak-scroll-top-icon-size, 12px) !important;
	height: var(--ak-scroll-top-icon-size, 12px) !important;
	line-height: 1 !important;
	padding: var(--ak-scroll-top-icon-padding-top, 0) var(--ak-scroll-top-icon-padding-right, 0) var(--ak-scroll-top-icon-padding-bottom, 0) var(--ak-scroll-top-icon-padding-left, 0) !important;
	box-sizing: content-box !important;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn i::before {
	font-size: inherit !important;
	line-height: inherit !important;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn>* {
	font-size: var(--ak-scroll-top-icon-size, 12px) !important;
	width: var(--ak-scroll-top-icon-size, 12px) !important;
	height: var(--ak-scroll-top-icon-size, 12px) !important;
	max-width: var(--ak-scroll-top-icon-size, 12px) !important;
	max-height: var(--ak-scroll-top-icon-size, 12px) !important;
	padding: var(--ak-scroll-top-icon-padding-top, 0) var(--ak-scroll-top-icon-padding-right, 0) var(--ak-scroll-top-icon-padding-bottom, 0) var(--ak-scroll-top-icon-padding-left, 0) !important;
	box-sizing: content-box !important;
}

/* End Notification */
[id^="apeiron-autoscroll-"] .apeiron-end-notification {
	position: absolute;
	background: rgba(8, 60, 87, 0.9);
	color: #fff;
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	box-shadow: none;
	z-index: 20;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* End Notification Position - Otomatis menyesuaikan seperti tooltip */
/* Position: Horizontal Kiri -> Notification di Kanan */
[id^="apeiron-autoscroll-"].pos-top-left .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-center-left .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-bottom-left .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-left-center .apeiron-end-notification {
	left: calc(100% + 12px);
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* Position: Horizontal Kanan -> Notification di Kiri */
[id^="apeiron-autoscroll-"].pos-top-right .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-center-right .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-bottom-right .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-right-center .apeiron-end-notification {
	right: calc(100% + 12px);
	left: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

/* Position: Horizontal Tengah -> Notification di Atas */
[id^="apeiron-autoscroll-"].pos-top-center .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-center-center .apeiron-end-notification,
[id^="apeiron-autoscroll-"].pos-bottom-center .apeiron-end-notification {
	bottom: calc(100% + 12px);
	top: auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show {
	opacity: 1;
	visibility: visible;
}

/* End Notification Animations */
[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-fade {
	animation: endNotificationFade var(--ak-end-notification-duration, 0.5s) ease-out forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-slide {
	animation: endNotificationSlide var(--ak-end-notification-duration, 0.5s) ease-out forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-scale {
	animation: endNotificationScale var(--ak-end-notification-duration, 0.5s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-bounce {
	animation: endNotificationBounce var(--ak-end-notification-duration, 0.5s) ease-out forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-zoom {
	animation: endNotificationZoom var(--ak-end-notification-duration, 0.5s) ease-out forwards;
}

[id^="apeiron-autoscroll-"] .apeiron-end-notification.show.anim-flip {
	animation: endNotificationFlip var(--ak-end-notification-duration, 0.5s) ease-out forwards;
}

/* Progress Bar */
[id^="apeiron-autoscroll-"] .apeiron-progress-bar {
	width: 60px;
	height: 3px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--ak-progress-bg-color, rgba(8, 60, 87, 0.2));
	opacity: 1;
	visibility: visible;
	transition: background 0.3s ease, height 0.3s ease;
}

[id^="apeiron-autoscroll-"] .apeiron-progress-bar .bar-fill {
	width: 0%;
	height: 100%;
	background: var(--ak-progress-color, #083c57);
	border-radius: 3px;
	transition: width 0.15s ease-out, background 0.3s ease, height 0.3s ease;
}


@keyframes buttonPress {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.92);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes buttonRelease {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

/* Speed Control Appear Keyframes */
@keyframes speedControlAppearFade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes speedControlAppearSlide {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes speedControlAppearScale {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.02);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes speedControlAppearBounce {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.85);
	}

	50% {
		opacity: 0.9;
		transform: translateY(3px) scale(1.02);
	}

	70% {
		opacity: 1;
		transform: translateY(-1px) scale(0.98);
	}

	85% {
		transform: translateY(0.5px) scale(1.01);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes speedControlAppearZoom {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	50% {
		opacity: 0.9;
		transform: scale(1.08);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes speedControlAppearFlip {
	0% {
		opacity: 0;
		transform: rotateY(-75deg) scale(0.85);
	}

	100% {
		opacity: 1;
		transform: rotateY(0deg) scale(1);
	}
}

@keyframes speedControlAppearElastic {
	0% {
		opacity: 0;
		transform: scale(0.4) translateY(-15px);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.08) translateY(2px);
	}

	70% {
		opacity: 1;
		transform: scale(0.96) translateY(-1px);
	}

	85% {
		transform: scale(1.02) translateY(0.5px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes speedControlAppearSlideUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes speedControlAppearSlideDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Speed Control Disappear Keyframes */
@keyframes speedControlDisappearFade {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes speedControlDisappearSlide {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(16px);
	}
}

@keyframes speedControlDisappearScale {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	40% {
		opacity: 0.85;
		transform: scale(0.97) translateY(4px);
	}

	100% {
		opacity: 0;
		transform: scale(0.9) translateY(12px);
	}
}

@keyframes speedControlDisappearBounce {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	30% {
		opacity: 0.9;
		transform: translateY(-1px) scale(0.98);
	}

	50% {
		opacity: 0.7;
		transform: translateY(3px) scale(1.02);
	}

	70% {
		opacity: 0.5;
		transform: translateY(-1px) scale(0.96);
	}

	85% {
		opacity: 0.3;
		transform: translateY(0.5px) scale(0.99);
	}

	100% {
		opacity: 0;
		transform: translateY(20px) scale(0.85);
	}
}

@keyframes speedControlDisappearZoom {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.9;
		transform: scale(0.92);
	}

	100% {
		opacity: 0;
		transform: scale(0.6);
	}
}

@keyframes speedControlDisappearFlip {
	0% {
		opacity: 1;
		transform: rotateY(0deg) scale(1);
	}

	100% {
		opacity: 0;
		transform: rotateY(-75deg) scale(0.85);
	}
}

@keyframes speedControlDisappearElastic {
	0% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	30% {
		opacity: 0.8;
		transform: scale(1.08) translateY(-2px);
	}

	50% {
		opacity: 0.6;
		transform: scale(0.96) translateY(2px);
	}

	70% {
		opacity: 0.4;
		transform: scale(1.02) translateY(-1px);
	}

	85% {
		opacity: 0.2;
		transform: scale(0.98) translateY(0.5px);
	}

	100% {
		opacity: 0;
		transform: scale(0.4) translateY(15px);
	}
}

@keyframes speedControlDisappearSlideUp {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(-16px);
	}
}

@keyframes speedControlDisappearSlideDown {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(16px);
	}
}

@keyframes speedValuePulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1.15);
	}
}

@keyframes speedValueFade {
	0% {
		opacity: 0.3;
	}

	100% {
		opacity: 1;
	}
}

@keyframes speedValueSlide {
	0% {
		transform: translateY(-5px);
		opacity: 0.3;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes speedValueBounce {
	0% {
		transform: scale(0.9);
	}

	40% {
		transform: scale(1.15);
	}

	70% {
		transform: scale(0.95);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes speedArrowClick {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.85);
	}

	100% {
		transform: scale(1);
	}
}

/* Button Appear Animations */
@keyframes buttonAppearFade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes buttonAppearSlide {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes buttonAppearScale {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes buttonAppearBounce {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.8);
	}

	60% {
		opacity: 1;
		transform: translateY(-10px) scale(1.05);
	}

	80% {
		transform: translateY(5px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes buttonAppearZoom {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes buttonAppearFlip {
	0% {
		opacity: 0;
		transform: rotateY(-90deg) scale(0.8);
	}

	100% {
		opacity: 1;
		transform: rotateY(0deg) scale(1);
	}
}

@keyframes buttonAppearElastic {
	0% {
		opacity: 0;
		transform: scale(0.3) translateY(20px);
	}

	60% {
		opacity: 1;
		transform: scale(1.1) translateY(-5px);
	}

	80% {
		transform: scale(0.95) translateY(2px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* End Notification Animations */
@keyframes endNotificationFade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes endNotificationSlide {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes endNotificationScale {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes endNotificationBounce {
	0% {
		opacity: 0;
		transform: translateY(-20px) scale(0.8);
	}

	60% {
		opacity: 1;
		transform: translateY(5px) scale(1.05);
	}

	80% {
		transform: translateY(-2px) scale(0.95);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes endNotificationZoom {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	50% {
		opacity: 1;
		transform: scale(1.15);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes endNotificationFlip {
	0% {
		opacity: 0;
		transform: rotateX(-90deg) scale(0.8);
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg) scale(1);
	}
}


/* ================================ */
/* Premium Active Button Animations */
/* ================================ */

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-pulse-soft {
	animation: apeiron-pulse-soft var(--ak-active-anim-speed, 1.5s) ease-in-out infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-scale-breathing {
	animation: apeiron-scale-breathing var(--ak-active-anim-speed, 1.5s) ease-in-out infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-micro-bounce {
	animation: apeiron-micro-bounce var(--ak-active-anim-speed, 1.5s) ease-in-out infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-smooth-rotate {
	animation: apeiron-smooth-rotate calc(var(--ak-active-anim-speed, 1.5s) * 2) linear infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-glow-ring {
	box-shadow: 0 0 0 0 var(--ak-active-anim-color, rgba(8, 60, 87, 0.3));
	animation: apeiron-glow-ring var(--ak-active-anim-speed, 1.5s) ease-in-out infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-orbit-ring {
	animation: apeiron-orbit-ring var(--ak-active-anim-speed, 1.5s) ease-in-out infinite;
}

[id^="apeiron-autoscroll-"] .apeiron-scroll-btn.is-active.anim-ripple-wave {
	animation: apeiron-ripple-wave var(--ak-active-anim-speed, 1.5s) ease-out infinite;
}

@keyframes apeiron-pulse-soft {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(1.06);
		opacity: 0.9;
	}
}

@keyframes apeiron-scale-breathing {

	0%,
	100% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.08);
	}

	60% {
		transform: scale(0.97);
	}
}

@keyframes apeiron-micro-bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	25% {
		transform: translateY(-3px);
	}

	50% {
		transform: translateY(0);
	}

	75% {
		transform: translateY(-1.5px);
	}
}

@keyframes apeiron-smooth-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes apeiron-glow-ring {

	0%,
	100% {
		box-shadow: 0 0 0 0 var(--ak-active-anim-color, rgba(8, 60, 87, 0.3));
	}

	50% {
		box-shadow: 0 0 0 8px transparent;
	}
}

@keyframes apeiron-orbit-ring {

	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 2px var(--ak-active-anim-color, rgba(8, 60, 87, 0.3));
	}

	50% {
		transform: scale(1.04);
		box-shadow: 0 0 0 4px var(--ak-active-anim-color, rgba(8, 60, 87, 0.15));
	}
}

@keyframes apeiron-ripple-wave {
	0% {
		box-shadow: 0 0 0 0 var(--ak-active-anim-color, rgba(8, 60, 87, 0.35));
	}

	100% {
		box-shadow: 0 0 0 14px transparent;
	}
}

/* ======================== */
/* Ripple Ring System       */
/* ======================== */

[id^="apeiron-autoscroll-"] .ak-ripple-ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: var(--ak-ripple-thickness, 2px) solid var(--ak-ripple-color, rgba(8, 60, 87, 0.3));
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

/* Single Wave — one shot on activate */
[id^="apeiron-autoscroll-"] .ak-ripple-ring.ripple-mode-single.ripple-active {
	animation: apeiron-ripple-single var(--ak-ripple-speed, 1.5s) ease-out forwards;
}

/* Infinite Pulse — continuous loop */
[id^="apeiron-autoscroll-"] .ak-ripple-ring.ripple-mode-infinite.ripple-active {
	animation: apeiron-ripple-infinite var(--ak-ripple-speed, 1.5s) ease-out infinite;
}

/* Double Wave — 2 rings staggered */
[id^="apeiron-autoscroll-"] .ak-ripple-ring.ripple-mode-double.ripple-active {
	animation: apeiron-ripple-infinite var(--ak-ripple-speed, 1.5s) ease-out infinite;
}

[id^="apeiron-autoscroll-"] .ak-ripple-ring-2.ripple-mode-double.ripple-active {
	animation: apeiron-ripple-infinite var(--ak-ripple-speed, 1.5s) ease-out infinite;
	animation-delay: calc(var(--ak-ripple-speed, 1.5s) / 2);
}

@keyframes apeiron-ripple-single {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: var(--ak-ripple-opacity, 0.6);
	}

	100% {
		transform: translate(-50%, -50%) scale(calc(var(--ak-ripple-size, 180) / 100));
		opacity: 0;
	}
}

@keyframes apeiron-ripple-infinite {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: var(--ak-ripple-opacity, 0.6);
	}

	100% {
		transform: translate(-50%, -50%) scale(calc(var(--ak-ripple-size, 180) / 100));
		opacity: 0;
	}
}

/* ============================================
   Utility: Hidden state (JS toggle)
   ============================================ */
[id^="apeiron-autoscroll-"].is-hidden {
	display: none !important;
}

/* ============================================
   Accessibility: Focus indicators
   ============================================ */
[id^="apeiron-autoscroll-"] .apeiron-scroll-btn:focus-visible,
[id^="apeiron-autoscroll-"] .apeiron-scroll-top-btn:focus-visible,
[id^="apeiron-autoscroll-"] .speed-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

[id^="apeiron-autoscroll-"] .apeiron-speed-slider:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}