/* ==========================================================================
   全站動態：頁面切換、選單底線（全站）；內頁的銀河背景、標題區進場、玻璃卡片、
   捲動聚焦、閱讀區動畫（搭配 assets/js/inner-fx.js；首頁的版本在 galaxy.css / home-fx.js）
   ========================================================================== */

/* ---------- 頁面切換：舊頁淡出、新頁浮上；頁首固定不動 ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .26s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- 選單：滑過時底線從左畫出 ---------- */
@media (min-width: 1081px) {
	.site-nav ul a { position: relative; }
	.site-nav ul a::after {
		content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; pointer-events: none;
		background: linear-gradient(90deg, #9fd8ff, #fff); box-shadow: 0 0 8px rgba(159, 216, 255, .8);
		transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
	}
	.site-nav ul a:hover::after { transform: scaleX(1); transform-origin: left; }
	.site-nav ul a:hover { background: rgba(255, 255, 255, .06); }
}

/* ---------- 銀河背景（內頁）：canvas 在所有內容後面，有底色的區塊自然蓋住它 ---------- */
.galaxy--inner { z-index: -1; }
html.has-galaxy body.is-night::before { display: none; }
html.has-galaxy .page-hero {
	background:
		radial-gradient(620px circle at var(--px, 78%) var(--py, 18%), rgba(159, 216, 255, .09), transparent 60%);
}
html.has-galaxy .page-hero::before { opacity: .22; }
.page-hero :is(h1, .lead, .breadcrumbs) { text-shadow: 0 2px 24px rgba(2, 4, 11, .85), 0 0 2px rgba(2, 4, 11, .6); }
.page-hero h1 { text-shadow: 0 2px 24px rgba(2, 4, 11, .85), 0 0 40px rgba(159, 216, 255, .2); }
@media (max-width: 760px) {
	html.has-galaxy .page-hero > .wrap { background: radial-gradient(130% 80% at 30% 55%, rgba(2, 4, 10, .62), rgba(2, 4, 10, 0) 72%); }
}

/* 長文頁：標題區之後的紙白區塊要有底色，蓋住後面的光絲 */
.is-reading main > .section:not(.section--white):not(.section--dark), .is-reading main.section { background-color: var(--bg); }

/* 展示型頁面：區塊半透明，看得到後面的光絲 */
html.has-galaxy .is-night .section--white { background: linear-gradient(180deg, rgba(10, 16, 32, 0), rgba(10, 16, 32, .5) 18%, rgba(10, 16, 32, .5) 82%, rgba(10, 16, 32, 0)); }
html.has-galaxy .is-night .section--dark { background: radial-gradient(45% 55% at 84% 50%, rgba(159, 216, 255, .06), transparent 70%), rgba(2, 4, 11, .32); }
html.has-galaxy .is-night .cta-band { background: transparent; }
html.has-galaxy .is-night .cta-band::before { display: none; }
html.has-galaxy .is-night .site-footer { background: rgba(2, 4, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.is-night .section :is(h2, .lead), .is-night .section-head p { text-shadow: 0 2px 24px rgba(2, 4, 11, .85), 0 0 2px rgba(2, 4, 11, .6); }
.is-night :is(.form-card, .tool-ui) :is(h2, h3, .lead, p) { text-shadow: none; }

/* ---------- 標題區進場 ---------- */
@keyframes fx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fx-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-show { to { opacity: 1; } }
@keyframes fx-char { to { opacity: 1; transform: none; filter: blur(0); } }
.page-hero .breadcrumbs { animation: fx-up .8s var(--ease) .05s both; }
.page-hero .kicker { animation: fx-up .8s var(--ease) .15s both; }
.page-hero .kicker::before { transform-origin: left; animation: fx-line 1s var(--ease) .25s both; }
.js .page-hero h1:not(.is-ready) { opacity: 0; animation: fx-show 0s 2.5s forwards; }
.page-hero h1.fx-split { perspective: 600px; }
.page-hero h1 .c {
	opacity: 0; transform: translateY(.55em) rotateX(-70deg); filter: blur(10px);
	animation: fx-char 1.1s var(--ease) forwards; animation-delay: calc(.3s + min(var(--i), 40) * 30ms);
}
.page-hero h1 em { font-style: normal; }
.page-hero h1 em .c {
	color: transparent;
	background: linear-gradient(90deg, #fff, #9fd8ff 45%, #b9a8ff) 0 0 / calc(var(--en) * 100%) 100%;
	background-position: calc(var(--e) / (var(--en) - 1) * 100%) 0;
	-webkit-background-clip: text; background-clip: text;
}
.page-hero .lead { animation: fx-up 1s var(--ease) .8s both; }
.page-hero .wrap > :not(nav):not(.kicker):not(h1):not(.lead) { animation: fx-up 1s var(--ease) 1s both; }
.fx-split .cl { display: inline-block; max-width: 100%; }
.fx-split .w { display: inline-block; white-space: nowrap; }
.fx-split .c { display: inline-block; }

/* 404：數字描邊畫出，文字依序浮上 */
.error-hero .wrap > * { animation: fx-up .9s var(--ease) both; }
.error-hero .wrap > :nth-child(2) { animation-delay: .25s; }
.error-hero .wrap > :nth-child(3) { animation-delay: .4s; }
.error-hero .wrap > :nth-child(n+4) { animation-delay: .55s; }
.error-hero .display { -webkit-text-stroke-color: rgba(205, 230, 255, .7); filter: drop-shadow(0 0 30px rgba(159, 216, 255, .35)); }

/* 捲動：文字往下沉、淡出；浮水印反向移動 */
.page-hero > .wrap { transform: translate3d(0, calc(var(--sp, 0) * 70px), 0); opacity: calc(1 - var(--sp, 0) * .75); }
.page-hero__word { transform: translate3d(calc(var(--sp, 0) * -120px + var(--hx, 0) * -14px), calc(var(--sp, 0) * 50px), 0); }
.page-hero__word.is-svg { line-height: 0; }
.page-hero__word svg { display: block; height: clamp(96px, 18vw, 280px); width: auto; overflow: visible; }
.page-hero__word text {
	font-family: var(--f-display); font-weight: 700; font-size: 250px;
	fill: rgba(159, 216, 255, 0); stroke: rgba(205, 230, 255, .55); stroke-width: 1.2;
	stroke-dasharray: 1500; stroke-dashoffset: 1500;
	animation: phw-draw 2.6s cubic-bezier(.45, .05, .2, 1) .3s forwards, phw-settle 1.8s var(--ease) 2.2s forwards;
}
@keyframes phw-draw { to { stroke-dashoffset: 0; } }
@keyframes phw-settle { to { stroke: rgba(159, 216, 255, .2); fill: rgba(159, 216, 255, .045); } }

/* 主要按鈕：光澤掃過；磁吸位移平順 */
:is(.page-hero, .cta-band, .error-hero) .btn { transition: translate .35s var(--ease), transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s; }
:is(.page-hero, .cta-band) .btn--accent { position: relative; overflow: hidden; isolation: isolate; }
:is(.page-hero, .cta-band) .btn--accent::after {
	content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%);
	transform: translateX(-120%); animation: btn-shine 5s ease-in-out 2.2s infinite;
}

/* ---------- 段落標題逐字浮起、小標題畫線 ---------- */
.fx-rise .c { transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); transition-delay: calc(.08s + min(var(--i), 30) * 26ms); }
.fx-rise.fx-pre .c { opacity: 0; transform: translateY(.6em) rotate(5deg); filter: blur(6px); }
.kicker { transition: clip-path 1s var(--ease) .1s, opacity .6s var(--ease); }
.kicker::before { transform-origin: left; transition: transform .8s var(--ease); }
.kicker.fx-pre { clip-path: inset(0 100% 0 0); opacity: 0; }
.kicker.fx-pre::before { transform: scaleX(0); }

/* ---------- 清單、格線：依序浮現 ---------- */
.fx-stagger.fx-pre > :not([data-reveal]) { opacity: 0; transform: translateY(22px); }
.fx-stagger.fx-go > :not([data-reveal]) { transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path 1.1s var(--ease); transition-delay: calc(min(var(--k, 0), 14) * 70ms); }
.fx-stagger--clip.fx-pre > * { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 14px); }
.fx-stagger--clip.fx-go > * { clip-path: inset(0 0 0 0 round 14px); }

/* ---------- 深色頁的卡片：液態玻璃，邊框高光跟著指標 ---------- */
html.has-galaxy .is-night :is(.feature, .course, .tool-card:not(.is-soon), .stat, .author-box, .post-nav a) {
	border: 1px solid transparent;
	background:
		radial-gradient(420px circle at var(--mx, 22%) var(--my, 0%), rgba(200, 230, 255, .09), transparent 50%) padding-box,
		linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 50%, rgba(160, 200, 255, .05)) padding-box,
		linear-gradient(rgba(6, 10, 24, .64), rgba(6, 10, 24, .64)) padding-box,
		radial-gradient(380px circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .6), rgba(255, 255, 255, .1) 40%, rgba(159, 216, 255, .18) 70%, rgba(255, 255, 255, .22)) border-box;
	-webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 70px -34px rgba(0, 0, 0, .85);
}
html.has-galaxy .is-night :is(.feature, .course, .tool-card:not(.is-soon), .stat, .author-box, .post-nav a):hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 26px 60px -24px rgba(140, 195, 255, .38);
}
.is-night .stats { gap: 14px; background: none; border: 0; overflow: visible; }
.is-night .stat { border-radius: 20px; }
.stat__value { filter: drop-shadow(0 0 18px rgba(159, 216, 255, .25)); }
.stat__value, .case-cover__metric, .case-metrics b, .ch-stat b { font-variant-numeric: tabular-nums; }
.feature__icon { transition: transform .5s var(--ease), box-shadow .5s; }
.feature:hover .feature__icon { transform: translateY(-3px) rotate(-6deg); box-shadow: inset 0 0 0 1px rgba(159, 216, 255, .5), 0 0 22px -4px rgba(159, 216, 255, .7); }

/* 小卡片傾斜 */
:is(.feature, .tool-card, .stat, .ch-stat).is-tilt {
	transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}

/* 作品卡：封面上有跟著指標的光 */
.case-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(210, 235, 255, .16), transparent 50%);
	opacity: 0; transition: opacity .4s;
}
.case-card:hover::after { opacity: 1; }

/* CTA：玻璃面板＋指標高光（首頁的版本在 galaxy.css） */
body:not(.is-galaxy) .cta-band .wrap { isolation: isolate; }
html.has-galaxy body.is-night .cta-band .wrap {
	background: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 45%, rgba(160, 200, 255, .07)), rgba(6, 10, 24, .5);
	-webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
}
html.lg-refract.has-galaxy body.is-night .cta-band .wrap {
	-webkit-backdrop-filter: url(#lg-refract) blur(14px) saturate(140%);
	backdrop-filter: url(#lg-refract) blur(14px) saturate(140%);
}
body:not(.is-galaxy) .cta-band .wrap::before {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 25%) var(--my, 0%), rgba(255, 255, 255, .8), rgba(255, 255, 255, .1) 40%, rgba(159, 216, 255, .2) 70%, rgba(255, 255, 255, .32));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
body:not(.is-galaxy) .cta-band .wrap::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: radial-gradient(520px circle at var(--mx, 25%) var(--my, 0%), rgba(200, 230, 255, .12), transparent 45%);
}

/* ---------- 課程：捲到中央的那堂亮起 ---------- */
.fx-focus .course { transition: opacity .6s var(--ease), box-shadow .5s, transform .6s var(--ease); }
.fx-focus.has-active .course:not(.is-active) { opacity: .45; }
.course__no { transition: filter .5s, transform .6s var(--ease); transform-origin: left bottom; }
.fx-focus .course.is-active .course__no { filter: drop-shadow(0 0 18px rgba(159, 216, 255, .55)); transform: scale(1.08); }
html.has-galaxy .is-night .fx-focus .course.is-active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 80px -30px rgba(140, 195, 255, .45); }
.course__meta li { transition: background .3s, color .3s; }
.course.is-active .course__meta li { background: rgba(159, 216, 255, .16); }

/* ---------- 經歷時間軸：光線往下延伸、經過的節點亮起 ---------- */
.fx-tl::after {
	content: ""; position: absolute; left: 7px; top: 8px; width: 1px; height: calc((100% - 16px) * var(--tp, 0)); pointer-events: none;
	background: linear-gradient(180deg, rgba(159, 216, 255, .2), #9fd8ff 70%, #fff);
	box-shadow: 0 0 10px rgba(159, 216, 255, .8);
}
.fx-tl .timeline__item { transition: opacity .6s var(--ease); }
.fx-tl .timeline__item:not(.is-lit) { opacity: .5; }
.fx-tl .timeline__item::before { transition: background .4s, border-color .4s, box-shadow .4s; }
.fx-tl .timeline__item.is-lit::before { background: #9fd8ff; border-color: #9fd8ff; box-shadow: 0 0 0 5px rgba(159, 216, 255, .14), 0 0 16px rgba(159, 216, 255, .7); }

/* ---------- 照片：滑過時微微放大、浮起 ---------- */
.life-grid__item img, .life-grid__item video { transition: transform 1.2s var(--ease), filter .6s; }
.life-grid__item:hover img, .life-grid__item:hover video { transform: scale(1.06); }
.class-photos img { transition: transform .6s var(--ease), box-shadow .6s; }
.class-photos figure:hover img { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(159, 216, 255, .45); }

/* ---------- 常見問題：展開收合有動畫（支援的瀏覽器） ---------- */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .45s var(--ease), opacity .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { height: auto; opacity: 1; }
.faq summary { transition: color .25s; }
.faq summary:hover { color: var(--accent); }

/* ---------- 表單：聚焦時柔光 ---------- */
.form-card :is(input, select, textarea):focus-visible { border-color: var(--steel); box-shadow: 0 0 0 4px rgba(159, 216, 255, .45); outline: none; }

/* ---------- 閱讀區：段落浮現、重點螢光筆刷過、小標題色條伸長 ---------- */
.prose > * { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.prose > .fx-pre { opacity: 0; transform: translateY(22px); }
.prose strong, .prose mark { background-repeat: no-repeat; background-size: 100% 100%; transition: background-size 1.1s var(--ease) .35s; }
.prose > :is(.fx-pre, .fx-hl) :is(strong, mark) { background-size: 0% 100%; transition: none; }
.prose h2::before { transform-origin: left; transition: transform 1s var(--ease) .25s; }
.prose h2.fx-pre::before { transform: scaleX(0); }
.prose figure img, .prose .wp-block-image img { transition: transform 1.4s var(--ease); }
.prose > .fx-pre :is(img) { transform: scale(1.04); }

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.page-hero :is(.breadcrumbs, .kicker, .lead), .page-hero .kicker::before, .page-hero .wrap > *, .page-hero__word text, .error-hero .wrap > * { animation: none; }
	.page-hero__word text { stroke-dashoffset: 0; }
	.page-hero > .wrap, .page-hero__word { transform: none; opacity: 1; }
	:is(.page-hero, .cta-band) .btn--accent::after { animation: none; display: none; }
	.faq details::details-content { transition: none; }
}