/* ==========================================================================
   Scroll to Top (.sentio-stt)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   Progress ring · 4 icons · smart show/hide · scroll speed · tooltip ·
   4 positions · 4 entrance anims · percentage text.
   ========================================================================== */

/* ── Base (fixed wrapper) ── */
.sentio-stt {
	position: fixed;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.sentio-stt__btn,
.sentio-stt__tooltip {
	pointer-events: auto;
}

/* ── Hidden state ── */
.sentio-stt--hidden {
	opacity: 0;
	visibility: hidden;
}

/* ── Entrance Animations (Diff #7) ── */
.sentio-stt--entrance-fade.sentio-stt--hidden {
	opacity: 0;
}
.sentio-stt--entrance-slide-up.sentio-stt--hidden {
	opacity: 0;
	transform: translateY(20px);
}
.sentio-stt--entrance-scale.sentio-stt--hidden {
	opacity: 0;
	transform: scale(0.3);
}
.sentio-stt--entrance-rotate-in.sentio-stt--hidden {
	opacity: 0;
	transform: rotate(-180deg) scale(0.5);
}
/* Visible overrides per position — handled below */

/* ── Position Variants (Diff #6) ── */
.sentio-stt--bottom-right {
	right: 24px;
	bottom: 24px;
}
.sentio-stt--bottom-left {
	left: 24px;
	bottom: 24px;
}
.sentio-stt--bottom-center {
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
}
.sentio-stt--bottom-center.sentio-stt--hidden.sentio-stt--entrance-slide-up {
	transform: translateX(-50%) translateY(20px);
}
.sentio-stt--bottom-center.sentio-stt--entrance-scale.sentio-stt--hidden {
	transform: translateX(-50%) scale(0.3);
}
.sentio-stt--side-right {
	right: 24px;
	bottom: 50%;
	transform: translateY(50%);
}
.sentio-stt--side-right.sentio-stt--hidden.sentio-stt--entrance-slide-up {
	transform: translateY(50%) translateY(20px);
	opacity: 0;
}
.sentio-stt--side-right.sentio-stt--entrance-scale.sentio-stt--hidden {
	transform: translateY(50%) scale(0.3);
}

/* ── Inner wrapper — positions ring relative to button ── */
.sentio-stt__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Button ── */
.sentio-stt__btn {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #6366f1;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.sentio-stt__btn:hover {
	transform: scale(1.1);
}

/* ── Icon ── */
.sentio-stt__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	line-height: 1;
	transition: color 0.25s ease;
}
.sentio-stt__icon svg {
	width: 20px;
	height: 20px;
}
.sentio-stt__icon i {
	font-size: 20px;
}

/* ── Percentage Text (Diff #8) ── */
.sentio-stt__pct {
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.02em;
	transition: color 0.25s ease;
}

/* ── Progress Ring (Diff #1) ── */
.sentio-stt__ring {
	position: absolute;
	z-index: 2;
	inset: -5px;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	transform: rotate(-90deg);
	pointer-events: none;
}
.sentio-stt__ring-track {
	stroke: #e5e7eb;
	stroke-width: 3;
}
.sentio-stt__ring-fill {
	stroke: #6366f1;
	stroke-width: 3;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.1s linear;
}

/* ── Tooltip (Diff #5) ── */
.sentio-stt__tooltip {
	position: absolute;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background-color: #1f2937;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
	z-index: 3;
}

/* Right positions — tooltip to the left */
.sentio-stt--bottom-right .sentio-stt__tooltip,
.sentio-stt--side-right   .sentio-stt__tooltip {
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
}
.sentio-stt--bottom-right:hover .sentio-stt__tooltip,
.sentio-stt--side-right:hover   .sentio-stt__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Left position — tooltip to the right */
.sentio-stt--bottom-left .sentio-stt__tooltip {
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
}
.sentio-stt--bottom-left:hover .sentio-stt__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

/* Center position — tooltip above */
.sentio-stt--bottom-center .sentio-stt__tooltip {
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
}
.sentio-stt--bottom-center:hover .sentio-stt__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ── Hide on Mobile ── */
@media (max-width: 767px) {
	.sentio-stt--hide-mobile { display: none; }
}