/**
 * DIANKE architectural motion system.
 *
 * Progressive enhancement only: every hidden or transformed state is gated by
 * `.motion-enabled`, which is added after the runtime has passed its capability
 * checks. Reduced-motion and data-saving visitors receive the static design.
 */

:root {
	--dianke-motion-gold: #bd9258;
	--dianke-motion-line: rgba(189, 146, 88, 0.24);
	--dianke-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dianke-motion-impact-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dianke-motion-header-offset: calc(var(--dianke-header, 5rem) + 1.5rem);
}

body.motion-intro-lock {
	overflow: hidden;
}

.motion-stage {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 9999;
}

.motion-stage::after {
	background: var(--dianke-motion-gold);
	content: "";
	height: 100%;
	left: 50%;
	top: 0;
	position: absolute;
	transform: scaleY(1);
	transform-origin: 50% 0;
	transition: transform 760ms var(--dianke-motion-impact-ease) 180ms;
	width: 1px;
}

.motion-stage.is-releasing::after {
	transform: scaleY(0);
}

.motion-stage__panel {
	background: #0b0b0a;
	border-inline-end: 1px solid rgba(189, 146, 88, 0.28);
	transform: translateY(0);
	transition: transform 1180ms var(--dianke-motion-impact-ease) var(--motion-stage-delay, 0ms);
}

.motion-stage__panel:nth-child(even) {
	background: #15110d;
}

.motion-stage.is-releasing .motion-stage__panel:nth-child(odd) {
	transform: translateY(-101%);
}

.motion-stage.is-releasing .motion-stage__panel:nth-child(even) {
	transform: translateY(101%);
}

.motion-intro-active .stone-hero__media {
	filter: contrast(1.18) saturate(0.72);
	transform: scale(1.14);
	transition:
		filter 1600ms ease 320ms,
		transform 1800ms var(--dianke-motion-impact-ease) 220ms;
}

.motion-intro-active .stone-hero__content > * {
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	transform: translate3d(0, 4.5rem, 0);
}

.motion-intro-active.motion-intro-release .stone-hero__media {
	filter: contrast(1) saturate(1);
	transform: scale(1.035);
}

.motion-intro-active.motion-intro-release .stone-hero__content > * {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		clip-path 1050ms var(--dianke-motion-impact-ease) var(--motion-intro-delay, 620ms),
		opacity 600ms ease var(--motion-intro-delay, 620ms),
		transform 1250ms var(--dianke-motion-impact-ease) var(--motion-intro-delay, 620ms);
}

.motion-intro-active .stone-hero__content > :nth-child(2) {
	--motion-intro-delay: 760ms;
}

.motion-intro-active .stone-hero__content > :nth-child(3) {
	--motion-intro-delay: 900ms;
}

.motion-hero-active .stone-hero__media {
	transform: translate3d(0, var(--motion-hero-media-y, 0px), 0) scale(var(--motion-hero-scale, 1.035));
	transform-origin: 50% 50%;
	will-change: transform;
}

.motion-hero-active .stone-hero__content {
	opacity: var(--motion-hero-opacity, 1);
	transform: translate3d(0, var(--motion-hero-copy-y, 0px), 0);
	will-change: opacity, transform;
}

.motion-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	inset: 0;
	opacity: 1;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transition: opacity 520ms ease;
	z-index: 4;
}

.motion-grid.is-motion-complete {
	opacity: 0;
}

.motion-grid__line {
	border-inline-start: 1px solid var(--dianke-motion-line);
	opacity: 0;
	transform: scaleY(0);
	transform-origin: 50% 0;
}

.motion-grid__line:last-child {
	border-inline-end: 1px solid var(--dianke-motion-line);
}

.motion-enabled .is-motion-visible > .motion-grid .motion-grid__line,
.motion-enabled .motion-grid.is-motion-visible .motion-grid__line {
	opacity: 0.68;
	transform: scaleY(1);
	transition:
		transform 980ms var(--dianke-motion-ease) var(--motion-grid-delay, 0ms),
		opacity 520ms ease var(--motion-grid-delay, 0ms);
}

.motion-grid-host {
	isolation: isolate;
	position: relative;
}

.motion-enabled [data-motion-enter] {
	filter: blur(10px);
	opacity: 0;
	transform: translate3d(0, 3.5rem, 0) scale(0.975);
	transition:
		filter 900ms ease var(--motion-delay, 0ms),
		opacity 720ms ease var(--motion-delay, 0ms),
		transform 1250ms var(--dianke-motion-impact-ease) var(--motion-delay, 0ms);
	will-change: filter, opacity, transform;
}

.motion-enabled [data-motion-enter="from-inline-start"] {
	transform: translate3d(-1.75rem, 0, 0);
}

.motion-enabled [data-motion-enter="from-inline-end"] {
	transform: translate3d(1.75rem, 0, 0);
}

.motion-enabled .is-motion-visible [data-motion-enter],
.motion-enabled [data-motion-enter].is-motion-visible {
	filter: blur(0);
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.motion-enabled [data-motion-media] {
	clip-path: polygon(0 0, 0 0, 12% 100%, 0 100%);
	transition: clip-path 1450ms var(--dianke-motion-impact-ease) var(--motion-delay, 80ms);
}

.motion-enabled .is-motion-visible [data-motion-media],
.motion-enabled [data-motion-media].is-motion-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.motion-enabled [data-motion-media] img,
.motion-enabled [data-motion-media] video {
	transform: scale(1.12);
	transition: transform 1900ms var(--dianke-motion-impact-ease) var(--motion-delay, 80ms);
}

.motion-enabled .is-motion-visible [data-motion-media] img,
.motion-enabled .is-motion-visible [data-motion-media] video,
.motion-enabled [data-motion-media].is-motion-visible img,
.motion-enabled [data-motion-media].is-motion-visible video {
	transform: scale(1);
}

.motion-section-sweep {
	background: var(--dianke-motion-gold);
	height: 2px;
	left: 0;
	top: 0;
	pointer-events: none;
	position: absolute;
	transform: scaleX(0);
	transform-origin: 0 50%;
	width: 100%;
	z-index: 12;
}

.motion-enabled [data-motion-section] {
	position: relative;
}

.motion-enabled .is-motion-visible > .motion-section-sweep {
	animation: dianke-section-sweep 1250ms var(--dianke-motion-impact-ease) both;
}

@keyframes dianke-section-sweep {
	0% {
		opacity: 0;
		transform: scaleX(0);
	}
	18% {
		opacity: 1;
	}
	72% {
		opacity: 1;
		transform: scaleX(1);
	}
	100% {
		opacity: 0;
		transform: scaleX(1);
	}
}

.motion-scroll-line {
	background: var(--dianke-motion-gold);
	height: 1px;
	inset: var(--dianke-header, 5rem) 0 auto;
	pointer-events: none;
	position: fixed;
	transform: scaleX(var(--motion-scroll-progress, 0));
	transform-origin: 0 50%;
	z-index: 110;
}

.admin-bar .motion-scroll-line {
	top: calc(var(--dianke-header, 5rem) + 32px);
}

.motion-progress {
	align-items: center;
	display: grid;
	gap: 0;
	left: clamp(0.6rem, 1.35vw, 1.6rem);
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
}

.motion-progress::before {
	background: rgba(189, 146, 88, 0.28);
	content: "";
	inset: 1.1rem auto 1.1rem 0.22rem;
	position: absolute;
	width: 1px;
}

.motion-progress__link {
	align-items: center;
	color: rgba(236, 230, 218, 0.54);
	display: grid;
	font-family: var(--dianke-sans, "Manrope", sans-serif);
	font-size: 0.58rem;
	font-weight: 700;
	grid-template-columns: 0.5rem 1fr;
	letter-spacing: 0.12em;
	min-height: 2.2rem;
	position: relative;
	text-decoration: none;
	transition: color 220ms ease;
}

.motion-progress__link::before {
	background: #0b0b0a;
	border: 1px solid rgba(189, 146, 88, 0.5);
	content: "";
	display: block;
	height: 0.38rem;
	position: relative;
	width: 0.38rem;
	z-index: 1;
}

.motion-progress__link span {
	opacity: 0;
	padding-inline-start: 0.45rem;
	transform: translateX(-0.25rem);
	transition: opacity 220ms ease, transform 220ms ease;
}

.motion-progress__link:hover,
.motion-progress__link:focus-visible,
.motion-progress__link.is-active {
	color: var(--dianke-bone, #ece6da);
}

.motion-progress__link:hover span,
.motion-progress__link:focus-visible span,
.motion-progress__link.is-active span {
	opacity: 1;
	transform: translateX(0);
}

.motion-progress__link.is-active::before {
	background: var(--dianke-motion-gold);
	border-color: var(--dianke-motion-gold);
	box-shadow: 0 0 0 0.28rem rgba(189, 146, 88, 0.15);
}

.motion-cursor {
	align-items: center;
	-webkit-backdrop-filter: blur(0.45rem);
	backdrop-filter: blur(0.45rem);
	background: rgba(11, 11, 10, 0.82);
	border: 1px solid rgba(189, 146, 88, 0.72);
	color: var(--dianke-motion-bone);
	display: flex;
	font-family: var(--dianke-sans, "Manrope", sans-serif);
	font-size: 0.56rem;
	font-weight: 700;
	height: 2.35rem;
	justify-content: center;
	letter-spacing: 0.19em;
	opacity: 0;
	padding: 0 1rem;
	pointer-events: none;
	position: fixed;
	text-transform: uppercase;
	transform: translate3d(-0.55rem, 0.45rem, 0) scale(0.78);
	transition: opacity 160ms ease, transform 360ms var(--dianke-motion-impact-ease), border-color 180ms ease;
	white-space: nowrap;
	width: auto;
	z-index: 220;
}

.motion-cursor.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.motion-enabled .button,
.motion-enabled .wp-element-button,
.motion-enabled .wp-block-button__link,
.motion-enabled button[type="submit"],
.motion-enabled .site-footer__inquiry {
	isolation: isolate;
	position: relative;
}

.motion-enabled .button::after,
.motion-enabled .wp-element-button::after,
.motion-enabled .wp-block-button__link::after,
.motion-enabled button[type="submit"]::after,
.motion-enabled .site-footer__inquiry::after {
	background: currentColor;
	bottom: 0.42rem;
	content: "";
	height: 1px;
	left: 0.85rem;
	position: absolute;
	right: 0.85rem;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 420ms var(--dianke-motion-ease);
}

.motion-enabled .button:hover::after,
.motion-enabled .button:focus-visible::after,
.motion-enabled .wp-element-button:hover::after,
.motion-enabled .wp-element-button:focus-visible::after,
.motion-enabled .wp-block-button__link:hover::after,
.motion-enabled .wp-block-button__link:focus-visible::after,
.motion-enabled button[type="submit"]:hover::after,
.motion-enabled button[type="submit"]:focus-visible::after,
.motion-enabled .site-footer__inquiry:hover::after,
.motion-enabled .site-footer__inquiry:focus-visible::after {
	transform: scaleX(1);
}

.motion-enabled .primary-menu > li > a {
	position: relative;
}

.motion-enabled .primary-menu > li > a::after {
	background: var(--dianke-motion-gold);
	bottom: -0.45rem;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 360ms var(--dianke-motion-ease);
}

.motion-enabled .primary-menu > li > a:hover::after,
.motion-enabled .primary-menu > li > a:focus-visible::after,
.motion-enabled .primary-menu > li.current-menu-item > a::after,
.motion-enabled .primary-menu > li.current_page_item > a::after {
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
	body.home.motion-enabled .stone-hero {
		position: sticky;
		top: 0;
		z-index: 1;
	}

	body.home.motion-enabled .home-master-output {
		background: #0b0b0a;
		border-top: 1px solid var(--dianke-motion-line);
		position: relative;
		z-index: 4;
	}

	.motion-sticky-media {
		position: sticky !important;
		top: var(--dianke-motion-header-offset);
	}

	.motion-enabled .catalog-product-card,
	.motion-enabled .blog-v2-story,
	.motion-enabled .blog-v2-feature,
	.motion-enabled .dkv2-product {
		transform-style: preserve-3d;
		transition: transform 620ms var(--dianke-motion-impact-ease);
		will-change: transform;
	}

	.motion-enabled .catalog-product-card:hover,
	.motion-enabled .blog-v2-story:hover,
	.motion-enabled .blog-v2-feature:hover,
	.motion-enabled .dkv2-product:hover {
		transform:
			perspective(900px)
			translate3d(var(--motion-card-x, 0px), calc(-0.65rem + var(--motion-card-y, 0px)), 0)
			rotateX(var(--motion-card-rx, 0deg))
			rotateY(var(--motion-card-ry, 0deg));
	}

	.motion-enabled .catalog-product-card img,
	.motion-enabled .blog-v2-story img,
	.motion-enabled .blog-v2-feature img,
	.motion-enabled .dkv2-product img {
		transition: transform 900ms var(--dianke-motion-ease);
	}

	.motion-enabled .catalog-product-card:hover img,
	.motion-enabled .blog-v2-story:hover img,
	.motion-enabled .blog-v2-feature:hover img,
	.motion-enabled .dkv2-product:hover img {
		transform: scale(1.055);
	}

	.motion-magnetic {
		transform: translate3d(var(--motion-magnet-x, 0px), var(--motion-magnet-y, 0px), 0);
		transition: transform 420ms var(--dianke-motion-impact-ease);
	}
}

@media (max-width: 1180px), (hover: none), (pointer: coarse) {
	.motion-progress {
		display: none;
	}

	.motion-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.motion-grid__line:nth-child(n + 7) {
		display: none;
	}
}

@media (max-width: 782px) {
	.admin-bar .motion-scroll-line {
		top: calc(var(--dianke-header, 5rem) + 46px);
	}
}

@media (max-width: 760px) {
	.motion-stage {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.motion-stage__panel:nth-child(n + 5) {
		display: none;
	}

	.motion-scroll-line {
		top: var(--dianke-header-mobile, 4.5rem);
	}

	.motion-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.motion-grid__line:nth-child(n + 5) {
		display: none;
	}

	.motion-enabled [data-motion-enter],
	.motion-enabled [data-motion-enter="from-inline-start"],
	.motion-enabled [data-motion-enter="from-inline-end"] {
		filter: blur(4px);
		transform: translate3d(0, 1.4rem, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.motion-grid,
	.motion-progress,
	.motion-scroll-line,
	.motion-stage,
	.motion-cursor,
	.motion-section-sweep {
		display: none !important;
	}

	.motion-enabled [data-motion-enter],
	.motion-enabled [data-motion-media],
	.motion-enabled .catalog-product-card,
	.motion-enabled .blog-v2-story,
	.motion-enabled .blog-v2-feature,
	.motion-enabled .dkv2-product,
	.motion-enabled .catalog-product-card img,
	.motion-enabled .blog-v2-story img,
	.motion-enabled .blog-v2-feature img,
	.motion-enabled .dkv2-product img {
		clip-path: none !important;
		filter: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.motion-sticky-media {
		position: static !important;
	}

	.motion-enabled .button::after,
	.motion-enabled .wp-element-button::after,
	.motion-enabled .wp-block-button__link::after,
	.motion-enabled button[type="submit"]::after,
	.motion-enabled .site-footer__inquiry::after,
	.motion-enabled .primary-menu > li > a::after {
		transition: none !important;
	}
}