:root {
	--wlt-motion-duration: 850ms;
	--wlt-motion-distance: 28px;
	--wlt-motion-stagger: 42ms;
	--wlt-motion-accent: #b29461;
	--wlt-page-fade-duration: 240ms;
	--wlt-page-fade-start-opacity: 0;
	--wlt-motion-ease: cubic-bezier(.22, 1, .36, 1);
	--wlt-element-delay: 0ms;
}

/*
 * Native cross-document transitions: the old page stays visible underneath
 * until the new page is ready. Every preset therefore includes a real
 * crossfade instead of a delayed hard navigation.
 */
html.wlt-native-vt::view-transition-group(root) {
	animation-duration: var(--wlt-page-fade-duration);
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

html.wlt-native-vt::view-transition-image-pair(root) {
	isolation: isolate;
}

html.wlt-native-vt::view-transition-old(root),
html.wlt-native-vt::view-transition-new(root) {
	animation-duration: var(--wlt-page-fade-duration);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1);
	mix-blend-mode: normal;
}

html.wlt-native-vt::view-transition-old(root) {
	z-index: 1;
	animation-name: wlt-vt-old-hold;
}

html.wlt-native-vt::view-transition-new(root) {
	z-index: 2;
	animation-name: wlt-vt-new-fade;
}

html.wlt-native-vt.wlt-page-effect--rise::view-transition-new(root) { animation-name: wlt-vt-new-rise; }
html.wlt-native-vt.wlt-page-effect--descend::view-transition-new(root) { animation-name: wlt-vt-new-descend; }
html.wlt-native-vt.wlt-page-effect--slide_left::view-transition-new(root) { animation-name: wlt-vt-new-left; }
html.wlt-native-vt.wlt-page-effect--slide_right::view-transition-new(root) { animation-name: wlt-vt-new-right; }
html.wlt-native-vt.wlt-page-effect--zoom_in::view-transition-new(root) { animation-name: wlt-vt-new-zoom-in; }
html.wlt-native-vt.wlt-page-effect--zoom_out::view-transition-new(root) { animation-name: wlt-vt-new-zoom-out; }
html.wlt-native-vt.wlt-page-effect--blur::view-transition-new(root) { animation-name: wlt-vt-new-focus; }
html.wlt-native-vt.wlt-page-effect--desaturate::view-transition-new(root) { animation-name: wlt-vt-new-color; }
html.wlt-native-vt.wlt-page-effect--clip::view-transition-new(root) { animation-name: wlt-vt-new-paper; }

@keyframes wlt-vt-old-hold {
	0%, 78% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes wlt-vt-new-fade {
	from { opacity: var(--wlt-page-fade-start-opacity); }
	to { opacity: 1; }
}

@keyframes wlt-vt-new-rise {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: translate3d(0, 10px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes wlt-vt-new-descend {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: translate3d(0, -10px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes wlt-vt-new-left {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: translate3d(12px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes wlt-vt-new-right {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: translate3d(-12px, 0, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes wlt-vt-new-zoom-in {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: scale(.985); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes wlt-vt-new-zoom-out {
	from { opacity: var(--wlt-page-fade-start-opacity); transform: scale(1.015); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes wlt-vt-new-focus {
	from { opacity: var(--wlt-page-fade-start-opacity); filter: blur(5px); }
	to { opacity: 1; filter: blur(0); }
}

@keyframes wlt-vt-new-color {
	from { opacity: var(--wlt-page-fade-start-opacity); filter: saturate(.55); }
	to { opacity: 1; filter: saturate(1); }
}

@keyframes wlt-vt-new-paper {
	from { opacity: var(--wlt-page-fade-start-opacity); clip-path: inset(0 0 7% 0); }
	to { opacity: 1; clip-path: inset(0); }
}

/*
 * Page changes only touch the primary <main> surface. The body, admin bar and
 * fixed widgets (including the Miaoling AI assistant) always remain visible.
 */
html.wlt-page-fade-ready:not(.wlt-native-vt):not(.wlt-page-fade-in):not(.wlt-page-exit) main:first-of-type,
html.wlt-page-fade-ready:not(.wlt-native-vt):not(.wlt-page-fade-in) .wlt-page-surface {
	opacity: .62;
}

.wlt-page-surface {
	transform-origin: center center;
	backface-visibility: hidden;
	transition:
		opacity var(--wlt-page-fade-duration) ease,
		transform var(--wlt-page-fade-duration) cubic-bezier(.22,1,.36,1),
		filter var(--wlt-page-fade-duration) ease,
		clip-path var(--wlt-page-fade-duration) cubic-bezier(.22,1,.36,1);
}

html.wlt-page-effect--rise:not(.wlt-page-fade-in) .wlt-page-surface { transform: translate3d(0, 4px, 0); }
html.wlt-page-effect--descend:not(.wlt-page-fade-in) .wlt-page-surface { transform: translate3d(0, -4px, 0); }
html.wlt-page-effect--slide_left:not(.wlt-page-fade-in) .wlt-page-surface { transform: translate3d(5px, 0, 0); }
html.wlt-page-effect--slide_right:not(.wlt-page-fade-in) .wlt-page-surface { transform: translate3d(-5px, 0, 0); }
html.wlt-page-effect--zoom_in:not(.wlt-page-fade-in) .wlt-page-surface { transform: scale(.997); }
html.wlt-page-effect--zoom_out:not(.wlt-page-fade-in) .wlt-page-surface { transform: scale(1.004); }
html.wlt-page-effect--blur:not(.wlt-page-fade-in) .wlt-page-surface { filter: blur(1.8px); }
html.wlt-page-effect--desaturate:not(.wlt-page-fade-in) .wlt-page-surface { filter: saturate(.9); }
html.wlt-page-effect--clip:not(.wlt-page-fade-in) .wlt-page-surface { clip-path: inset(0 0 .6% 0); }

html.wlt-page-fade-ready.wlt-page-fade-in .wlt-page-surface {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}

html.wlt-page-fade-ready.wlt-page-exit .wlt-page-surface { opacity: .45 !important; }
html.wlt-page-effect--rise.wlt-page-exit .wlt-page-surface { transform: translate3d(0, -3px, 0); }
html.wlt-page-effect--descend.wlt-page-exit .wlt-page-surface { transform: translate3d(0, 3px, 0); }
html.wlt-page-effect--slide_left.wlt-page-exit .wlt-page-surface { transform: translate3d(-4px, 0, 0); }
html.wlt-page-effect--slide_right.wlt-page-exit .wlt-page-surface { transform: translate3d(4px, 0, 0); }
html.wlt-page-effect--zoom_in.wlt-page-exit .wlt-page-surface { transform: scale(1.003); }
html.wlt-page-effect--zoom_out.wlt-page-exit .wlt-page-surface { transform: scale(.998); }
html.wlt-page-effect--blur.wlt-page-exit .wlt-page-surface { filter: blur(1.5px); }
html.wlt-page-effect--desaturate.wlt-page-exit .wlt-page-surface { filter: saturate(.88); }
html.wlt-page-effect--clip.wlt-page-exit .wlt-page-surface { clip-path: inset(.6% 0 0 0); }

.wlt-reveal {
	will-change: opacity, transform, clip-path, filter;
	backface-visibility: hidden;
}

/* 01 — Velvet Rise: a quiet masked lift for large editorial headings. */
.wlt-heading-reveal.wlt-effect--velvet {
	opacity: 0;
	clip-path: inset(0 0 100% 0);
	transform: translate3d(0, var(--wlt-motion-distance), 0);
}

.wlt-heading-reveal.wlt-effect--velvet.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .58) ease var(--wlt-element-delay),
		transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay),
		clip-path var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-heading-reveal.wlt-effect--velvet.wlt-inview {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: translate3d(0, 0, 0);
}

/* 02 — Staged Letters: direct character spans preserve natural line breaks. */
.wlt-heading-reveal.wlt-effect--staged {
	opacity: 1;
	filter: none;
	transform: none;
}

.wlt-effect--staged .wlt-char-run {
	display: inline-block;
	white-space: nowrap;
}

.wlt-effect--staged .wlt-char {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, .48em, 0) scale(.985);
	transform-origin: center bottom;
}

.wlt-effect--staged.wlt-animate .wlt-char {
	transition:
		opacity calc(var(--wlt-motion-duration) * .46) ease calc(var(--wlt-element-delay) + (var(--wlt-char-index) * var(--wlt-motion-stagger))),
		filter calc(var(--wlt-motion-duration) * .62) ease calc(var(--wlt-element-delay) + (var(--wlt-char-index) * var(--wlt-motion-stagger))),
		transform calc(var(--wlt-motion-duration) * .72) var(--wlt-motion-ease) calc(var(--wlt-element-delay) + (var(--wlt-char-index) * var(--wlt-motion-stagger)));
}

.wlt-effect--staged.wlt-inview .wlt-char {
	opacity: 1;
	filter: none;
	transform: none;
}

/* 03 — Gilded Sweep: a hairline leads the reveal. */
.wlt-heading-reveal.wlt-effect--goldline {
	position: relative;
	opacity: 1;
	clip-path: inset(0 100% 0 0);
}

.wlt-heading-reveal.wlt-effect--goldline.wlt-animate {
	transition: clip-path calc(var(--wlt-motion-duration) * .95) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-heading-reveal.wlt-effect--goldline::after {
	content: "";
	position: absolute;
	top: .06em;
	bottom: .06em;
	left: 0;
	z-index: 2;
	width: 1px;
	background: var(--wlt-motion-accent);
	box-shadow: 0 0 18px color-mix(in srgb, var(--wlt-motion-accent) 58%, transparent);
	opacity: 0;
	pointer-events: none;
}

.wlt-heading-reveal.wlt-effect--goldline.wlt-inview {
	clip-path: inset(0 0 0 0);
}

.wlt-heading-reveal.wlt-effect--goldline.wlt-inview::after {
	animation: wlt-gold-sweep calc(var(--wlt-motion-duration) * .95) var(--wlt-motion-ease) var(--wlt-element-delay) both;
}

@keyframes wlt-gold-sweep {
	0% { left: 0; opacity: 0; }
	8% { opacity: 1; }
	84% { opacity: .9; }
	100% { left: 100%; opacity: 0; }
}

/* 04 — Soft Focus: an atmospheric photographic focus pull. */
.wlt-heading-reveal.wlt-effect--focus {
	opacity: 0;
	filter: blur(11px);
	transform: scale(.975);
	transform-origin: left center;
}

.wlt-heading-reveal.wlt-effect--focus.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .72) ease var(--wlt-element-delay),
		filter var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay),
		transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-heading-reveal.wlt-effect--focus.wlt-inview {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

/* 05 — Editorial Slide: ruled, offset and magazine-like. */
.wlt-heading-reveal.wlt-effect--editorial {
	position: relative;
	opacity: 0;
	transform: translate3d(calc(var(--wlt-motion-distance) * -1), 0, 0);
}

.wlt-heading-reveal.wlt-effect--editorial.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .56) ease calc(var(--wlt-element-delay) + 90ms),
		transform var(--wlt-motion-duration) var(--wlt-motion-ease) calc(var(--wlt-element-delay) + 90ms);
}

.wlt-heading-reveal.wlt-effect--editorial::before {
	content: "";
	position: absolute;
	top: .12em;
	bottom: .12em;
	left: -.38em;
	width: 1px;
	background: var(--wlt-motion-accent);
	transform: scaleY(0);
	transform-origin: top;
}

.wlt-heading-reveal.wlt-effect--editorial.wlt-animate::before {
	transition: transform calc(var(--wlt-motion-duration) * .72) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-heading-reveal.wlt-effect--editorial.wlt-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.wlt-heading-reveal.wlt-effect--editorial.wlt-inview::before {
	transform: scaleY(1);
}

/* 06 — Quiet Fade. */
.wlt-heading-reveal.wlt-effect--fade { opacity: 0; }
.wlt-heading-reveal.wlt-effect--fade.wlt-animate { transition: opacity calc(var(--wlt-motion-duration) * .78) ease var(--wlt-element-delay); }
.wlt-heading-reveal.wlt-effect--fade.wlt-inview { opacity: 1; }

/* 07 — Tracking Settle. */
.wlt-heading-reveal.wlt-effect--tracking {
	opacity: 0;
	transform: scaleX(1.035);
	transform-origin: left center;
}
.wlt-heading-reveal.wlt-effect--tracking.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .7) ease var(--wlt-element-delay),
		transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay);
}
.wlt-heading-reveal.wlt-effect--tracking.wlt-inview { opacity: 1; transform: none; }

/* 08 — Underline Draw. */
.wlt-heading-reveal.wlt-effect--underline {
	position: relative;
	opacity: 0;
	transform: translate3d(0, 6px, 0);
}
.wlt-heading-reveal.wlt-effect--underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.14em;
	width: min(3.2em, 38%);
	height: 1px;
	background: var(--wlt-motion-accent);
	transform: scaleX(0);
	transform-origin: left;
}
.wlt-heading-reveal.wlt-effect--underline.wlt-animate {
	transition: opacity calc(var(--wlt-motion-duration) * .62) ease var(--wlt-element-delay), transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay);
}
.wlt-heading-reveal.wlt-effect--underline.wlt-animate::after { transition: transform calc(var(--wlt-motion-duration) * .86) var(--wlt-motion-ease) calc(var(--wlt-element-delay) + 110ms); }
.wlt-heading-reveal.wlt-effect--underline.wlt-inview { opacity: 1; transform: none; }
.wlt-heading-reveal.wlt-effect--underline.wlt-inview::after { transform: scaleX(1); }

/* 09 — Soft Wipe. */
.wlt-heading-reveal.wlt-effect--wipe {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
}
.wlt-heading-reveal.wlt-effect--wipe.wlt-animate { transition: clip-path var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay); }
.wlt-heading-reveal.wlt-effect--wipe.wlt-inview { clip-path: inset(0 0 0 0); }

/* 10 — Gentle Drift. */
.wlt-heading-reveal.wlt-effect--drift {
	opacity: 0;
	transform: translate3d(0, calc(var(--wlt-motion-distance) * -.58), 0);
}
.wlt-heading-reveal.wlt-effect--drift.wlt-animate { transition: opacity calc(var(--wlt-motion-duration) * .66) ease var(--wlt-element-delay), transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay); }
.wlt-heading-reveal.wlt-effect--drift.wlt-inview { opacity: 1; transform: none; }

/* Small headings and supporting copy use a quieter, layout-safe reveal. */
.wlt-detail-reveal {
	opacity: 0;
	filter: blur(1px);
	transform: translate3d(0, min(9px, calc(var(--wlt-motion-distance) * .32)), 0);
}

.wlt-detail-reveal.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .72) ease var(--wlt-element-delay),
		filter calc(var(--wlt-motion-duration) * .62) ease var(--wlt-element-delay),
		transform calc(var(--wlt-motion-duration) * .78) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-detail-reveal.wlt-inview {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Optional image reveal: no wrapper and no layout shift. */
.wlt-image-reveal {
	opacity: 0;
	clip-path: inset(100% 0 0 0 round 1px);
	transform: scale(1.025);
	transform-origin: center;
}

.wlt-image-reveal.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .55) ease var(--wlt-element-delay),
		clip-path calc(var(--wlt-motion-duration) * 1.12) var(--wlt-motion-ease) var(--wlt-element-delay),
		transform calc(var(--wlt-motion-duration) * 1.18) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-image-reveal.wlt-inview {
	opacity: 1;
	clip-path: inset(0 0 0 0 round 1px);
	transform: scale(1);
}

/* Optional content-block reveal, intentionally quieter than the headings. */
.wlt-section-reveal {
	opacity: 0;
	transform: translate3d(0, calc(var(--wlt-motion-distance) * .72), 0);
}

.wlt-section-reveal.wlt-animate {
	transition:
		opacity calc(var(--wlt-motion-duration) * .74) ease var(--wlt-element-delay),
		transform var(--wlt-motion-duration) var(--wlt-motion-ease) var(--wlt-element-delay);
}

.wlt-section-reveal.wlt-inview {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@supports not (clip-path: inset(0)) {
	.wlt-heading-reveal.wlt-effect--velvet,
	.wlt-heading-reveal.wlt-effect--goldline,
	.wlt-image-reveal {
		clip-path: none;
	}
}

@media (max-width: 767px) {
	:root {
		--wlt-motion-distance: min(22px, var(--wlt-motion-distance));
		--wlt-motion-stagger: min(34ms, var(--wlt-motion-stagger));
	}

	.wlt-heading-reveal.wlt-effect--editorial::before {
		left: -.22em;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.wlt-page-fade-ready main:first-of-type,
	html.wlt-page-fade-ready .wlt-page-surface {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.wlt-reveal {
		opacity: 1 !important;
		clip-path: none !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}