/**
 * 回到頂部按鈕 — 前台樣式
 * class 皆加 .dy-btt- 前綴，不覆蓋 WordPress / Elementor 原生 class。
 */

.dy-btt-btn {
	/* 位置：固定在右下角，由 PHP inline style 設定 right / bottom */
	position: fixed;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;

	/* reset button 樣式 */
	border: none;
	padding: 0;
	cursor: pointer;
	outline: none;
	overflow: hidden; /* 圖片疊加時不超出圓角 */

	/* 預設隱藏，由 JS 控制顯示 */
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity .3s ease, transform .3s ease;
}

/* 捲動超過門檻後顯示 */
.dy-btt-btn.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* hover 樣式由 PHP render_frontend() 輸出的 <style id="dy-btt-hover-style"> 控制 */

/* 過場動畫：背景色、陰影、SVG stroke 顏色 */
.dy-btt-btn {
	transition: opacity .3s ease, transform .3s ease, background .25s ease, box-shadow .25s ease;
}
.dy-btt-btn__arrow path {
	transition: stroke .25s ease;
}

/* 自訂圖片（預設與 Hover 疊加） */
.dy-btt-btn__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: opacity .3s ease;
}

/* 預設圖片：正常顯示 */
.dy-btt-btn__img--default {
	opacity: 1;
}

/* Hover 圖片：平時透明，疊在上方 */
.dy-btt-btn__img--hover {
	opacity: 0;
}

/* 預設箭頭 SVG */
.dy-btt-btn__arrow {
	display: block;
	flex-shrink: 0;
}

/* 置中對齊（data-align="center"）：需同時套用 X 軸平移與 Y 軸動畫偏移 */
.dy-btt-btn[data-align="center"] {
	transform: translateX(-50%) translateY(16px);
}
.dy-btt-btn[data-align="center"].is-visible {
	transform: translateX(-50%) translateY(0);
}

/* 無障礙：關閉動畫 */
@media (prefers-reduced-motion: reduce) {
	.dy-btt-btn {
		transition: none;
	}
}