/* =====================================================================
   ICE-GUY 進場動畫＋hover 補強　預覽版 v0.1
   美學方向：冷氣出風感——首屏先起一層冰霧，被一道冷風掃過後散開；
             往下捲，元素帶一點霧化從下方滑入、逐漸清晰，卡片一張接一張送出；
             hover 時卡片浮起、泛出冰藍冷光。
   安全設計：只有 JS 在 <html> 加上 .igm-on 之後才會隱藏元素；JS 沒跑，內容照常顯示。
   ===================================================================== */

/* 0. 設定區 ★最常改 */
:root {
	--igm-ice: 3, 169, 244;                    /* ★ 冰藍 #03A9F4（網站 --bricks-color-light-blue） */
	--igm-frost: 129, 212, 250;                /* ★ 霧藍 #81D4FA（網站 --bricks-color-sky-blue） */
	--igm-navy: 30, 58, 95;                    /* ★ 深藍 #1E3A5F（網站 --color-primary） */
	--igm-ease: cubic-bezier(.22, 1, .36, 1);  /* ★ 出場曲線：快出、慢慢停住，像風吹到定點 */
	--igm-dur: .8s;                            /* ★ 單一元素進場時間 */
	--igm-rise: 28px;                          /* ★ 進場位移距離 */
	--igm-blur: 8px;                           /* ★ 進場起始模糊（霧化感） */
}
@media (max-width: 767px) {
	:root {
		--igm-dur: .65s;                       /* ★ 手機短一點，捲動時不拖泥帶水 */
		--igm-rise: 18px;
		--igm-blur: 5px;
	}
}

/* 1. 捲動進場：待命狀態
      :root 前綴是為了蓋過 Bricks 產生的同層級選擇器（例如 .c-xxx.brxe-block），不要改 */
:root.igm-on .igm {
	opacity: 0;
	transform: translate3d(0, var(--igm-rise), 0);
	filter: blur(var(--igm-blur));
	transition:
		opacity var(--igm-dur) var(--igm-ease),
		transform var(--igm-dur) var(--igm-ease),
		filter calc(var(--igm-dur) * .85) var(--igm-ease);
	transition-delay: var(--igm-delay, 0ms);
	will-change: opacity, transform, filter;
}
/* 卡片：多一點距離與縮放，像被風「送」出來 */
:root.igm-on .igm.igm-card {
	transform: translate3d(0, calc(var(--igm-rise) * 1.3), 0) scale(.96);
}
/* 元素本身已有 transform／filter（例如置中定位）：只做淡入，避免結束時跳一下 */
:root.igm-on .igm.igm-fade {
	transform: none;
	filter: none;
}
/* 圖片：由下往上掀開，裡面的圖從微放大慢慢定住 */
:root.igm-on .igm.igm-img {
	transform: none;
	filter: none;
	clip-path: inset(0 0 24% 0 round var(--igm-r, 0px));
	transition:
		clip-path 1s var(--igm-ease),
		opacity .6s ease;
	transition-delay: var(--igm-delay, 0ms);
}
:root.igm-on .igm.igm-img img {
	transform: scale(1.08);
	transition: transform 1.3s var(--igm-ease);
	transition-delay: var(--igm-delay, 0ms);
}
/* 進場完成狀態 */
:root.igm-on .igm.igm-in {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0 round var(--igm-r, 0px));
}
:root.igm-on .igm.igm-in.igm-img img {
	transform: none;
}

/* 2. 首屏大標：一行一行從遮罩裡升上來 */
:root.igm-on .igm-lines .igm-line {
	display: inline-block;
	overflow: hidden;                 /* 不要改：遮罩效果靠這行 */
	vertical-align: top;
	padding: 0 .04em .16em;           /* 不要改：留空間給中文字下緣，避免被遮罩切到 */
	margin-bottom: -.16em;
}
:root.igm-on .igm-lines .igm-line-in {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, 105%, 0);
	transition:
		transform 1s var(--igm-ease),
		opacity .5s ease;
	transition-delay: var(--igm-delay, 0ms);
}
:root.igm-on .igm-lines.igm-in .igm-line-in {
	opacity: 1;
	transform: none;
}

/* 3. 首屏冰霧：載入時蓋一層冰霧，被一道冷風掃過後散開 */
.igm-rel {
	position: relative;
}
.igm-mist {
	position: absolute;
	inset: 0;
	z-index: 20;                      /* 蓋過首屏內的圖層；約 1.6 秒後由 JS 移除 */
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(240, 249, 255, .78) 0%,
		rgba(var(--igm-frost), .38) 55%,
		rgba(240, 249, 255, .66) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	animation: igm-mist-out 1.25s var(--igm-ease) .2s forwards;
}
.igm-mist::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 28%, rgba(255, 255, 255, .7) 46%, transparent 62%);
	transform: translate3d(-100%, 0, 0);
	animation: igm-breeze 1.05s var(--igm-ease) .05s forwards;
}
@keyframes igm-mist-out {
	to { opacity: 0; }
}
@keyframes igm-breeze {
	to { transform: translate3d(100%, 0, 0); }
}
/* 頁首：只淡入、不位移（頁首內有固定定位的手機選單，加 transform 會讓選單錯位，不要改）
   填充模式只能用 backwards：用 both 的話動畫結束後頁首仍是獨立圖層，下拉選單會被首屏蓋住 */
:root.igm-on #brx-header {
	animation: igm-fade-in .7s ease backwards;
}
@keyframes igm-fade-in {
	from { opacity: 0; }
}

/* 4. hover：只在有滑鼠的裝置 */
.igm-clip {
	overflow: hidden;                 /* 不要改：讓網站原本的圖片放大效果不再蓋到旁邊的內容 */
}
@media (hover: hover) and (pointer: fine) {
	/* 有底色或框線的卡片：浮起＋冰藍冷光 */
	.igm-lift {
		transition: transform .45s var(--igm-ease), box-shadow .45s var(--igm-ease);
	}
	.igm-lift:hover {
		transform: translate3d(0, -6px, 0);
		box-shadow:
			0 0 0 1px rgba(var(--igm-ice), .28),
			0 18px 36px -16px rgba(var(--igm-navy), .38),
			0 0 34px -10px rgba(var(--igm-ice), .35);
	}
	/* 透明底的卡片：只浮起、不加陰影（透明框加陰影會像多出一個空框） */
	.igm-lift-soft {
		transition: transform .45s var(--igm-ease);
	}
	.igm-lift-soft:hover {
		transform: translate3d(0, -5px, 0);
	}
	/* 手風琴類：不浮起，只亮框（位移會干擾點擊展開） */
	.igm-glow {
		transition: box-shadow .35s var(--igm-ease);
	}
	.igm-glow:hover {
		box-shadow:
			0 0 0 1px rgba(var(--igm-ice), .35),
			0 12px 26px -16px rgba(var(--igm-navy), .3);
	}
	/* 圖片（外框剛好包住圖）：微放大＋提亮 */
	.igm-zoom img {
		transition: transform .8s var(--igm-ease), filter .8s var(--igm-ease);
	}
	.igm-zoom:hover img {
		transform: scale(1.05);
		filter: brightness(1.04) saturate(1.06);
	}
	/* 圖片（旁邊疊著標籤等元素）：不移動，只提亮＋冰藍光暈 */
	.igm-img-glow {
		transition: filter .5s var(--igm-ease), box-shadow .5s var(--igm-ease);
	}
	.igm-img-glow:hover {
		filter: brightness(1.05) saturate(1.08);
		box-shadow: 0 0 0 1px rgba(var(--igm-ice), .3), 0 16px 34px -18px rgba(var(--igm-navy), .45);
	}
	/* 圖片：一道冷光掃過（跟網站按鈕的光澤效果同一個語彙） */
	.igm-sheen::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
		transform: translate3d(-130%, 0, 0);
		transition: transform .9s var(--igm-ease);
	}
	.igm-sheen:hover::after {
		transform: translate3d(130%, 0, 0);
	}
}

/* 5. 手機：沒有 hover，改給按壓回饋 */
@media (hover: none) {
	.igm-press {
		-webkit-tap-highlight-color: transparent;
	}
	.igm-press:active {
		transform: scale(.98);
		transition: transform .15s ease;
	}
}

/* 6. 使用者在系統設定「減少動態效果」：全部關閉（JS 也會直接不啟動） */
@media (prefers-reduced-motion: reduce) {
	:root.igm-on .igm,
	:root.igm-on .igm img,
	:root.igm-on .igm-lines .igm-line-in {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	:root.igm-on #brx-header {
		animation: none !important;
	}
	.igm-mist {
		display: none;
	}
}