/* ============================================================
   cathead 測試動畫樣式
   ⚠️ 僅供 index2.php 測試頁使用，正式頁 index.php 請勿引入
   ============================================================ */

.catheadWrap{
	display: block;
	position: fixed;
	bottom: 0;
	right: 60px;
	--cathead-w: clamp(90px, 9vw, 160px); /* 隨視窗寬度縮放：最小 90px，最大 160px，中間依視窗寬度 9% 等比例縮放 */
	width: var(--cathead-w);
	z-index: 500; /* 比 .menuWrapper (999) 低，讓下半部被選單列蓋住，製造「探出頭」的效果 */
	transform: translateY(100%);
}

.catheadWrap img{
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* 頁面 loading 結束後，加上此 class 讓貓頭從選單列後方探出 */
.catheadWrap.catPeek{
	transform: translateY(-26%); /* 數字越負，往上探得越多；動畫播放時實際位置由下面兩個 animation 控制，這行是保底 fallback */
	animation:
		catPopIn .9s ease-out forwards, /* 探出：像球一樣衝過頭、回彈一次，再停在最終位置 */
		catBob 3.5s ease-in-out 1.4s infinite; /* 定位後停頓一下，再開始左右擺動；延遲秒數 = 上面 catPopIn 秒數 + 停頓時間 */
}

/* 探出動畫：衝過最終高度 → 回彈往下一點 → 停在最終位置，只彈一次 */
@keyframes catPopIn{
	0%{ transform: translateY(100%); }
	55%{ transform: translateY(-32%); } /* 第一次彈起，衝過最終位置 */
	75%{ transform: translateY(-21%); } /* 回彈一次，往下掉一點 */
	100%{ transform: translateY(-26%); } /* 停在最終位置 */
}

/* 探頭後的待機左右擺動，增加生動感 */
@keyframes catBob{
	0%, 50%, 100%{ transform: translateY(-26%) rotate(0deg); }
	25%{ transform: translateY(-26%) rotate(2deg); }
	75%{ transform: translateY(-26%) rotate(-2deg); }
}


/* 手機版：畫面下沒有固定選單列，改為直接從螢幕最下方探出頭 */
@media screen and (max-width: 736px){

	.catheadWrap{
		right: 15%;
		left: auto;
		--cathead-w: clamp(70px, 20vw, 110px); /* 隨視窗寬度縮放：最小 70px，最大 110px */
		width: var(--cathead-w);
		margin-right: calc(var(--cathead-w) / -2); /* 跟著寬度等比例位移，維持原本的水平位置 */
		z-index: 500;
	}

	.catheadWrap.catPeek{
		transform: translateY(10%); /* 數字越小，往上探得越多；動畫播放時實際位置由下面兩個 animation 控制，這行是保底 fallback */
		animation:
			catPopInMobile .9s ease-out forwards, /* 探出：像球一樣衝過頭、回彈一次，再停在最終位置 */
			catBobMobile 3.5s ease-in-out 1.4s infinite; /* 定位後停頓一下，再開始左右擺動；延遲秒數 = 上面 catPopInMobile 秒數 + 停頓時間 */
	}

	/* 探出動畫：衝過最終高度 → 回彈往下一點 → 停在最終位置，只彈一次 */
	@keyframes catPopInMobile{
		0%{ transform: translateY(100%); }
		55%{ transform: translateY(4%); } /* 第一次彈起，衝過最終位置 */
		75%{ transform: translateY(14%); } /* 回彈一次，往下掉一點 */
		100%{ transform: translateY(10%); } /* 停在最終位置 */
	}

	@keyframes catBobMobile{
		0%, 50%, 100%{ transform: translateY(10%) rotate(0deg); }
		25%{ transform: translateY(10%) rotate(2deg); }
		75%{ transform: translateY(10%) rotate(-2deg); }
	}

}