/* =========================================
   1. 基礎佈局與響應式
   ========================================= */
.wrd-wrapper {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

@media screen and (min-width: 1200px) {
	#content { margin-top: 210px; }
}
/* =========================================
   2. 動畫定義 (Keyframes)
   ========================================= */
/* 進度條滑入 */
@keyframes slideIn {
	from { width: 0; }
	to { width: var(--target-width); }
}

/* 文字淡入 */
@keyframes fadeInText {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 直線專用：單純淡入 */
@keyframes lineFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 文字專用：縮放彈跳 (針對 right:0 定位優化) */
@keyframes labelPopIn {
	0% { transform: scale(0); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* =========================================
   3. 進度條主體樣式
   ========================================= */
.wrd-bar-bg {
	position: relative;
	width: 100%;
	height: 24px;
	background-color: #e0e0e0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	top: -6px;
}

.wrd-bar-fill-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	z-index: 1;
}

.wrd-bar-fill {
	height: 100%;
	background-color: #fdd108;
	width: 0; 
	animation: slideIn 3s cubic-bezier(0.25, 1, 0.5, 1) 1.5s forwards;
}

.wrd-bar-text {
	position: absolute;
	left: 20px;
	z-index: 5;
	color: #666;
	font-size: 1rem;
	pointer-events: none;
	font-weight: bold;
	opacity: 0;
	animation: fadeInText 1s ease forwards 1.8s;
}

/* =========================================
   4. 節點設定 (修正對齊問題)
   ========================================= */
.wrd-node {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

/* 直線：預設隱藏 */
.wrd-line {
	width: 2px;
	height: 24px;
	background-color: #bbb;
	opacity: 0;
	transition: background-color 0.3s;
}

/* --- 100% Bonus 節點修正 --- */
.wrd-line-bonus {
	background-color: transparent !important;
	width: 2px; /* 寬度改回與直線一致，避免撐開容器 */
	height: 24px;
	position: relative;
}

/* 達成時的星星樣式 */
.active .wrd-line-bonus::after {
	font-family: "Font Awesome 5 Free";
	content: '\f005';
	font-weight: 900;
	display: block;
	position: absolute; /* 改為絕對定位，不影響父層寬度 */
	left: 50%;
	top: -3px; /* 向上偏移，不遮到文字 */
	/* 1. 核心修正：初始透明度設為 0 */
	opacity: 0; 
	/* 2. 修正旋轉：星星轉正 */
	transform: translateX(-50%) rotate(0deg);
	animation: lineFadeIn 0.8s ease forwards;
	animation-delay: 4.5s;
	color: #00c300; /* 星星用金色#fdd108，若要綠色改回 #00c300 */
	font-size: 20px;
}

/* 文字標籤：修正置中問題 */
.wrd-label-bottom {
	position: absolute;
	top: 14px;
	right: 0; /* 始終貼齊右邊 */
	white-space: nowrap;
	font-size: 1rem;
	color: #a0a0a0;
	padding-top: 10px;
	opacity: 0;
	transform: scale(0);
	transform-origin: right top; /* 從右側向左側彈出 */
}

/* --- 啟動動畫 (Active) --- */
.wrd-line {
	animation: lineFadeIn 0.8s ease forwards;
}

.wrd-label-bottom {
	animation: labelPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.active .wrd-label-bottom {
	color: #00c300;
	font-weight: bold;
}

/* 達成後的直線色彩 */
.active .wrd-line:not(.wrd-line-bonus) {
	background-color: #00c300;
}

/* =========================================
   5. 精準定時器 (Delay)
   ========================================= */
.wrd-node[style*="left: 50%"] .wrd-line, 
.wrd-node[style*="left: 50%"] .wrd-label-bottom { animation-delay: 3.0s; }

.wrd-node[style*="left: 70%"] .wrd-line, 
.wrd-node[style*="left: 70%"] .wrd-label-bottom { animation-delay: 3.6s; }

/* 100% 確保文字跟著延遲 */
.wrd-node[style*="left: 100%"] .wrd-label-bottom { 
	animation-delay: 4.5s; 
	right: 0 !important; /* 強制修正最後一個字的右對齊 */
}

@media (max-width: 480px) {
	.wrd-wrapper { padding: 0; }
	.wrd-bar-text { font-size: 13px; left: 8px; }
	.wrd-label-bottom { font-size: 12px; }
}

/* --- 新增：達成時的「打勾」圖示 --- */
.active .wrd-label-bottom::before {
	content: '✓'; /* 打勾符號 */
	margin-right: 2px; /* 與文字的間距 */
	font-weight: bold;
	font-size: 12px;
	color: #00c300;
	/* 讓打勾也跟著文字一起彈出來 */
	animation: labelPopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}