/* =====================================================================
   微真 環保材質電子目錄
   ===================================================================== */

.wec {
	--navy: #27274b;
	--navy-2: #2e2b62;
	--violet: #4a3f9c;
	--violet-2: #6b5dc2;
	--lav: #a49ccb;
	--lav-2: #cdc7e7;
	--lav-3: #f1eff9;
	--grey: #e3e4dc;
	--ink: #1d1c30;
	--text: #3b3a52;
	--muted: #7a7990;
	--accent: #e0493a;
	--line-green: #06c755;
	--ease: cubic-bezier(.22, .8, .24, 1);
	--ease-io: cubic-bezier(.77, 0, .18, 1);
	--back: cubic-bezier(.34, 1.56, .64, 1);
	--pad-t: 6.4em;
	--pad-x: 7.5em;
	--pad-b: 5.6em;
	--font: "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", system-ui, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 99990;
	width: 100%;
	height: 100vh;
	height: var(--wec-vh, 100dvh);
	overflow: hidden;
	background: #fff;
	color: var(--text);
	font-family: var(--font);
	font-size: clamp(12px, min(1.04vw, 1.85vh), 20px);
	line-height: 1.6;
	letter-spacing: .06em;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	text-size-adjust: 100%;
	overscroll-behavior: none;
	touch-action: pan-y;
}

.wec--inline {
	position: relative;
	inset: auto;
	z-index: 1;
	height: var(--wec-h, 100vh);
	touch-action: pan-y;
}

html.wec-lock,
html.wec-lock body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.wec-html,
.wec-body {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--navy, #27274b);
}

.wec *,
.wec *::before,
.wec *::after {
	box-sizing: border-box;
}

.wec :where(h1, h2, h3, h4, p, ol, ul, li, figure) {
	margin: 0;
	padding: 0;
	font-weight: inherit;
	letter-spacing: inherit;
}

.wec :where(ol, ul) {
	list-style: none;
}

.wec :where(button) {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	min-height: 0;
	line-height: inherit;
}

.wec :where(a) {
	color: inherit;
	text-decoration: none;
}

.wec img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	-webkit-user-drag: none;
	user-select: none;
}

.wec :focus-visible {
	outline: 2px solid var(--violet-2);
	outline-offset: 3px;
}

.wec-ico {
	width: 1.2em;
	height: 1.2em;
	flex: none;
}

.wec-sprite {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Track / slides
   --------------------------------------------------------------------- */

.wec-track {
	position: relative;
	height: 100%;
	transition: transform 1s var(--ease-io);
	will-change: transform;
}

.wec-slide {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #fff;
}

.wec-slide--cover,
.wec-slide--closing {
	background: var(--navy);
	color: #fff;
}

.wec-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: var(--pad-t) var(--pad-x) var(--pad-b);
	overflow: hidden;
	transition: transform 1s var(--ease-io), opacity 1s var(--ease-io);
}

.wec-inner.is-scrollable {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--lav) transparent;
	touch-action: pan-y;
}

.wec-slide.is-before .wec-inner {
	transform: translateY(8%) scale(.97);
	opacity: .3;
}

.wec-slide.is-after .wec-inner {
	transform: translateY(-8%) scale(.97);
	opacity: .3;
}

/* ---------------------------------------------------------------------
   Entrance animations
   --------------------------------------------------------------------- */

.wec-a {
	opacity: 0;
	transform: translate3d(0, 1.6em, 0);
	transition: opacity .8s var(--ease), transform .95s var(--ease), clip-path 1s var(--ease);
	transition-delay: var(--d, 0s);
}

.wec-a--left { transform: translate3d(-2em, 0, 0); }
.wec-a--zoom { transform: scale(.9); }
.wec-a--pop { transform: scale(.55); transition-timing-function: var(--ease), var(--back), var(--ease); }
.wec-a--fade { transform: none; }
.wec-a--title {
	transform: none;
	clip-path: inset(0 100% 0 0);
}

.wec-slide.is-active .wec-a,
.wec-slide.is-leaving .wec-a {
	opacity: 1;
	transform: none;
	clip-path: inset(-20% -20% -20% -20%);
}

.wec-slide:not(.is-active):not(.is-leaving) .wec-a,
.wec-slide.is-leaving .wec-a {
	transition: none;
}

.wec-slide.is-settled .wec-a {
	transition-delay: 0s;
}

.wec-hl {
	position: relative;
	display: inline;
	padding: 0 .05em;
	background: none;
	color: var(--ink);
	font-weight: 700;
}

.wec-hl span {
	position: relative;
	white-space: normal;
	background-image: linear-gradient(90deg, var(--violet-2), var(--lav));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% .16em;
	padding-bottom: .22em;
	transition: background-size .9s var(--ease);
	transition-delay: var(--hd, .8s);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.wec-slide.is-active .wec-hl span,
.wec-slide.is-leaving .wec-hl span {
	background-size: 100% .16em;
}

.wec-slide:not(.is-active) .wec-hl span {
	transition: none;
}

/* ---------------------------------------------------------------------
   Background decorations
   --------------------------------------------------------------------- */

.wec-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.wec-bg--dark {
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(107, 93, 194, .45), transparent 55%),
		radial-gradient(90% 80% at 10% 100%, rgba(74, 63, 156, .55), transparent 60%),
		linear-gradient(160deg, #262649 0%, #28264f 45%, #312b69 100%);
}

.wec-waves {
	position: absolute;
	display: block;
	overflow: visible;
}

.wec-waves--cover {
	inset: -15% -10%;
	width: 120%;
	height: 130%;
	color: #7d70e0;
	opacity: .55;
	animation: wec-drift 22s ease-in-out infinite alternate;
}

.wec-waves--cover2 {
	inset: -10% -20%;
	width: 140%;
	height: 120%;
	color: #b3a9ff;
	opacity: .22;
	transform: scaleY(-1) rotate(8deg);
	animation: wec-drift2 30s ease-in-out infinite alternate;
}

@keyframes wec-drift {
	from { transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(1.02); }
	to { transform: translate3d(4%, -3%, 0) rotate(3deg) scale(1.08); }
}

@keyframes wec-drift2 {
	from { transform: scaleY(-1) translate3d(3%, 0, 0) rotate(8deg); }
	to { transform: scaleY(-1) translate3d(-4%, 4%, 0) rotate(2deg); }
}

.wec-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(40px);
	opacity: .55;
	animation: wec-float 12s ease-in-out infinite alternate;
}

.wec-glow--1 {
	width: 38em;
	height: 38em;
	right: -10em;
	top: -12em;
	background: radial-gradient(circle, rgba(140, 120, 255, .55), transparent 70%);
}

.wec-glow--2 {
	width: 30em;
	height: 30em;
	left: -8em;
	bottom: -10em;
	background: radial-gradient(circle, rgba(90, 76, 200, .6), transparent 70%);
	animation-delay: -6s;
}

@keyframes wec-float {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(2em, 1.5em, 0); }
}

.wec-frame-line {
	position: absolute;
	inset: 2.2em;
}

.wec-frame-line i {
	position: absolute;
	background: rgba(164, 156, 203, .45);
	transition: transform 1.4s var(--ease-io) .2s;
}

.wec-frame-line i:nth-child(1) { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; }
.wec-frame-line i:nth-child(2) { top: 0; right: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; transition-delay: .5s; }
.wec-frame-line i:nth-child(3) { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right; transition-delay: .8s; }
.wec-frame-line i:nth-child(4) { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: bottom; transition-delay: 1.1s; }

.wec-slide.is-active .wec-frame-line i {
	transform: none;
}

.wec-deco,
.wec-orb {
	position: absolute;
	border-radius: 50%;
}

.wec-orb {
	overflow: hidden;
	background:
		radial-gradient(circle at 25% 20%, rgba(150, 135, 235, .9), transparent 55%),
		linear-gradient(150deg, #5a4db5 0%, #3f3592 50%, #2d2a6e 100%);
	color: rgba(220, 214, 255, .55);
	transform: scale(.6);
	opacity: 0;
	transition: transform 1.3s var(--ease), opacity 1s var(--ease);
}

.wec-slide.is-active .wec-orb,
.wec-slide.is-leaving .wec-orb {
	transform: none;
	opacity: 1;
}

.wec-orb .wec-waves {
	inset: -10%;
	width: 120%;
	height: 120%;
	animation: wec-drift 18s ease-in-out infinite alternate;
}

.wec-orb--tr {
	width: 42em;
	height: 42em;
	top: -13em;
	right: -9em;
}

.wec-deco {
	transition: transform 1.4s var(--ease) .15s, opacity 1s var(--ease) .15s;
	transform: scale(.7);
	opacity: 0;
	animation: wec-bob 9s ease-in-out infinite alternate;
}

.wec-slide.is-active .wec-deco,
.wec-slide.is-leaving .wec-deco {
	transform: none;
	opacity: 1;
}

@keyframes wec-bob {
	from { translate: 0 0; }
	to { translate: .8em -1.2em; }
}

.wec-deco--lav-tl {
	width: 34em;
	height: 34em;
	left: -10em;
	top: -13em;
	background: linear-gradient(135deg, #a49ccb 0%, #bdb6de 60%, #d8d3ec 100%);
	opacity: .95;
}

.wec-deco--lav-tl2 {
	width: 36em;
	height: 36em;
	left: -9em;
	top: -12em;
	background: rgba(205, 199, 231, .45);
	animation-delay: -4s;
}

.wec-deco--grey-br,
.wec-deco--grey-r {
	width: 13em;
	height: 13em;
	right: 4em;
	bottom: 12em;
	background: var(--grey);
	animation-delay: -3s;
}

.wec-deco--grey-r {
	right: 3em;
	bottom: 11em;
}

.wec-deco--lav-br {
	width: 24em;
	height: 24em;
	right: -4em;
	bottom: -12em;
	background: linear-gradient(170deg, #6b5dc2 0%, #9a90d0 70%, #c9c2e8 100%);
}

.wec-deco--lav-bl {
	width: 17em;
	height: 17em;
	left: -3em;
	bottom: -8em;
	background: linear-gradient(160deg, #6b5dc2, #b5addf);
}

.wec-deco--grey-bl {
	width: 8em;
	height: 8em;
	left: 11em;
	bottom: -3em;
	background: var(--grey);
	animation-delay: -5s;
}

.wec-deco--lav-b {
	width: 22em;
	height: 22em;
	right: 22em;
	bottom: -15em;
	background: linear-gradient(170deg, #8a7fd0, #cfc9e8);
	opacity: .8;
}

/* ---------------------------------------------------------------------
   Typography blocks
   --------------------------------------------------------------------- */

.wec-head {
	position: relative;
	margin-bottom: 1.6em;
}

.wec-kicker {
	display: flex;
	align-items: center;
	gap: .8em;
	margin-bottom: .6em;
	color: var(--violet);
	font-size: .8em;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.wec-kicker__no {
	font-weight: 700;
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
}

.wec-kicker__no small {
	margin-left: .15em;
	font-size: .72em;
	font-weight: 500;
	opacity: .6;
}

.wec-kicker__line {
	width: 3.2em;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	transform: scaleX(0);
	transition: transform .9s var(--ease) .4s;
}

.wec-slide.is-active .wec-kicker__line {
	transform: none;
}

.wec-title {
	color: var(--ink);
	font-size: 4.3em;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .16em;
}

.wec-sub {
	margin-top: .55em;
	color: var(--ink);
	font-size: 1.75em;
	font-weight: 500;
	letter-spacing: .16em;
}

.wec-lead {
	margin-top: .9em;
	max-width: 36em;
	color: var(--text);
	font-size: 1.12em;
	line-height: 1.8;
}

.wec-note {
	margin-top: .3em;
	color: var(--muted);
	font-size: .86em;
	line-height: 1.6;
}

.wec-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.4em;
	font-size: .95em;
	letter-spacing: .28em;
	opacity: .85;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.wec-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 3.2em;
	padding: .8em 1.7em;
	overflow: hidden;
	border-radius: 999px;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: .12em;
	white-space: nowrap;
	isolation: isolate;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s, border-color .3s;
}

.wec-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .55) 45%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .8s var(--ease);
}

.wec-btn:hover::before,
.wec-btn:focus-visible::before {
	transform: translateX(120%);
}

.wec-btn:hover {
	transform: translateY(-2px);
}

.wec-btn:active {
	transform: translateY(0) scale(.97);
}

.wec-btn .wec-ico {
	transition: transform .35s var(--ease);
}

.wec-btn:hover .wec-ico:last-child {
	transform: translateX(.25em);
}

.wec-btn--light {
	background: #fff;
	color: var(--navy-2);
	box-shadow: 0 .6em 1.6em rgba(10, 8, 40, .25);
}

.wec-btn--ghost {
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(6px);
}

.wec-btn--ghost:hover {
	background: rgba(255, 255, 255, .16);
	border-color: #fff;
}

.wec-btn--line {
	background: var(--line-green);
	color: #fff;
	box-shadow: 0 .6em 1.6em rgba(6, 199, 85, .3);
}

.wec-btn--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(6, 199, 85, .6);
	animation: wec-pulse 2.2s ease-out infinite;
	z-index: -2;
}

@keyframes wec-pulse {
	0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, .55); }
	80%, 100% { box-shadow: 0 0 0 1em rgba(6, 199, 85, 0); }
}

.wec-link {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .4em .2em;
	color: rgba(255, 255, 255, .75);
	font-size: .9em;
	border-bottom: 1px solid transparent;
	transition: color .3s, border-color .3s;
}

.wec-link:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------------------
   Fixed UI
   --------------------------------------------------------------------- */

.wec-progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	height: 3px;
	background: rgba(164, 156, 203, .2);
	pointer-events: none;
}

.wec-progress i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--lav), var(--violet-2));
	transform-origin: left;
	transform: scaleX(var(--p, 0));
	transition: transform 1s var(--ease-io);
}

.wec-brand {
	position: absolute;
	z-index: 20;
	top: 1.9em;
	right: 2.4em;
	padding: .3em;
	color: var(--navy-2);
	transition: color .6s, opacity .6s, transform .6s var(--ease);
}

.wec-logo {
	display: block;
	width: 9.4em;
	aspect-ratio: 1400 / 379;
	background: currentColor;
	-webkit-mask: var(--wec-logo) center / contain no-repeat;
	mask: var(--wec-logo) center / contain no-repeat;
}

.wec[data-theme="dark"] .wec-brand,
.wec[data-orb="tr"] .wec-brand {
	color: #fff;
}

.wec[data-type="cover"] .wec-brand,
.wec[data-type="closing"] .wec-brand {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-1em);
}

.wec-dots {
	position: absolute;
	z-index: 20;
	right: 2.1em;
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .15em;
	transform: translateY(-50%);
	color: var(--navy-2);
	transition: color .6s;
}

.wec[data-theme="dark"] .wec-dots {
	color: #fff;
}

.wec-dots__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 1.6em;
	height: 1.35em;
}

.wec-dots__item i {
	display: block;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
	width: .38em;
	height: .38em;
	margin-right: .35em;
	border-radius: 50%;
	background: currentColor;
	opacity: .3;
	transition: transform .4s var(--ease), opacity .3s, height .4s var(--ease);
}

.wec-dots__item.is-major i {
	width: .55em;
	height: .55em;
	margin-right: .27em;
	opacity: .45;
}

.wec-dots__item.is-on i {
	height: 1.25em;
	border-radius: 1em;
	opacity: 1;
	background: linear-gradient(var(--lav), var(--violet-2));
}

.wec[data-theme="dark"] .wec-dots__item.is-on i {
	background: #fff;
}

.wec-dots__item span {
	position: absolute;
	right: 2.1em;
	padding: .25em .75em;
	border-radius: .4em;
	background: var(--navy-2);
	color: #fff;
	font-size: .78em;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(.6em);
	pointer-events: none;
	transition: opacity .25s, transform .3s var(--ease);
}

.wec-dots__item:hover span,
.wec-dots__item:focus-visible span {
	opacity: 1;
	transform: none;
}

.wec-dots__item:hover i {
	opacity: .9;
	transform: scale(1.3);
}

.wec-pager {
	position: absolute;
	z-index: 20;
	left: 2.2em;
	bottom: 1.7em;
	display: flex;
	align-items: center;
	gap: .35em;
	padding: .35em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	box-shadow: 0 .5em 1.8em rgba(39, 39, 75, .12);
	color: var(--navy-2);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	transition: background .6s, color .6s, box-shadow .6s;
}

.wec[data-theme="dark"] .wec-pager {
	background: rgba(255, 255, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
	color: #fff;
}

.wec-pager__btn {
	display: grid;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	transition: background .3s, transform .3s var(--ease), opacity .3s;
}

.wec-pager__btn:hover {
	background: rgba(107, 93, 194, .14);
}

.wec[data-theme="dark"] .wec-pager__btn:hover {
	background: rgba(255, 255, 255, .15);
}

.wec-pager__btn[disabled] {
	opacity: .25;
	pointer-events: none;
}

.wec-pager__btn--next {
	background: linear-gradient(145deg, var(--violet-2), var(--violet));
	color: #fff;
	animation: wec-nudge 2.4s ease-in-out infinite;
}

.wec-pager__btn--next:hover {
	background: linear-gradient(145deg, var(--violet-2), var(--navy-2));
}

.wec[data-theme="dark"] .wec-pager__btn--next {
	background: #fff;
	color: var(--navy-2);
}

@keyframes wec-nudge {
	0%, 60%, 100% { transform: translateY(0); }
	75% { transform: translateY(.25em); }
	88% { transform: translateY(-.05em); }
}

.wec-pager__info {
	display: flex;
	flex-direction: column;
	min-width: 6.5em;
	padding: 0 .4em;
	line-height: 1.25;
}

.wec-pager__count {
	font-size: .78em;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	opacity: .7;
}

.wec-pager__count b {
	font-weight: 700;
	opacity: 1;
}

.wec-pager__label {
	max-width: 11em;
	overflow: hidden;
	font-size: .85em;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wec-pager__btn--menu {
	margin-left: .1em;
	border-left: 1px solid rgba(107, 93, 194, .18);
	border-radius: 0 50% 50% 0;
}

.wec-scrollhint {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 2.6em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6em;
	color: rgba(255, 255, 255, .8);
	font-size: .82em;
	letter-spacing: .2em;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 1s 1.8s;
}

.wec-slide.is-active .wec-scrollhint {
	opacity: 1;
}

.wec-scrollhint__mouse {
	position: relative;
	width: 1.6em;
	height: 2.5em;
	border: 1.5px solid currentColor;
	border-radius: 1em;
}

.wec-scrollhint__mouse i {
	position: absolute;
	left: 50%;
	top: .45em;
	width: 3px;
	height: .5em;
	margin-left: -1.5px;
	border-radius: 2px;
	background: currentColor;
	animation: wec-wheel 1.8s ease-in-out infinite;
}

@keyframes wec-wheel {
	0% { transform: translateY(0); opacity: 0; }
	30% { opacity: 1; }
	100% { transform: translateY(.9em); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Cover
   --------------------------------------------------------------------- */

.wec-cover,
.wec-closing {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}

.wec-cover__logo {
	position: absolute;
	top: 4.6em;
	right: 5.6em;
}

.wec-cover__logo .wec-logo {
	width: 13em;
	color: #fff;
}

.wec-cover__title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 5.4em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.wec-br {
	display: none;
}

.wec-char {
	display: inline-block;
	margin: 0 .09em;
	opacity: 0;
	filter: blur(10px);
	transform: translateY(.5em) scale(1.15);
	transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease);
	transition-delay: var(--d);
	text-shadow: 0 .1em .6em rgba(20, 10, 80, .35);
}

.wec-slide.is-active .wec-char,
.wec-slide.is-leaving .wec-char {
	opacity: 1;
	filter: none;
	transform: none;
}

.wec-slide:not(.is-active) .wec-char {
	transition: none;
}

.wec-cover__sub {
	margin-top: 1em;
	color: var(--lav-2);
	font-size: 1em;
	letter-spacing: .5em;
	text-transform: uppercase;
}

.wec-cover .wec-tags {
	justify-content: center;
	margin-top: 1.6em;
}

.wec-cover__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	margin-top: 2.8em;
}

/* ---------------------------------------------------------------------
   TOC
   --------------------------------------------------------------------- */

.wec-toc {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wec-toc .wec-head {
	margin-bottom: 2.4em;
}

.wec-toc .wec-title {
	font-size: 3.6em;
}

.wec-toc__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2em;
	max-width: 70em;
}

.wec-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.2em;
	width: 100%;
	height: 100%;
	padding: 1em 1.3em 1em 1em;
	border-radius: 1.4em;
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 .4em 1.6em rgba(39, 39, 75, .08), inset 0 0 0 1px rgba(164, 156, 203, .28);
	text-align: left;
	backdrop-filter: blur(6px);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
}

.wec-card:hover {
	transform: translateY(-.35em);
	background: #fff;
	box-shadow: 0 1.2em 2.4em rgba(74, 63, 156, .18), inset 0 0 0 1px rgba(107, 93, 194, .45);
}

.wec-card__img {
	position: relative;
	flex: none;
	width: 5.6em;
	height: 5.6em;
	border-radius: 50%;
	background: var(--lav-3);
}

.wec-card__img img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.wec-card:hover .wec-card__img img {
	transform: scale(1.08) rotate(-3deg);
}

.wec-card__ring {
	position: absolute;
	inset: -.35em;
	border-radius: 50%;
	border: 1.5px dashed var(--lav);
	opacity: .7;
	animation: wec-spin 18s linear infinite;
}

.wec-card:hover .wec-card__ring {
	border-color: var(--violet-2);
	animation-duration: 5s;
}

@keyframes wec-spin {
	to { transform: rotate(360deg); }
}

.wec-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.4;
}

.wec-card__no {
	color: var(--violet-2);
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .2em;
}

.wec-card__name {
	color: var(--ink);
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: .14em;
}

.wec-card__tag {
	margin-top: .2em;
	color: var(--muted);
	font-size: .82em;
}

.wec-card__go {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.2em;
	height: 2.2em;
	margin-left: auto;
	border-radius: 50%;
	background: var(--lav-3);
	color: var(--violet);
	transition: background .3s, color .3s, transform .4s var(--ease);
}

.wec-card:hover .wec-card__go {
	background: var(--violet);
	color: #fff;
	transform: translateX(.2em);
}

.wec-toc__tip {
	margin-top: 1.6em;
	color: var(--muted);
	font-size: .85em;
}

/* ---------------------------------------------------------------------
   Feature
   --------------------------------------------------------------------- */

.wec-grid--feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	align-items: center;
	gap: 3em;
}

.wec-col--text {
	position: relative;
	z-index: 2;
}

.wec-col--visual {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wec-grid--feature .wec-head {
	margin-bottom: 2.2em;
}

.wec-grid--feature .wec-sub {
	margin-bottom: .8em;
}

.wec-feats {
	display: flex;
	flex-direction: column;
	gap: .75em;
}

.wec-feats li {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	font-size: 1.12em;
	line-height: 1.65;
}

.wec-feats__no {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.7em;
	height: 1.7em;
	margin-top: -.02em;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--lav), var(--violet-2));
	color: #fff;
	font-size: .82em;
	font-weight: 700;
	letter-spacing: 0;
	box-shadow: 0 .3em .8em rgba(107, 93, 194, .3);
}

.wec-feats__txt {
	min-width: 0;
}

.wec-desc {
	position: relative;
	display: flex;
	gap: 1.2em;
	margin-top: 2.6em;
	max-width: 32em;
}

.wec-desc__guide {
	position: relative;
	flex: none;
	width: 1px;
	margin-left: .8em;
	background: rgba(164, 156, 203, .35);
}

.wec-desc__guide::before,
.wec-desc__guide i {
	content: "";
	position: absolute;
	left: 50%;
	border-radius: 50%;
	transform: translateX(-50%);
}

.wec-desc__guide::before {
	top: -.2em;
	width: .65em;
	height: .65em;
	background: var(--violet-2);
	box-shadow: 0 0 0 .3em rgba(107, 93, 194, .18);
}

.wec-desc__guide i {
	top: 0;
	width: 3px;
	height: 2.4em;
	border-radius: 3px;
	background: linear-gradient(transparent, var(--violet-2), transparent);
	animation: wec-scan 2.8s ease-in-out infinite;
}

@keyframes wec-scan {
	0% { top: 0; opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { top: calc(100% - 2.4em); opacity: 0; }
}

.wec-desc__body p {
	color: var(--text);
	font-size: 1.02em;
	line-height: 1.95;
}

.wec-desc__body p + p {
	margin-top: .4em;
}

.wec-orb--visual {
	width: 44em;
	height: 44em;
	right: calc(-1 * var(--pad-x) - 9em);
	top: 50%;
	margin-top: -18em;
}

.wec-visual {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 38em;
}

/* ---------------------------------------------------------------------
   Slider
   --------------------------------------------------------------------- */

.wec-slider {
	position: relative;
	--sh: 31em;
}

.wec-slider__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 1.6em;
	touch-action: pan-y;
}

.wec-slider__track {
	display: flex;
	transition: transform .75s var(--ease);
	will-change: transform;
}

.wec-slider.is-dragging .wec-slider__track {
	transition: none;
}

.wec-slider__item {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--sh);
	padding: 1em;
	transition: opacity .6s var(--ease), transform .75s var(--ease);
}

.wec-slider__item:not(.is-current) {
	opacity: .25;
	transform: scale(.9);
}

.wec-slider__zoom {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.wec-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	transition: transform .6s var(--ease);
}

.wec-slider__zoom:hover .wec-frame {
	transform: scale(1.03);
}

.wec-slider__item img {
	max-width: 100%;
	max-height: calc(var(--sh) - 2em);
	width: auto;
	height: auto;
	object-fit: contain;
}

.wec-slider__item.is-cut,
.wec-slider__item.is-circle {
	padding: 1.6em 2em 2.2em;
}

.wec-slider__item.is-cut img,
.wec-slider__item.is-circle img {
	max-height: calc(var(--sh) - 3.8em);
	filter: drop-shadow(0 .7em .8em rgba(15, 10, 55, .3));
}

.wec-slider__item.is-photo .wec-frame {
	padding: .6em;
	border-radius: 1.2em;
	background: #fff;
	box-shadow: 0 1.4em 3em rgba(15, 10, 55, .28);
}

.wec-slider__item.is-photo img {
	max-height: calc(var(--sh) - 3.4em);
	border-radius: .8em;
}

.wec-slider__cap {
	display: table;
	min-height: 1.9em;
	margin: .5em auto 0;
	padding: .3em 1em;
	border-radius: 999px;
	background: rgba(39, 39, 75, .72);
	color: #fff;
	font-size: .85em;
	text-align: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: opacity .3s;
}

.wec-slider__cap:empty {
	visibility: hidden;
}

.wec-slider__cap.is-swap {
	opacity: 0;
}

.wec-slider__ui {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8em;
	margin-top: .7em;
	color: #fff;
}

.wec-slider__btn {
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: #fff;
	color: var(--violet);
	box-shadow: 0 .3em 1em rgba(20, 14, 70, .25);
	transition: background .3s, transform .3s var(--ease), color .3s;
}

.wec-slider__btn:hover {
	background: var(--violet);
	color: #fff;
	transform: scale(1.08);
}

.wec-slider__dots {
	display: flex;
	align-items: center;
	gap: .15em;
	padding: 0 .5em;
	border-radius: 999px;
	background: rgba(39, 39, 75, .72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.wec-slider__dot {
	display: grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
}

.wec-slider__dot i {
	position: relative;
	display: block;
	width: .5em;
	height: .5em;
	overflow: hidden;
	border-radius: 1em;
	background: rgba(255, 255, 255, .45);
	transition: width .4s var(--ease), background .3s;
}

.wec-slider__dot.is-on i {
	width: 1.8em;
	background: rgba(255, 255, 255, .35);
}

.wec-slider__dot.is-on i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform-origin: left;
	transform: scaleX(1);
}

.wec-slider.is-playing .wec-slider__dot.is-on i::after {
	animation: wec-bar var(--ap, 4.5s) linear forwards;
}

@keyframes wec-bar {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.wec-hint {
	position: absolute;
	z-index: 3;
	top: .8em;
	right: .8em;
	display: flex;
	align-items: center;
	gap: .45em;
	padding: .45em .9em .45em .55em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--violet);
	font-size: .78em;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 .4em 1.2em rgba(20, 14, 70, .2);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-.5em) scale(.9);
	transition: opacity .5s var(--ease), transform .6s var(--back);
	transition-delay: 1.4s;
}

.wec-slide.is-active .wec-hint {
	opacity: 1;
	transform: none;
}

.wec-hint.is-gone,
.wec-slide.is-active .wec-hint.is-gone {
	opacity: 0;
	transform: scale(.9);
	transition-delay: 0s;
}

.wec-hint .wec-ico {
	position: relative;
	z-index: 1;
	animation: wec-zoomico 2s ease-in-out infinite;
}

.wec-hint__ring {
	position: absolute;
	left: .35em;
	top: 50%;
	width: 1.6em;
	height: 1.6em;
	margin-top: -.8em;
	border-radius: 50%;
	background: rgba(107, 93, 194, .25);
	animation: wec-ring 2s ease-out infinite;
}

@keyframes wec-ring {
	0% { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes wec-zoomico {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

/* detail bubble */
.wec-detail {
	position: absolute;
	z-index: 3;
	left: -1em;
	bottom: 8%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5em;
}

.wec-detail__btn {
	position: relative;
	display: block;
	width: 8em;
	height: 8em;
	border-radius: 50%;
	cursor: zoom-in;
}

.wec-detail__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: .3em solid #fff;
	border-radius: 50%;
	box-shadow: 0 .8em 2em rgba(20, 14, 70, .3);
	transition: transform .5s var(--ease);
}

.wec-detail__btn:hover .wec-detail__img {
	transform: scale(1.06);
}

.wec-detail__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wec-detail__pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--lav);
	animation: wec-ring2 2.4s ease-out infinite;
}

@keyframes wec-ring2 {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(1.35); opacity: 0; }
}

.wec-detail__cap {
	padding: .25em .8em;
	border-radius: 999px;
	background: var(--navy-2);
	color: #fff;
	font-size: .75em;
	white-space: nowrap;
}

/* zoom badge on circles / cards */
.wec-zoom__badge {
	position: absolute;
	z-index: 2;
	right: 6%;
	bottom: 6%;
	display: grid;
	place-items: center;
	width: 2.3em;
	height: 2.3em;
	border-radius: 50%;
	background: #fff;
	color: var(--violet);
	box-shadow: 0 .3em 1em rgba(20, 14, 70, .25);
	transform: scale(.85);
	transition: transform .35s var(--back), background .3s, color .3s;
}

.wec-zoom__badge .wec-ico {
	width: 1.1em;
	height: 1.1em;
}

.wec-zoom:hover .wec-zoom__badge {
	transform: scale(1.1);
	background: var(--violet);
	color: #fff;
}

.wec-slide.is-active .wec-zoom__badge {
	animation: wec-badge 3.2s ease-in-out 2s infinite;
}

@keyframes wec-badge {
	0%, 70%, 100% { box-shadow: 0 .3em 1em rgba(20, 14, 70, .25), 0 0 0 0 rgba(107, 93, 194, .5); }
	85% { box-shadow: 0 .3em 1em rgba(20, 14, 70, .25), 0 0 0 .6em rgba(107, 93, 194, 0); }
}

/* circles */
.wec-circle {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	cursor: zoom-in;
}

.wec-circle img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 1em 2.2em rgba(39, 39, 75, .18);
	transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.wec-circle.is-cut img {
	border-radius: 0;
	object-fit: contain;
	box-shadow: none;
	filter: drop-shadow(0 1em 1.2em rgba(39, 39, 75, .25));
}

.wec-circle:hover img {
	transform: scale(1.05);
	box-shadow: 0 1.4em 2.8em rgba(74, 63, 156, .3);
}

.wec-circle.is-cut:hover img {
	box-shadow: none;
}

/* ---------------------------------------------------------------------
   Source
   --------------------------------------------------------------------- */

.wec-source {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wec-src {
	--c: 12em;
	position: relative;
	max-width: 62em;
}

.wec-src__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--c) 4.5em minmax(0, 1fr);
	align-items: center;
	margin-left: calc(var(--i) * 8em);
}

.wec-src__item + .wec-src__item {
	margin-top: -2.6em;
}

.wec-src__item.is-text {
	margin-top: .2em;
	margin-left: calc((var(--i) - 1) * 8em);
}

.wec-src__item.is-text::before {
	content: "";
	justify-self: end;
	width: .8em;
	height: .8em;
	margin-right: -.4em;
	border-radius: 50%;
	background: var(--lav);
	box-shadow: 0 0 0 .35em rgba(164, 156, 203, .25);
}

.wec-src__img {
	position: relative;
	z-index: 1;
}

.wec-src__item:nth-child(2) .wec-src__img {
	z-index: 2;
}

.wec-src__guide {
	position: relative;
	height: 1px;
	margin: 0 .4em;
}

.wec-src__guide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, var(--lav) 0 .35em, transparent .35em .7em);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform .7s var(--ease);
	transition-delay: var(--d);
}

.wec-src__guide i {
	position: absolute;
	right: -.2em;
	top: 50%;
	width: .55em;
	height: .55em;
	margin-top: -.275em;
	border-radius: 50%;
	background: var(--violet-2);
	transform: scale(0);
	transition: transform .4s var(--back);
	transition-delay: calc(var(--d) + .5s);
}

.wec-slide.is-active .wec-src__guide::before,
.wec-slide.is-leaving .wec-src__guide::before {
	transform: none;
}

.wec-slide.is-active .wec-src__guide i,
.wec-slide.is-leaving .wec-src__guide i {
	transform: none;
}

.wec-slide:not(.is-active) .wec-src__guide::before,
.wec-slide:not(.is-active) .wec-src__guide i {
	transition: none;
}

.wec-src__txt {
	display: flex;
	align-items: baseline;
	gap: .6em;
	padding-left: .6em;
	color: var(--ink);
	font-size: 1.2em;
	line-height: 1.75;
}

.wec-src__no {
	flex: none;
	color: var(--violet-2);
	font-size: .85em;
	font-weight: 700;
}

.wec-callout {
	display: flex;
	align-items: flex-start;
	gap: .8em;
	max-width: 34em;
	margin-top: 2em;
	margin-left: calc(12em + 8em + 4.5em);
	padding: 1em 1.3em;
	border-radius: 1em;
	background: linear-gradient(90deg, rgba(224, 73, 58, .09), rgba(224, 73, 58, .02));
	box-shadow: inset .25em 0 0 var(--accent);
	color: #c23b2d;
	font-size: 1.1em;
	font-weight: 500;
	line-height: 1.7;
}

.wec-callout__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.5em;
	height: 1.5em;
	margin-top: .1em;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: .85em;
	font-weight: 700;
	animation: wec-zoomico 2.4s ease-in-out infinite;
}

.wec-callout .wec-hl {
	color: inherit;
}

/* ---------------------------------------------------------------------
   Process
   --------------------------------------------------------------------- */

.wec-process {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wec-process .wec-head {
	margin-bottom: 3em;
}

.wec-steps {
	--gap: 3.5em;
	position: relative;
	max-width: calc(var(--n) * 14.5em + (var(--n) - 1) * var(--gap));
}

.wec-steps__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: var(--gap);
}

.wec-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wec-step__media {
	position: relative;
	width: 100%;
}

.wec-step__no {
	position: absolute;
	z-index: 3;
	left: 2%;
	top: 16%;
	display: grid;
	place-items: center;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: linear-gradient(145deg, #b3aadf, var(--violet-2));
	border: 2px solid #fff;
	color: #fff;
	font-size: 1.15em;
	font-weight: 500;
	box-shadow: 0 .4em 1em rgba(74, 63, 156, .35);
}

.wec-step__txt {
	margin-top: 1.4em;
	transition-delay: calc(var(--d) + .2s);
}

.wec-step__txt h4 {
	color: var(--ink);
	font-size: 1.2em;
	font-weight: 500;
	letter-spacing: .14em;
	line-height: 1.5;
}

.wec-step__txt p {
	margin-top: .5em;
	color: var(--muted);
	font-size: .95em;
	line-height: 1.7;
}

/* connector */
.wec-steps__line {
	--one: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
	position: absolute;
	z-index: 0;
	top: 0;
	margin-top: calc(var(--one) / 2 - 1px);
	left: calc(var(--one) / 2);
	right: calc(var(--one) / 2);
	height: 2px;
}

.wec-steps__line::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, var(--lav-2) 0 .5em, transparent .5em 1em);
}

.wec-steps__fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--lav), var(--violet-2));
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 1.6s var(--ease-io) .5s;
}

.wec-slide.is-active .wec-steps__fill,
.wec-slide.is-leaving .wec-steps__fill {
	transform: none;
}

.wec-slide:not(.is-active) .wec-steps__fill {
	transition: none;
}

.wec-steps__dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: .8em;
	height: .8em;
	margin: -.4em 0 0 -.4em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 .25em var(--violet-2), 0 0 1em var(--violet-2);
	opacity: 0;
}

.wec-slide.is-active .wec-steps__dot {
	animation: wec-travel 4.5s var(--ease-io) 2.2s infinite;
}

@keyframes wec-travel {
	0% { left: 0; opacity: 0; }
	10% { opacity: 1; }
	85% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}

.wec-step:not(:last-child) .wec-step__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	right: calc(var(--gap) / -2);
	width: .7em;
	height: .7em;
	margin: -.35em -.45em 0 0;
	border-top: 2px solid var(--violet-2);
	border-right: 2px solid var(--violet-2);
	transform: rotate(45deg) scale(0);
	transition: transform .4s var(--back);
	transition-delay: calc(var(--d) + .6s);
}

.wec-slide.is-active .wec-step:not(:last-child) .wec-step__media::after {
	transform: rotate(45deg) scale(1);
}

/* ---------------------------------------------------------------------
   Cases
   --------------------------------------------------------------------- */

.wec-cases {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wec-cases .wec-head {
	margin-bottom: .4em;
}

.wec-cases .wec-lead {
	max-width: 40em;
	margin-top: 0;
	margin-bottom: 2em;
}

.wec-cases__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.6em;
	max-width: 80em;
}

.wec-cases__slider {
	display: none;
}

.wec-case {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 1.4em 1em 1em;
	border-radius: 1.4em;
	background: linear-gradient(180deg, #fff, var(--lav-3));
	box-shadow: 0 .6em 2em rgba(39, 39, 75, .08), inset 0 0 0 1px rgba(164, 156, 203, .25);
	cursor: zoom-in;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.wec-case:hover {
	transform: translateY(-.5em);
	box-shadow: 0 1.4em 3em rgba(74, 63, 156, .2), inset 0 0 0 1px rgba(107, 93, 194, .4);
}

.wec-case__img {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 21em;
}

.wec-case__img img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 1em 1em rgba(39, 39, 75, .2));
	transition: transform .6s var(--ease);
}

.wec-case:hover .wec-case__img img {
	transform: scale(1.04) translateY(-.2em);
}

.wec-case__cap {
	margin-top: 1em;
	color: var(--ink);
	font-size: .92em;
	font-weight: 500;
}

.wec-case .wec-zoom__badge {
	top: .8em;
	right: .8em;
	bottom: auto;
}

/* ---------------------------------------------------------------------
   Closing
   --------------------------------------------------------------------- */

.wec-closing__logo .wec-logo {
	width: 22em;
	color: #fff;
}

.wec-closing__title {
	margin-top: 1.2em;
	font-size: 2.2em;
	font-weight: 500;
	letter-spacing: .3em;
}

.wec-closing .wec-tags {
	justify-content: center;
	margin-top: .8em;
}

.wec-closing__lead {
	max-width: 34em;
	margin-top: 1.8em;
	color: rgba(255, 255, 255, .82);
	font-size: 1.02em;
	line-height: 1.85;
}

.wec-closing .wec-hl {
	color: #fff;
}

.wec-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9em;
	margin-top: 2.2em;
}

.wec-closing__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6em 2em;
	margin-top: 2em;
	color: rgba(255, 255, 255, .75);
	font-size: .92em;
}

.wec-closing__meta a {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	transition: color .3s;
}

.wec-closing__meta a:hover {
	color: #fff;
}

.wec-closing__back {
	display: flex;
	gap: 1.6em;
	margin-top: 1.6em;
}

/* ---------------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------------- */

.wec-lightbox {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 16, 40, .9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: #fff;
	opacity: 0;
	transition: opacity .35s var(--ease);
	touch-action: none;
}

.wec-lightbox[hidden] {
	display: none;
}

.wec-lightbox.is-open {
	opacity: 1;
}

.wec-lightbox__stage {
	position: absolute;
	inset: 4.5em 5.5em 6em;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.wec-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: .6em;
	transform-origin: center;
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(var(--s, 1));
	transition: transform .35s var(--ease), opacity .3s;
	cursor: zoom-in;
	will-change: transform;
}

.wec-lightbox.is-zoomed .wec-lightbox__img {
	cursor: grab;
}

.wec-lightbox.is-panning .wec-lightbox__img {
	transition: none;
	cursor: grabbing;
}

.wec-lightbox__img.is-loading {
	opacity: 0;
}

.wec-lightbox.is-open .wec-lightbox__img {
	animation: wec-lb-in .45s var(--ease);
}

@keyframes wec-lb-in {
	from { opacity: 0; scale: .92; }
	to { opacity: 1; scale: 1; }
}

.wec-lightbox__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.6em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2em;
	padding: 0 1.5em;
	text-align: center;
}

.wec-lightbox__cap {
	font-size: 1em;
	letter-spacing: .1em;
}

.wec-lightbox__count {
	font-size: .8em;
	opacity: .6;
	letter-spacing: .2em;
}

.wec-lightbox__tip {
	position: absolute;
	top: 1.6em;
	left: 50%;
	padding: .35em 1em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font-size: .78em;
	white-space: nowrap;
	transform: translateX(-50%);
	animation: wec-fadeout 4s ease forwards 1.5s;
}

@keyframes wec-fadeout {
	to { opacity: 0; }
}

.wec-lightbox__btn {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	transition: background .3s, transform .3s var(--ease);
}

.wec-lightbox__btn:hover {
	background: rgba(255, 255, 255, .28);
	transform: scale(1.08);
}

.wec-lightbox__btn .wec-ico {
	width: 1.4em;
	height: 1.4em;
}

.wec-lightbox__close {
	top: 1.2em;
	right: 1.2em;
}

.wec-lightbox__prev,
.wec-lightbox__next {
	top: 50%;
	margin-top: -1.5em;
}

.wec-lightbox__prev { left: 1.2em; }
.wec-lightbox__next { right: 1.2em; }

.wec-lightbox.is-single .wec-lightbox__prev,
.wec-lightbox.is-single .wec-lightbox__next,
.wec-lightbox.is-single .wec-lightbox__count {
	display: none;
}

/* =====================================================================
   Stacked layout：手機、直向平板
   ===================================================================== */

@media (max-width: 767px), (max-aspect-ratio: 5/6) {
	.wec {
		--pad-t: 4.4em;
		--pad-x: max(16px, 1.35em, env(safe-area-inset-left));
		--pad-b: 5.6em;
		font-size: clamp(11px, min(3.9vw, 1.95vh), 20px);
		letter-spacing: .04em;
	}

	.wec-dots {
		display: none;
	}

	.wec-brand {
		top: 1.05em;
		left: var(--pad-x);
		right: auto;
		padding: 0;
	}

	.wec-logo {
		width: 7em;
	}

	.wec-pager {
		left: 50%;
		bottom: max(1em, env(safe-area-inset-bottom));
		transform: translateX(-50%);
		max-width: calc(100% - 2 * var(--pad-x));
	}

	.wec-pager__info {
		min-width: 7.5em;
		max-width: 12em;
		align-items: center;
		text-align: center;
	}

	.wec-pager__label {
		max-width: 100%;
	}

	.wec-head {
		margin-bottom: 1em;
	}

	.wec-kicker {
		font-size: .74em;
		margin-bottom: .35em;
	}

	.wec-kicker__en {
		display: none;
	}

	.wec-title {
		font-size: 2.35em;
		letter-spacing: .12em;
	}

	.wec-sub {
		margin-top: .3em;
		font-size: 1.2em;
	}

	.wec-lead {
		font-size: .98em;
		line-height: 1.75;
	}

	.wec-deco--lav-tl {
		width: 17em;
		height: 17em;
		left: -7em;
		top: -8em;
	}

	.wec-deco--lav-tl2 {
		width: 18em;
		height: 18em;
		left: -6.5em;
		top: -7.5em;
	}

	.wec-orb--tr {
		width: 13em;
		height: 13em;
		top: -7em;
		right: -5em;
	}

	.wec-deco--grey-br,
	.wec-deco--grey-r {
		width: 6em;
		height: 6em;
		right: -1.5em;
		bottom: 30%;
	}

	.wec-deco--lav-br {
		width: 12em;
		height: 12em;
		right: -5em;
		bottom: -6em;
	}

	.wec-deco--lav-bl {
		width: 10em;
		height: 10em;
		left: -4em;
		bottom: -5em;
	}

	.wec-deco--grey-bl {
		display: none;
	}

	.wec-deco--lav-b {
		width: 12em;
		height: 12em;
		right: -4em;
		bottom: -6em;
	}

	/* cover */
	.wec-frame-line {
		inset: .9em;
	}

	.wec-cover__logo {
		position: static;
		margin-bottom: 2.6em;
	}

	.wec-cover__logo .wec-logo {
		width: 11em;
	}

	.wec-cover__title {
		font-size: 3.1em;
		line-height: 1.3;
	}

	.wec-br {
		display: block;
		flex-basis: 100%;
		height: 0;
	}

	.wec-cover__sub {
		font-size: .78em;
		letter-spacing: .3em;
	}

	.wec-cover .wec-tags {
		font-size: .85em;
		gap: .4em 1em;
	}

	.wec-cover__cta {
		flex-direction: column;
		align-items: stretch;
		width: min(100%, 18em);
		gap: .7em;
		margin-top: 2.2em;
	}

	.wec-scrollhint {
		bottom: 5.8em;
	}

	.wec-scrollhint__mouse {
		display: none;
	}

	/* toc */
	.wec-toc {
		justify-content: flex-start;
	}

	.wec-toc .wec-head {
		margin-bottom: 1.2em;
	}

	.wec-toc .wec-title {
		font-size: 2.2em;
	}

	.wec-toc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7em;
	}

	.wec-card {
		flex-direction: column;
		align-items: center;
		gap: .55em;
		padding: .9em .6em .8em;
		text-align: center;
		border-radius: 1.1em;
	}

	.wec-card__img {
		width: 4.6em;
		height: 4.6em;
	}

	.wec-card__body {
		align-items: center;
	}

	.wec-card__name {
		font-size: 1.12em;
	}

	.wec-card__tag {
		font-size: .74em;
	}

	.wec-card__no {
		position: absolute;
		top: .8em;
		left: .9em;
	}

	.wec-card__go {
		display: none;
	}

	.wec-toc__tip {
		margin-top: 1em;
		text-align: center;
	}

	/* feature */
	.wec-grid--feature {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "visual" "sub" "feats" "desc";
		grid-template-rows: auto auto auto auto auto;
		align-content: start;
		align-items: start;
		gap: 0;
	}

	.wec-col--text {
		display: contents;
	}

	.wec-grid--feature .wec-head {
		grid-area: head;
		margin-bottom: .2em;
	}

	.wec-col--visual {
		grid-area: visual;
		height: auto;
		margin: 0 calc(-1 * var(--pad-x));
		padding: 0 var(--pad-x);
	}

	.wec-grid--feature > .wec-col--text > .wec-sub {
		grid-area: sub;
		margin: .6em 0 .5em;
		font-size: 1.1em;
	}

	.wec-feats {
		grid-area: feats;
		gap: .45em;
	}

	.wec-feats li {
		font-size: .98em;
		line-height: 1.6;
		gap: .6em;
	}

	.wec-desc {
		grid-area: desc;
		margin-top: 1em;
		gap: .9em;
	}

	.wec-desc__guide {
		margin-left: .75em;
	}

	.wec-desc__body p {
		font-size: .9em;
		line-height: 1.75;
	}

	.wec-orb--visual {
		width: 19em;
		height: 19em;
		right: -5em;
		top: -1em;
		margin-top: 0;
	}

	.wec-visual {
		max-width: none;
	}

	.wec-slider {
		--sh: 15.5em;
	}

	.wec-slider__viewport {
		border-radius: 1em;
	}

	.wec-slider__item,
	.wec-slider__item.is-cut,
	.wec-slider__item.is-circle {
		padding: .6em 1.2em 1.2em;
	}

	.wec-slider__item.is-cut img,
	.wec-slider__item.is-circle img {
		max-height: calc(var(--sh) - 1.8em);
	}

	.wec-slider__item.is-photo .wec-frame {
		padding: .35em;
		border-radius: .8em;
	}

	.wec-slider__item.is-photo img {
		max-height: calc(var(--sh) - 2em);
		border-radius: .55em;
	}

	.wec-slider__ui {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(var(--sh) - 2.2em);
		justify-content: space-between;
		margin: 0;
		padding: 0 .1em;
		pointer-events: none;
	}

	.wec-slider__ui > * {
		pointer-events: auto;
	}

	.wec-slider__btn {
		width: 2.2em;
		height: 2.2em;
	}

	.wec-slider__dots {
		padding: 0 .3em;
	}

	.wec-slider__dot {
		width: 1.2em;
		height: 1.6em;
	}

	.wec-slider__cap {
		margin-top: .35em;
		min-height: 1.7em;
		font-size: .76em;
	}

	.wec-hint {
		top: .4em;
		right: .4em;
		font-size: .7em;
	}

	.wec-detail {
		left: auto;
		right: calc(var(--pad-x) - .2em);
		bottom: auto;
		top: 9.6em;
		gap: .3em;
	}

	.wec-detail__btn {
		width: 4.4em;
		height: 4.4em;
	}

	.wec-detail__img {
		border-width: .2em;
	}

	.wec-detail__cap {
		font-size: .62em;
	}

	/* source */
	.wec-source {
		justify-content: flex-start;
	}

	.wec-src {
		--c: 7.6em;
		margin-top: .8em;
	}

	.wec-src__item {
		grid-template-columns: var(--c) 1.6em minmax(0, 1fr);
		margin-left: calc(var(--i) * 1.2em);
	}

	.wec-src__item + .wec-src__item {
		margin-top: .5em;
	}

	.wec-src__item.is-text {
		margin-top: .8em;
		margin-left: calc((var(--i) - 1) * 1.2em);
	}

	.wec-src__guide {
		margin: 0 .15em;
	}

	.wec-src__txt {
		padding-left: .35em;
		font-size: 1em;
		line-height: 1.7;
	}

	.wec-callout {
		margin: 1.4em 0 0;
		padding: .8em 1em;
		font-size: .95em;
	}

	/* process */
	.wec-process {
		justify-content: flex-start;
	}

	.wec-process .wec-head {
		margin-bottom: 1.2em;
	}

	.wec-steps {
		--c: min(calc(8em + (4 - var(--n)) * 1em), calc((var(--wec-vh, 100dvh) - 19em) / var(--n) - 1em));
		--gap: .9em;
		max-width: 30em;
		width: 100%;
	}

	.wec-steps__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.wec-step {
		display: grid;
		grid-template-columns: var(--c) minmax(0, 1fr);
		align-items: center;
		gap: 1.2em;
		min-height: var(--c);
		text-align: left;
	}

	.wec-step__media {
		width: var(--c);
	}

	.wec-step__no {
		left: -8%;
		top: -4%;
		width: 2em;
		height: 2em;
		font-size: .9em;
	}

	.wec-step__txt {
		margin-top: 0;
	}

	.wec-step__txt h4 {
		font-size: 1.08em;
	}

	.wec-step__txt p {
		margin-top: .15em;
		font-size: .88em;
	}

	.wec-step .wec-zoom__badge {
		width: 1.8em;
		height: 1.8em;
		right: -2%;
		bottom: -2%;
	}

	.wec-step:not(:last-child) .wec-step__media::after {
		display: none;
	}

	.wec-step:not(:last-child)::after {
		content: "";
		position: absolute;
		z-index: 2;
		bottom: calc(var(--gap) / -2);
		left: calc(var(--c) / 2);
		width: .6em;
		height: .6em;
		margin: 0 0 -.45em -.3em;
		border-top: 2px solid var(--violet-2);
		border-right: 2px solid var(--violet-2);
		transform: rotate(135deg) scale(0);
		transition: transform .4s var(--back);
		transition-delay: calc(var(--d) + .6s);
	}

	.wec-slide.is-active .wec-step:not(:last-child)::after {
		transform: rotate(135deg) scale(1);
	}

	.wec-steps__line {
		margin-top: 0;
		top: calc(var(--c) / 2);
		bottom: calc(var(--c) / 2);
		left: calc(var(--c) / 2 - 1px);
		right: auto;
		width: 2px;
		height: auto;
	}

	.wec-steps__line::before {
		background: repeating-linear-gradient(180deg, var(--lav-2) 0 .5em, transparent .5em 1em);
	}

	.wec-steps__fill {
		background: linear-gradient(180deg, var(--lav), var(--violet-2));
		transform-origin: top;
		transform: scaleY(0);
	}

	.wec-steps__dot {
		top: 0;
		left: 50%;
		margin: -.4em 0 0 -.4em;
	}

	@keyframes wec-travel {
		0% { top: 0; opacity: 0; }
		10% { opacity: 1; }
		85% { opacity: 1; }
		100% { top: 100%; opacity: 0; }
	}

	/* cases */
	.wec-cases {
		justify-content: flex-start;
	}

	.wec-cases .wec-lead {
		margin-bottom: 1em;
		font-size: .95em;
	}

	.wec-cases__grid {
		display: none;
	}

	.wec-cases__slider {
		display: block;
	}

	.wec-slider--cases {
		--sh: min(22em, calc(100dvh - 24em));
	}

	.wec-slider--cases .wec-slider__viewport {
		background: linear-gradient(180deg, #fff, var(--lav-3));
		box-shadow: inset 0 0 0 1px rgba(164, 156, 203, .3);
	}

	.wec-slider--cases .wec-slider__cap {
		font-size: .9em;
	}

	/* closing */
	.wec-closing {
		justify-content: center;
	}

	.wec-closing__logo .wec-logo {
		width: 13em;
	}

	.wec-closing__title {
		margin-top: .9em;
		font-size: 1.45em;
		letter-spacing: .22em;
	}

	.wec-closing__lead {
		margin-top: 1.1em;
		font-size: .92em;
	}

	.wec-contact {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: min(100%, 22em);
		gap: .6em;
		margin-top: 1.5em;
	}

	.wec-contact .wec-btn {
		min-height: 2.9em;
		padding: .6em .8em;
		font-size: .9em;
		letter-spacing: .06em;
	}

	.wec-contact .wec-btn:first-child {
		grid-column: 1 / -1;
		font-size: 1em;
	}

	.wec-closing__meta {
		flex-direction: column;
		align-items: center;
		gap: .4em;
		margin-top: 1.3em;
		font-size: .85em;
	}

	.wec-closing__back {
		margin-top: 1em;
		gap: 1.2em;
	}

	/* lightbox */
	.wec-lightbox__stage {
		inset: 4em .5em 5.5em;
	}

	.wec-lightbox__prev,
	.wec-lightbox__next {
		top: auto;
		bottom: 1.2em;
		margin-top: 0;
		width: 2.6em;
		height: 2.6em;
	}

	.wec-lightbox__bar {
		bottom: 1.3em;
		padding: 0 4em;
	}

	.wec-lightbox__cap {
		font-size: .85em;
	}
}

/* 直向平板：字大一點、畫面寬一點 */
@media (min-width: 700px) and (max-aspect-ratio: 5/6) {
	.wec {
		--pad-x: 3em;
		font-size: clamp(14px, min(2.4vw, 1.85vh), 24px);
	}

	.wec-slider {
		--sh: 21em;
	}

	.wec-toc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1em;
	}

	.wec-detail {
		top: 13em;
	}
}

/* 高度很矮（橫向手機） */
@media (max-height: 520px) and (min-aspect-ratio: 5/6) {
	.wec {
		--pad-t: 3.6em;
		--pad-x: 5.2em;
		--pad-b: 4.4em;
		font-size: clamp(8px, min(1.15vw, 2.35vh), 13px);
	}

	.wec-pager {
		left: 1em;
		bottom: .8em;
	}

	.wec-pager__info {
		display: none;
	}

	.wec-brand {
		top: 1em;
	}

	.wec-scrollhint {
		display: none;
	}

	.wec-slider {
		--sh: 24em;
	}

	.wec-grid--feature .wec-head {
		margin-bottom: 1.2em;
	}

	.wec-desc {
		margin-top: 1.6em;
	}

	.wec-src {
		--c: 10em;
	}

	.wec-callout {
		margin-top: 1.2em;
	}

	.wec-case__img {
		height: 16em;
	}
}

/* 手機矮螢幕：隱藏次要內容 */
@media (max-width: 767px) and (max-height: 700px) {
	.wec-toc .wec-lead {
		font-size: .9em;
		line-height: 1.6;
	}

	.wec-card {
		padding: .7em .5em .6em;
		gap: .4em;
	}

	.wec-card__img {
		width: 4em;
		height: 4em;
	}
}

@media (max-width: 767px) and (max-height: 620px) {
	.wec-kicker__en,
	.wec-toc__tip,
	.wec-cover__sub {
		display: none;
	}

	.wec-slider {
		--sh: 13.5em;
	}

	.wec-detail {
		top: 7.8em;
	}
}

/* 無 hover 裝置：不顯示提示泡泡 */
@media (hover: none) {
	.wec-dots__item span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wec *,
	.wec *::before,
	.wec *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.wec-a,
	.wec-char {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
}