/* ─── Scroll To Top – Public Button Styles ──────────────────────────────────── */

#stt-scroll-top-btn {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: background-color 0.3s ease, color 0.3s ease,
	            transform 0.3s ease, opacity 0.4s ease,
	            box-shadow 0.3s ease, visibility 0.4s ease;
	-webkit-appearance: none;
	appearance: none;
}

#stt-scroll-top-btn.stt-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ── Entrance animations ─────────────────────────── */
@keyframes stt-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes stt-slide-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes stt-zoom-in {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes stt-bounce-in {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.12); }
	70%  { transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}

/* All entrance animations use --stt-es CSS variable for speed */
#stt-scroll-top-btn.stt-visible.stt-entrance-fade-in  { animation: stt-fade-in   var(--stt-es,0.4s) ease forwards; }
#stt-scroll-top-btn.stt-visible.stt-entrance-slide-up { animation: stt-slide-up  var(--stt-es,0.4s) ease forwards; }
#stt-scroll-top-btn.stt-visible.stt-entrance-zoom-in  { animation: stt-zoom-in   var(--stt-es,0.4s) ease forwards; }
#stt-scroll-top-btn.stt-visible.stt-entrance-bounce   { animation: stt-bounce-in var(--stt-es,0.6s) ease forwards; }

/* Flip */
@keyframes stt-flip {
	from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
	to   { opacity: 1; transform: perspective(400px) rotateX(0); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-flip { animation: stt-flip var(--stt-es,0.5s) ease forwards; }

/* Swing */
@keyframes stt-swing {
	0%   { opacity: 0; transform: rotate(-60deg); }
	60%  { transform: rotate(20deg); }
	80%  { transform: rotate(-10deg); }
	100% { opacity: 1; transform: rotate(0); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-swing { animation: stt-swing var(--stt-es,0.6s) ease forwards; transform-origin: top center; }

/* Pulse in */
@keyframes stt-pulse-in {
	0%   { opacity: 0; transform: scale(0.8); }
	50%  { opacity: 1; transform: scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-pulse { animation: stt-pulse-in var(--stt-es,0.5s) ease forwards; }

/* Roll In */
@keyframes stt-roll-in {
	from { opacity: 0; transform: translateY(30px) rotate(-120deg); }
	to   { opacity: 1; transform: translateY(0) rotate(0); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-roll-in { animation: stt-roll-in var(--stt-es,0.6s) ease forwards; }

/* Rubber Band In */
@keyframes stt-rubber-in {
	0%   { opacity: 0; transform: scaleX(0.3); }
	40%  { opacity: 1; transform: scaleX(1.3); }
	60%  { transform: scaleX(0.8); }
	80%  { transform: scaleX(1.1); }
	100% { transform: scaleX(1); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-rubber-band { animation: stt-rubber-in var(--stt-es,0.6s) ease forwards; }

/* Heartbeat In */
@keyframes stt-heartbeat-in {
	0%   { opacity: 0; transform: scale(0); }
	14%  { opacity: 1; transform: scale(1.35); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.35); }
	70%  { transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-heartbeat { animation: stt-heartbeat-in var(--stt-es,0.8s) ease forwards; }

/* Jello */
@keyframes stt-jello-in {
	0%   { opacity: 0; }
	11%  { opacity: 1; transform: skewX(-12deg) skewY(-12deg); }
	22%  { transform: skewX(6.5deg) skewY(6.5deg); }
	33%  { transform: skewX(-4deg) skewY(-4deg); }
	44%  { transform: skewX(2deg) skewY(2deg); }
	55%  { transform: skewX(-1deg) skewY(-1deg); }
	72%  { transform: skewX(0.5deg) skewY(0.5deg); }
	100% { transform: skewX(0) skewY(0); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-jello { animation: stt-jello-in var(--stt-es,0.8s) ease forwards; }

/* Light Speed */
@keyframes stt-light-speed {
	from { opacity: 0; transform: translateX(100%) skewX(-30deg); }
	60%  { opacity: 1; transform: translateX(-10%) skewX(10deg); }
	80%  { transform: translateX(0%) skewX(-5deg); }
	100% { opacity: 1; transform: translateX(0) skewX(0); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-light-speed { animation: stt-light-speed var(--stt-es,0.4s) ease-out forwards; }

/* Rotate In */
@keyframes stt-rotate-in {
	from { opacity: 0; transform: rotate(-200deg) scale(0.5); }
	to   { opacity: 1; transform: rotate(0) scale(1); }
}
#stt-scroll-top-btn.stt-visible.stt-entrance-rotate-in { animation: stt-rotate-in var(--stt-es,0.5s) ease forwards; }

/* ── Hover animations — all use --stt-hs for duration ─── */
#stt-scroll-top-btn.stt-hover-scale:hover,
#stt-scroll-top-btn.stt-hover-scale:focus {
	transform: scale(1.15);
}
#stt-scroll-top-btn.stt-hover-rotate:hover,
#stt-scroll-top-btn.stt-hover-rotate:focus {
	transform: rotate(-12deg) scale(1.05);
}

@keyframes stt-glow-pulse {
	0%, 100% { filter: brightness(1); }
	50%       { filter: brightness(1.3) drop-shadow(0 0 8px currentColor); }
}
#stt-scroll-top-btn.stt-hover-glow:hover,
#stt-scroll-top-btn.stt-hover-glow:focus {
	animation: stt-glow-pulse var(--stt-hs,0.8s) ease infinite;
}

@keyframes stt-hover-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
#stt-scroll-top-btn.stt-hover-bounce:hover,
#stt-scroll-top-btn.stt-hover-bounce:focus {
	animation: stt-hover-bounce var(--stt-hs,0.5s) ease infinite;
}

@keyframes stt-hover-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-5px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(4px); }
}
#stt-scroll-top-btn.stt-hover-shake:hover,
#stt-scroll-top-btn.stt-hover-shake:focus {
	animation: stt-hover-shake var(--stt-hs,0.5s) ease infinite;
}

@keyframes stt-hover-tada {
	0%, 100% { transform: scale(1) rotate(0); }
	10%  { transform: scale(.9) rotate(-3deg); }
	30%  { transform: scale(1.1) rotate(3deg); }
	50%  { transform: scale(1.1) rotate(-3deg); }
	70%  { transform: scale(1.1) rotate(3deg); }
	90%  { transform: scale(1.1) rotate(-3deg); }
}
#stt-scroll-top-btn.stt-hover-tada:hover,
#stt-scroll-top-btn.stt-hover-tada:focus {
	animation: stt-hover-tada var(--stt-hs,0.7s) ease infinite;
}

@keyframes stt-hover-wobble {
	0%, 100% { transform: translateX(0) rotate(0); }
	15% { transform: translateX(-5px) rotate(-5deg); }
	30% { transform: translateX(4px) rotate(3deg); }
	45% { transform: translateX(-3px) rotate(-3deg); }
	60% { transform: translateX(2px) rotate(2deg); }
	75% { transform: translateX(-1px) rotate(-1deg); }
}
#stt-scroll-top-btn.stt-hover-wobble:hover,
#stt-scroll-top-btn.stt-hover-wobble:focus {
	animation: stt-hover-wobble var(--stt-hs,0.8s) ease infinite;
}

/* Float */
@keyframes stt-hover-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
#stt-scroll-top-btn.stt-hover-float:hover,
#stt-scroll-top-btn.stt-hover-float:focus {
	animation: stt-hover-float var(--stt-hs,1.5s) ease infinite;
}

/* Spin */
@keyframes stt-hover-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
#stt-scroll-top-btn.stt-hover-spin:hover,
#stt-scroll-top-btn.stt-hover-spin:focus {
	animation: stt-hover-spin var(--stt-hs,0.6s) linear infinite;
}

/* Ping */
@keyframes stt-hover-ping {
	0%  { box-shadow: 0 0 0 0 currentColor; }
	70% { box-shadow: 0 0 0 14px transparent; }
	100%{ box-shadow: 0 0 0 0 transparent; }
}
#stt-scroll-top-btn.stt-hover-ping:hover,
#stt-scroll-top-btn.stt-hover-ping:focus {
	animation: stt-hover-ping var(--stt-hs,1s) ease infinite;
}

/* Rubber Band */
@keyframes stt-hover-rubber {
	0%, 100% { transform: scale(1); }
	30%  { transform: scaleX(1.25) scaleY(0.75); }
	40%  { transform: scaleX(0.75) scaleY(1.25); }
	50%  { transform: scaleX(1.15) scaleY(0.85); }
	65%  { transform: scaleX(0.95) scaleY(1.05); }
	75%  { transform: scaleX(1.05) scaleY(0.95); }
}
#stt-scroll-top-btn.stt-hover-rubber-band:hover,
#stt-scroll-top-btn.stt-hover-rubber-band:focus {
	animation: stt-hover-rubber var(--stt-hs,0.8s) ease infinite;
}

/* Heartbeat */
@keyframes stt-hover-heartbeat {
	0%, 100% { transform: scale(1); }
	14%  { transform: scale(1.35); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.35); }
	70%  { transform: scale(1); }
}
#stt-scroll-top-btn.stt-hover-heartbeat:hover,
#stt-scroll-top-btn.stt-hover-heartbeat:focus {
	animation: stt-hover-heartbeat var(--stt-hs,1s) ease infinite;
}

/* Neon Glow */
@keyframes stt-hover-neon {
	0%, 100% { filter: brightness(1); box-shadow: 0 0 5px currentColor; }
	50%       { filter: brightness(1.5); box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
}
#stt-scroll-top-btn.stt-hover-neon:hover,
#stt-scroll-top-btn.stt-hover-neon:focus {
	animation: stt-hover-neon var(--stt-hs,1s) ease infinite;
}

/* ── Device visibility ───────────────────────────── */
@media (min-width: 1025px) {
	#stt-scroll-top-btn.stt-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	#stt-scroll-top-btn.stt-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	#stt-scroll-top-btn.stt-hide-mobile { display: none !important; }
}

/* ── Focus ring (accessibility) ──────────────────── */
#stt-scroll-top-btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* ── Align with the XpertLab sticky icon badge ───────────────────────────────
   Anchors the button to the same vertical centre-line as the sticky-icon badge
   and stacks it directly above the badge, consistently on every device.
   Reference geometry (sticky-icon defaults): bottom-right, 84px badge, 24px
   offset → centre 66px from the right edge, top edge 108px from the bottom.
   Overrides the button's own position setting so the two always line up.
   Assumes the default 45px button; adjust the offsets below if either size
   changes. */
#stt-scroll-top-btn {
	left: auto !important;
	right: 52px !important;
	bottom: 142px !important;
}

@media (max-width: 768px) {
	#stt-scroll-top-btn {
		right: 39px !important;
		bottom: calc(max(env(safe-area-inset-bottom, 0px), 37px) + 81px) !important;
	}
}