/* ==========================================================================
   Copyright (c) 2026 Kohaku Creative Studio. All rights reserved.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities, motion;
@view-transition { navigation: auto; }

/* ─── TOKENS ─────────────────────────────────────────────────────────────── */
@layer tokens {
	:root {
		/* Color primitives */
		--c-gray-050: #f4f4f4;
		--c-gray-500: #7f7f7f;
		--c-gray-900: #0a0a0a;
		--c-orange-500: #FF5511;

		/* Color semantic */
		--bg: var(--c-gray-050);
		--ink: var(--c-gray-900);
		--ink-muted: var(--c-gray-500);
		--accent: var(--c-orange-500);
		--overlay-bg: color-mix(in srgb, var(--c-gray-900) 93%, transparent);

		/* Derived tints */
		--c-border:        color-mix(in srgb, var(--ink-muted) 40%, transparent);
		--c-border-strong: color-mix(in srgb, var(--ink-muted) 60%, transparent);
		--c-surface:       color-mix(in srgb, var(--ink-muted) 20%, var(--bg));

		/* Typography */
		--serif: 'EB Garamond', 'Noto Serif TC', serif;
		--sans: 'PingFang HK', 'PingFang TC', 'Microsoft JhengHei UI', 'Segoe UI', sans-serif;
		--mono: 'Sometype Mono', monospace;

		--p: 1rem;
		--lh: 1.5rem;
		--fs-s: calc(var(--p) * 0.75);
		--fs-xl: calc(var(--p) * 2);
		--fs-2xl: calc(var(--p) * 3);
		--fs-display: clamp(calc(var(--p) * 2), 6vw, var(--fs-2xl));

		--tracking-tight: -0.02em;
		--tracking-wide: 0.05em;

		/* Sizing / lengths */
		--len-dot: 8px;
		--len-cursor-hover: 4rem;
		--len-hairline: 1.5px;
		--len-border: 1px;
		--len-logo-h: 20px;
		--len-logo-w: 107px;
		--len-burger: 24px;
		--len-burger-lottie: 32px;

		--len-shift-sm: 12px;
		--len-shift-md: 20px;
		--len-shift-lg: 24px;
		--len-shift-xl: 32px;
		--len-slide-shift: 30px;

		--ratio-square: 1 / 1;
		--ratio-portrait: 3 / 4;
		--ratio-landscape: 4 / 3;
		--ratio-photo: 3 / 2;
		--measure: calc((100vw - 13 * var(--gap)) / 12 * 5 + 4 * var(--gap));

		/* Grid */
		--cols: 12;
		--cols-studio: 7;
		--cols-person: 5;
		--gap: 1rem;
		--nav-h: 64px;

		/* Spacing */
		--sp-xs: calc(var(--p) * .25);
		--sp-sm: calc(var(--p) * .5);
		--sp-md: calc(var(--p) * 1.25);
		--sp-lg: calc(var(--p) * 2);
		--sp-xl: calc(var(--p) * 3);
		--sp-2xl: calc(var(--p) * 6);
		--sp-3xl: calc(var(--p) * 12);

		/* Z-index */
		--z-gallery-nav: 20;
		--z-gallery-counter: 100;
		--z-nav-menu: 200;
		--z-nav-burger: 250;
		--z-nav-logo: 251;
		--z-nav: 999;
		--z-gallery-lift: 2000;
		--z-gallery-expanded: 9999;
		--z-cursor: 10000;

		/* Easing */
		--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
		--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
		--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

		/* Duration scale */
		--dur-track: .06s;
		--dur-1: .12s;
		--dur-2: .2s;
		--dur-3: .6s;
		--dur-4: .5s;
		--dur-5: .75s;
		--dur-6: 1.1s;

		--stagger: 0.05s;
		--stagger-lg: 0.08s;
		--delay-text: 0.1s;
		--delay-menu: 0.12s;
		--delay-hero-1: 0.15s;
		--delay-hero-2: 0.3s;

		/* Composite transitions */
		--t-color: color var(--dur-2) ease;
		--t-underline: width var(--dur-4) var(--ease-out-expo);
		--t-reveal:
			opacity var(--dur-6) var(--ease-out-expo),
			transform var(--dur-6) var(--ease-out-expo);
		--t-slide:
			opacity var(--dur-4) var(--ease-in-out),
			transform var(--dur-5) var(--ease-out-expo);
		--t-cursor:
			width var(--dur-2) var(--ease-out-expo),
			height var(--dur-2) var(--ease-out-expo),
			background-color var(--dur-2) var(--ease-in-out),
			border-color var(--dur-2) var(--ease-in-out),
			opacity var(--dur-2) ease;
		--t-menu-link:
			opacity var(--dur-1) ease,
			transform var(--dur-1) ease;
		--t-menu-closed:
			clip-path var(--dur-4) var(--ease-in-out) var(--dur-1),
			opacity var(--dur-2) ease var(--dur-1);
		--t-menu-open:
			clip-path var(--dur-4) var(--ease-out-expo),
			opacity var(--dur-3) ease;
	}

	/* 防禦性設計：預留導覽列空間，防止未來樣式更動產生的跳動 */
	#nav-placeholder {
		min-height: var(--nav-h);
	}
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
@layer base {
	html {
		background: var(--bg);
		color: var(--ink);
		font-size: var(--p);
		line-height: var(--lh);
		scroll-behavior: smooth;
	}

	html::-webkit-scrollbar { display: none; }

	body {
		font-family: var(--sans);
		font-size: var(--p);
		line-height: var(--lh);
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	body::-webkit-scrollbar { display: none; }

	/* 標籤只設「合理預設」，角色外觀交給 .t-* preset */
	h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

	a { color: inherit; text-decoration: none; }

	a, button, [role="button"], input, textarea, select { cursor: auto; }

	/* 防盜圖（嚇阻層）：禁拖曳另存／iOS 長按選單／選取 */
	img {
		-webkit-user-drag: none;
		user-select: none;
		-webkit-touch-callout: none;
	}

	@keyframes page-enter {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@media (hover: hover) and (pointer: fine) {
		/* 自訂游標啟用時，隱藏原生游標／pointer（含連結、按鈕、cursor: pointer 等） */
		body.has-custom-cursor,
		body.has-custom-cursor * { cursor: none !important; }
	}
	
	/* Block: cursor */
	.cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: var(--len-dot);
		height: var(--len-dot);
		background-color: var(--accent);
		border-radius: 50%;
		border: var(--len-hairline) solid transparent;
		z-index: var(--z-cursor);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--mono);
		font-size: 0;
		color: var(--accent);
		white-space: nowrap;
		will-change: transform;
		transition: var(--t-cursor);
		opacity: 0;
		view-transition-name: custom-cursor;
		pointer-events: none;
		user-select: none;
	}

	.cursor.is-visible { opacity: 1; }

		.cursor.is-hovering {
		width: var(--len-cursor-hover);
		height: var(--len-cursor-hover);
		background-color: rgba(255, 255, 255, 0.10);
		color: var(--accent);
		font-size: var(--fs-xl);
		border-color: transparent;

		/* Chromium：模糊 + 液態位移；Safari 只吃到 blur，退回普通玻璃 */
		backdrop-filter: blur(2px) url(#liquid_glass_filter);
		-webkit-backdrop-filter: blur(2px);

		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.45),
			inset 0 -1px 0 rgba(255, 255, 255, 0.18),
			inset 4px 4px 12px rgba(255, 255, 255, 0.12),
			0 6px 18px rgba(0, 0, 0, 0.35);
		}

	@media (hover: none), (pointer: coarse) {
		.cursor { display: none; }

		html,
		a, button, [role="button"], input, textarea, select { cursor: auto; }
	}
}

/* ─── LAYOUT ─────────────────────────────────────────────────────────────── */
@layer layout {
	.grid {
		display: grid;
		grid-template-columns: repeat(var(--cols), 1fr);
		gap: var(--gap);
	}

	.page__wrap {
		padding: var(--sp-3xl) var(--gap) 0;
		animation: page-enter var(--dur-4) var(--ease-out-quart) both;
		view-transition-name: page-main-content;
	}

	.page__content {
		align-items: start;
		row-gap: 0;
	}

	footer {
		padding: var(--sp-2xl) var(--p) var(--p);
		grid-column: span var(--cols);
	}
}

/* ─── COMPONENTS（只管定位/結構/動態） ───────────────────────────────────── */
@layer components {

	/* ── hero ── */
	.hero {
		padding-bottom: var(--sp-xl);
		align-items: end;
	}

	.hero__meta { --stack-gap: var(--sp-sm); }

	.hero__dot {
		display: inline-block;
		width: var(--len-dot);
		height: var(--len-dot);
		background-color: var(--accent);
		border-radius: 50%;
		margin-right: var(--len-dot);
		animation: pulse 2.5s ease-in-out infinite;
	}

	.hero__title-col,
	.hero__meta-col {
		opacity: 0;
		transform: translateY(var(--len-shift-lg));
		animation: hero-up var(--dur-6) var(--ease-out-expo) forwards;
	}

	.hero__title-col { animation-delay: var(--delay-hero-1); }
	.hero__meta-col  { animation-delay: var(--delay-hero-2); }

	@keyframes hero-up {
		to { opacity: 1; transform: translateY(0); }
	}

	@keyframes pulse {
		0%, 100% { opacity: 1; transform: scale(1); }
		50%      { opacity: 0.35; transform: scale(0.85); }
	}

	/* ── studio / team / person ── */
	.studio {
		display: grid;
		grid-template-columns: repeat(var(--cols-studio), 1fr);
		gap: var(--gap);
		row-gap: 0;
		align-items: start;
	}

	.studio__contact a {
		display: inline-block;
		margin-bottom: var(--sp-md);
	}

	.studio__socials {
		display: flex;
		gap: calc(var(--gap) * 2);
	}

	.person {
		margin-bottom: var(--sp-xl);
		display: grid;
		grid-template-columns: repeat(var(--cols-person), 1fr);
		gap: var(--gap);
		row-gap: 0;
	}

	.person:last-child { margin-bottom: 0; }

	.person__role { margin: var(--sp-xs) 0 var(--sp-md); }
	.person__bio { --prose-gap: calc(var(--p) * .75); }

	@media (max-width: 799px) {
		.page__content { grid-template-columns: 1fr; }

		.studio {
			grid-column: 1;
			grid-template-columns: 1fr;
		}
		.studio > * { grid-column: 1; }

		.team {
			grid-column: 1;
			padding-top: var(--sp-lg);
		}

		.person { grid-template-columns: 1fr 1fr; }
		.person > .col-2 { grid-column: span 1; }
		.person > .col-1 { display: none; }
		.person__bio { grid-column: 1 / -1; }
	}

	/* ── nav ── */
	nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--nav-h);
		padding: 0 var(--gap);
		z-index: var(--z-nav);
		background: transparent;
		mix-blend-mode: difference;
		display: grid;
		grid-template-columns: repeat(var(--cols), 1fr);
		gap: var(--gap);
		align-items: center;
		view-transition-name: main-navigation; /* 導覽列保持固定 */
	}

	.nav__logo {
		grid-column: span 4;
		justify-self: start;
		width: var(--len-logo-w);
		height: var(--len-logo-h);
		aspect-ratio: 107 / 20;
		display: block;
	}

	.nav__home   { grid-column: span 3; justify-self: start; }
	.nav__info   { grid-column: span 2; justify-self: start; }
	.nav__ig     { grid-column: span 1; justify-self: start; }
	.nav__fb     { grid-column: span 1; justify-self: start; }
	.nav__more   { grid-column: span 1; justify-self: end; }

	.nav__toggle,
	.nav__menu-wrap { display: none; }

	.nav__logo path { fill: var(--bg); }

	nav.grid.is-open,
	nav.grid.is-closing {
		mix-blend-mode: normal;
		background: var(--bg);
	}

	nav.grid.is-open .nav__logo path,
	nav.grid.is-closing .nav__logo path { fill: var(--ink); }

	nav.grid.is-open .nav__toggle,
	nav.grid.is-closing .nav__toggle { color: var(--ink); }

	@media (max-width: 799px) {

		nav.grid .nav__logo {
			grid-area: logo;
			z-index: var(--z-nav-logo);
		}

		nav.grid .nav__toggle {
			display: flex !important;
			align-items: center;
			justify-content: center;
			grid-area: toggle;
			position: relative;
			width: var(--len-burger);
			height: var(--len-burger);
			background: none;
			border: none;
			padding: 0;
			z-index: var(--z-nav-burger);
			color: var(--bg);
		}

		#lottie-burger path {
			fill: currentColor !important;
			stroke: currentColor !important;
		}

		nav.grid .nav__menu-wrap {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: var(--nav-h);
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--bg);
			padding: var(--gap);
			clip-path: inset(0 0 100% 0);
			opacity: 0;
			pointer-events: none;
			z-index: var(--z-nav-menu);
			transition: var(--t-menu-closed);
		}

		nav.grid.is-open .nav__menu-wrap {
			clip-path: inset(0 0 0% 0);
			opacity: 1;
			pointer-events: auto;
			transition: var(--t-menu-open);
		}

		.nav__mobile-links {
			--count: 5;
			margin-top: var(--sp-xl);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
		}

		.nav__mobile-links a {
			display: block;
			width: 100%;
			font-family: var(--mono);
			font-size: var(--p);
			color: var(--ink);
			padding-bottom: var(--sp-xs);
			border-bottom: var(--len-border) solid var(--ink);
			margin-bottom: var(--p);
			text-decoration: none;
			letter-spacing: var(--tracking-wide);
			opacity: 0;
			transform: translateY(var(--len-shift-sm));
			transition: var(--t-menu-link);
		}
		
		#lottie-burger {
			width: var(--len-burger-lottie);
			height: var(--len-burger-lottie);
			max-width: var(--len-burger-lottie);
			max-height: var(--len-burger-lottie);
			opacity: 0;
			transition: opacity var(--dur-2) ease;
			overflow: hidden;
		}
		#lottie-burger svg {
			display: block;
			width: 100% !important;
			height: 100% !important;
		}

		.nav__mobile-links a::after { display: none; }
		.nav__mobile-links a:nth-child(1) { --i: 0; }
		.nav__mobile-links a:nth-child(2) { --i: 1; }
		.nav__mobile-links a:nth-child(3) { --i: 2; }
		.nav__mobile-links a:nth-child(4) { --i: 3; }
		.nav__mobile-links a:nth-child(5) { --i: 4; }
		nav.grid .nav__mobile-links a {
			transition-delay: calc((var(--count, 3) - 1 - var(--i, 0)) * var(--stagger));
		}

		nav.grid.is-open .nav__mobile-links a {
			opacity: 1;
			transform: translateY(0);
			transition:
				opacity var(--dur-3) ease calc(var(--delay-menu) + var(--i, 0) * var(--stagger-lg)),
				transform var(--dur-3) var(--ease-out-expo) calc(var(--delay-menu) + var(--i, 0) * var(--stagger-lg));
		}
	}

	/* ── project ── */
	.projects {
		padding: var(--sp-xl) 0 var(--sp-2xl);
	}

	.project {
		display: grid;
		grid-template-columns: repeat(var(--cols), 1fr);
		gap: var(--gap);
		align-items: center;
		padding: var(--sp-xl) 0;
		position: relative;
	}

	.project:first-child { padding-top: 0; }

	.project--reverse .project__text { order: -1; }
	.project--reverse .project__img  { order: 1; }

	.project__img {
		background: var(--c-surface);
		position: relative;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		pointer-events: auto;
	}

	.project__index {
		color: var(--ink);
		mix-blend-mode: difference;
		letter-spacing: var(--tracking-wide);
	}

	.project__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		--stack-gap: var(--sp-lg);
	}

	.project__text .link {
		display: inline-block;
		padding-bottom: var(--sp-xs);
	}

	/* 詳情頁文字欄：No.↔Year 一行、Chips↔Share/Slideshow 一行 */
	.project__meta-top {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.project__cats-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--sp-md);
	}
	/* Back to top：detail 之後，樣式同「← Works」 */
	.detail__top { margin-top: var(--sp-2xl); }

	@media (max-width: 799px) {
		.project { gap: var(--sp-md); }
		.project--reverse .project__img  { order: 0; }
		.project--reverse .project__text { order: 0; }
		.project .project__img {
			width: 100%;
		}
	}

	/* ── chip ── */
	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-sm);
		margin: 0;
	}

	.chip {
		font-family: var(--mono);
		font-size: var(--fs-s);
		letter-spacing: var(--tracking-wide);
		border: var(--len-border) solid var(--c-border-strong);
		padding: 0.15em 0.5em;
		color: var(--ink-muted);
		text-transform: uppercase;
		transition:
			border-color var(--dur-2) ease,
			color var(--dur-2) ease;
	}

	.chip:hover {
		border-color: var(--ink);
		color: var(--ink);
	}

	/* 標籤群＋標籤項目：works 列表分類與詳情頁 Chips／Share／Slideshow 共用 */
	.taglist,
	.project__actions {
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: var(--sp-xs);
	}
	/* 分類（Work／Works）置左；Share／Slideshow 靠右 */
	.taglist { align-items: flex-start; text-align: left; }
	.project__actions { align-items: flex-end; text-align: right; }
	.tag {
		color: var(--ink);
	}
	.action-tag {
		color: var(--ink-muted);
	}
	.tag,
	.action-tag {
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
		font-family: var(--mono);
		font-size: var(--fs-s);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		transition: var(--t-color);
	}
	.action-tag:hover { color: var(--ink); }

	/* ── gallery ── */
	.gallery__slides {
		position: absolute;
		inset: 0;
		transition: transform var(--dur-track) linear;
	}

	.gallery__slide {
		--tx: 0px;
		position: absolute;
		inset: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		background-color: var(--c-surface); /* 載入前的底色 */
		transform: translateX(var(--tx));
		will-change: transform, opacity;
		/* 讓 opacity 的變化更有質感 */
		transition: var(--t-slide), filter var(--dur-3) ease, visibility 0s var(--dur-4);
	}

	/* 圖片比容器大一圈，保留探索式視差的位移空間（取代原本 background-size 110%） */
	.gallery__img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 110%;
		height: 110%;
		transform: translate(-50%, -50%);
		object-fit: cover;
		object-position: 50% 50%;
		-webkit-user-drag: none;
		user-select: none;
		pointer-events: none;
	}

	.gallery__slide.is-from-right { --tx: var(--len-slide-shift); }
	.gallery__slide.is-from-left  { --tx: calc(var(--len-slide-shift) * -1); }
	
	/* 只有當圖片 active 且載入判定完成後才顯示 */
	.gallery__slide.is-active.is-ready { 
		--tx: 0px; 
		opacity: 1; 
		visibility: visible;
		transition: var(--t-slide), filter var(--dur-3) ease, visibility 0s;
	}

	.gallery__counter {
		position: absolute;
		top: var(--sp-sm);
		left: var(--sp-sm);
		z-index: var(--z-gallery-counter);
		color: var(--bg);
		mix-blend-mode: difference;
		pointer-events: none;
		letter-spacing: var(--tracking-wide);
		opacity: 0.7;
		transition: opacity var(--dur-2) ease;
	}

	.project__img:hover .gallery__counter { opacity: 1; }

	.gallery__nav {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		z-index: var(--z-gallery-nav);
	}

	.gallery__nav > div {
		height: 100%;
	}

	.gallery:has(.gallery__nav > div:hover) .gallery__slide {
		filter: brightness(0.88);
	}

	.overlay {
		position: fixed;
		inset: 0;
		z-index: var(--z-gallery-expanded);
		display: grid;
		place-items: center;
		background: var(--overlay-bg);
		animation: overlay-in var(--dur-3) var(--ease-out-quart) both;
		transition: opacity var(--dur-2) ease;
	}

	.overlay.is-closing { opacity: 0; }

	.overlay__stage {
		--ratio: var(--ratio-landscape);
		position: relative;
		width: min(90vw, calc(90vh * var(--ratio)));
		aspect-ratio: var(--ratio);
		will-change: aspect-ratio; /* 提醒瀏覽器此處比例會變動 */
		transition: aspect-ratio var(--dur-2) var(--ease-out-expo);
	}
	.overlay__stage.is-portrait { --ratio: var(--ratio-portrait); }
	.overlay__stage.is-square { --ratio: var(--ratio-square); }

	.overlay__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity var(--dur-3) ease;
	}

	.overlay__img.is-active { opacity: 1; }

	.overlay__counter {
		position: absolute;
		inset: 0 0 auto 0;
		height: var(--nav-h);
		display: grid;
		place-items: center;
		color: var(--bg);
		mix-blend-mode: difference;
		pointer-events: none;
		user-select: none;
		z-index: 2;
	}

	@keyframes overlay-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

/* ─── UTILITIES ──────────────────────────────────────────────────────────── */
@layer utilities {
	/* Grid columns */
	.col-1 { grid-column: span 1; }
	.col-2 { grid-column: span 2; }
	.col-3 { grid-column: span 3; }
	.col-4 { grid-column: span 4; }
	.col-5 { grid-column: span 5; }
	.col-6 { grid-column: span 6; }
	.col-7 { grid-column: span 7; }
	.col-8 { grid-column: span 8; }
	.col-9 { grid-column: span 9; }
	.col-10 { grid-column: span 10; }
	.col-11 { grid-column: span 11; }
	.col-12 { grid-column: span 12; }

	@media (max-width: 799px) {
		.project__img,
		.project__text { grid-column: 1 / -1; }
		.project__spacer { display: none; }

		.hero__title-col,
		.hero__meta-col { grid-column: 1 / -1; }
		.hero .col-1 { display: none; }
	}

	/* ── Type presets（先寫好，套用即可） ── */
	.t-display {
		font-family: var(--serif);
		font-size: var(--fs-display);
		line-height: 1.1;
		font-weight: 400;
		letter-spacing: var(--tracking-tight);
	}
	.t-display em { font-style: italic; }

	.t-title {
		font-family: var(--sans);
		font-weight: 400;
		font-size: var(--p);
		line-height: var(--lh);
	}

	.t-caption {
		font-family: var(--serif);
		color: var(--ink-muted);
		font-size: var(--p);
		line-height: var(--lh);
		font-style: italic;
	}

	.t-label {
		font-family: var(--mono);
		font-size: var(--fs-s);
	}

	.t-note {
		font-family: var(--sans);
		color: var(--ink-muted);
	}
	.t-prose-break { white-space: pre-line; }

	/* Atomic font helpers */
	.t-mono { font-family: var(--mono); }
	.t-serif { font-family: var(--serif); }
	.t-serif-i { font-family: var(--serif); font-style: italic; }
	.t-muted { color: var(--ink-muted); }

	/* ── Layout helpers ── */
	@media (max-width: 799px) {
		.measure { max-width: none; }   /* 手機版佔全寬 */
	}

	/* 垂直節奏：容器設 --stack-gap，個別子項可用 --gap-before 覆寫 */
	:where(.stack) > * + * { margin-top: var(--stack-gap, var(--sp-md)); }

	/* 段落流：多段內文 */
	.prose > p + p { margin-top: var(--prose-gap, var(--p)); }

	/* ── link（JS 以 .link 標記 is-active，名稱鎖定） ── */
	.link {
		position: relative;
		display: inline;
		color: var(--ink-muted);
		transition: var(--t-color);
	}

	.link::after {
		content: '';
		position: absolute;
		height: var(--len-hairline);
		left: 0;
		bottom: 0;
		width: 0;
		background: var(--ink);
		transition: var(--t-underline);
	}

	.link:hover,
	.link.is-active { color: var(--ink); }

	.link:hover::after,
	.link.is-active::after { width: 100%; }

	nav .link {
		display: inline-block;
		padding-bottom: var(--sp-xs);
		color: var(--bg);
	}

	nav .link:hover,
	nav .link.is-active { color: var(--bg); }

	nav .link::after { background: var(--bg); }

	@media (max-width: 799px) {
		nav.grid {
			grid-template-columns: auto 1fr auto;
			grid-template-areas: "logo . toggle";
		}
		
		nav.grid .nav__home,
		nav.grid .nav__info,
		nav.grid .nav__ig,
		nav.grid .nav__fb,
		nav.grid .nav__more {
			display: none;
		}
	}
}

/* ─── MOTION（最後層，確保 a11y 覆寫一切） ───────────────────────────────── */
@layer motion {
	.reveal {
		opacity: 0;
		transform: translateY(var(--len-shift-xl));
		will-change: opacity, transform;
		transition: var(--t-reveal);
	}

	.reveal.is-revealed {
		opacity: 1;
		transform: translateY(0);
	}

	.reveal.is-revealed .project__img { transition-delay: 0s; }
	.reveal.is-revealed .project__text { transition-delay: var(--stagger-lg); }

	.project.reveal .project__img,
	.project.reveal .project__text {
		opacity: 0;
		transform: translateY(var(--len-shift-md));
		transition: var(--t-reveal);
	}

	.project.reveal.is-revealed .project__img {
		opacity: 1;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.project.reveal.is-revealed .project__text {
		opacity: 1;
		transform: translateY(0);
		transition-delay: var(--delay-text);
	}

	.no-js .reveal {
		opacity: 1;
		transform: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.reveal {
			opacity: 1 !important;
			transform: none !important;
		}

		*, *::before, *::after {
			animation-duration: .001ms !important;
			transition-duration: .001ms !important;
		}
	}
}
/* ==========================================================================
   Works / Project detail / Lightbox controls （v0.2 新增）
   重開名定 layer，以維持與原始級聯一致的階叠。
   ========================================================================== */
@layer components {

	/* —— nav：logo 連回首頁；Index→Works。span 沿用原版 logo4 / home(=Works)3 / info2 / ig1 / fb1 / more1 —— */
	.nav__logo-link { grid-column: span 4; justify-self: start; display: block; }

	@media (max-width: 799px) {
		nav.grid .nav__logo-link { grid-area: logo; z-index: var(--z-nav-logo); }
	}

	/* —— 首頁：Selected works 標題列 / 頁尾連結 —— */
	.section-head {
		align-items: baseline;
		padding-top: var(--sp-lg);
	}
	.section-head .t-label { color: var(--ink-muted); }
	.section-head__more { justify-self: end; text-align: right; }
	.section-foot { padding: var(--sp-lg) 0 var(--sp-xl); }

	/* —— Works 列表 —— */
	.works { padding: var(--sp-lg) 0 var(--sp-2xl); }

	/* 欄位小標題（No. / Title / Category / Year；縮圖欄不標） */
	.works__head {
		align-items: end;
		padding: var(--sp-sm) 0;
		color: var(--ink-muted);
		border-bottom: var(--len-border) solid var(--ink-muted);
	}
	.works__head > :last-child { justify-self: end; }

	.work {
		align-items: start; /* 內容置上 */
	}

	.work__no { color: var(--ink-muted); padding-top: var(--sp-sm); }

	.work__thumb {
		position: relative;
		aspect-ratio: var(--ratio-landscape); /* 4:3 橫向 */
		overflow: hidden;
		background: var(--c-surface);
	}
	.work__slides { position: absolute; inset: 0; }
	.work__slide {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		opacity: 0;
		transition: opacity var(--dur-3) var(--ease-out-expo),
			transform var(--dur-3) var(--ease-out-expo);
	}
	.work__slide.is-active { opacity: 1; }
	.work:hover .work__slide.is-active { transform: scale(1.04); }

	.work__title { display: flex; flex-direction: column; gap: var(--sp-xs); color: var(--ink); }
	.work__title .t-title { padding-top: var(--sp-sm); }
	.work__title .t-caption { margin: 0; }
	.work__cats { padding-top: var(--sp-sm); }
	.work__year { justify-self: end; padding-top: var(--sp-sm); }

	@media (max-width: 799px) {
		.works__head { display: none; }
		.work {
			grid-template-columns: 1fr 1fr;
			row-gap: var(--sp-sm);
		}
		.work__thumb { grid-column: 1 / -1; }
		.work__no    { grid-column: 1; }
		.work__year  { grid-column: 2; justify-self: end; }
		.work__title { grid-column: 1 / -1; }
		.work__cats  { grid-column: 1 / -1; }
	}

	/* —— 詳情頁 —— */
	.detail { padding: var(--sp-2xl) 0; }
	.detail__back { padding-top: var(--sp-lg); }

	/* photo-collection：圖集格欄（≥1200 4 / 900–1199 3 / 600–899 2 / <600 1） */
	.pc__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--gap);
	}
	/* 斷點統一於 800：≥1200 4欄 / 1000–1199 3欄 / 800–999 2欄 / ≤799（手機）1欄 */
	@media (max-width: 1199px) { .pc__grid { grid-template-columns: repeat(3, 1fr); } }
	@media (max-width: 999px)  { .pc__grid { grid-template-columns: repeat(2, 1fr); } }
	@media (max-width: 799px)  { .pc__grid { grid-template-columns: 1fr; } }

	.pc__item {
		padding: 0;
		margin: 0;
		border: none;
		background: var(--c-surface);
		aspect-ratio: var(--ratio-photo); /* 3:2 橫向 */
		overflow: hidden;
		display: block;
		cursor: pointer;
	}
	.pc__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		scale: 1.18;                 /* 基礎溢出：單邊 9%，為視差位移留邊 */
		translate: 0 var(--py, 0%);  /* 視差位移：JS 依捲動進度設定 --py */
		transition: scale var(--dur-3) var(--ease-out-expo);
		will-change: transform;
		backface-visibility: hidden;
	}
	.pc__item:hover .pc__img { scale: 1.24; }
	@media (prefers-reduced-motion: reduce) {
		.pc__img { scale: 1; translate: 0; transition: none; }
	}

	.pc__loadmore { display: none; }

	@media (max-width: 799px) {
		.pc__item--extra { display: none; }
		.pc__grid.is-expanded .pc__item--extra { display: block; }
		.pc__loadmore {
			display: block;
			width: 100%;
			margin-top: var(--gap);
			padding: var(--sp-md);
			background: none;
			color: var(--ink);
			border: var(--len-border) solid var(--c-border-strong);
			font-family: var(--mono);
			font-size: var(--fs-s);
			letter-spacing: var(--tracking-wide);
			cursor: pointer;
		}
		.pc__loadmore.is-hidden { display: none; }
	}

	/* photo-collection：介紹區（No. col-1 / 主欄 col-5 / chips col-5 / meta col-1 end） */
	.pc-intro {
		padding-top: var(--sp-2xl);
		align-items: start;
	}
	.pc-intro__no { color: var(--ink-muted); letter-spacing: var(--tracking-wide); }
	.pc-intro__main { --stack-gap: var(--sp-2xl); }
	.pc-intro__meta {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-self: end;
		text-align: right;
	}

	.pc-intro__action {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		font-family: var(--mono);
		font-size: var(--fs-s);
		letter-spacing: var(--tracking-wide);
		color: var(--ink-muted);
		transition: var(--t-color);
	}
	.pc-intro__action:hover { color: var(--ink); }

	@media (max-width: 799px) {
		.pc-intro__no { display: none; }
		.pc-intro__main,
		.pc-intro__tags,
		.pc-intro__meta { grid-column: 1 / -1; }
		.pc-intro__meta {
			flex-direction: row;
			align-items: center;
			justify-self: start;
			text-align: left;
			gap: var(--sp-md);
			margin-top: var(--sp-md);
		}
	}

	/* —— ���箱：畫面中下播放/暫停（樣式同 overlay__counter t-label） —— */
	.overlay__controls {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--nav-h);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}
	.overlay__play {
		background: none;
		border: none;
		cursor: pointer;
		color: var(--bg);
		mix-blend-mode: difference;
		font-family: var(--mono);
		font-size: var(--fs-s);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* —— toast（Copy link 提示）—— */
	.toast {
		position: fixed;
		left: 50%;
		bottom: var(--sp-xl);
		transform: translateX(-50%) translateY(1rem);
		background: var(--ink);
		color: var(--bg);
		font-family: var(--mono);
		font-size: var(--fs-s);
		letter-spacing: var(--tracking-wide);
		padding: var(--sp-sm) var(--sp-md);
		opacity: 0;
		transition: opacity var(--dur-2) ease, transform var(--dur-2) ease;
		z-index: var(--z-cursor);
		pointer-events: none;
	}
	.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

	/* 首頁精選卡片標題連結 */
	.project__link { display: inline-block; }

	@media (max-width: 799px) {
		.nav__mobile-links { --count: 6; }
		.nav__mobile-links a:nth-child(6) { --i: 5; }
	}
}

@layer utilities {
	.is-sm { font-size: var(--fs-s); }
}