/**
 * Nexza motion layer. Ported from the approved design.
 *
 * Rules: animate transform, opacity and clip-path only; hidden starting
 * states apply only under html.nx-js (set by the inline head script), so
 * content stays visible when JavaScript is off or fails.
 */

/* ---------- Split headings (nx-split) ---------- */
.nx-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: .1em;
	margin-bottom: -.1em;
}

.nx-w > span {
	display: inline-block;
}

.nx-js .nx-split .nx-w > span {
	transform: translateY(108%) rotate(4deg);
	transform-origin: 0 100%;
	transition: transform 1.05s var(--nx-ease) calc(var(--nx-i, 0) * 38ms);
}

.nx-js .nx-split.is-in .nx-w > span {
	transform: none;
}

/* ---------- Scroll-lit words (nx-scrub) ---------- */
.nx-js .nx-sw {
	opacity: .16;
	transition: opacity .35s ease;
}

.nx-js .nx-sw.is-on {
	opacity: 1;
}

/* ---------- Fade-up items (nx-stagger children, nx-rv) ---------- */
.nx-js .nx-rv {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .9s ease var(--nx-d, 0s), transform 1.1s var(--nx-ease) var(--nx-d, 0s);
}

.nx-js .nx-rv.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- Image wipe (nx-reveal-img) ---------- */
.nx-js .nx-reveal-img {
	clip-path: inset(100% 0 0 0 round var(--nx-radius-card));
	transition: clip-path 1.35s var(--nx-ease-io);
}

.nx-js .nx-reveal-img.is-in {
	clip-path: inset(0 0 0 0 round var(--nx-radius-card));
}

/* ---------- Scroll grow (nx-grow): scale set by motion.js ---------- */
.nx-js .nx-grow {
	scale: .84;
	will-change: scale;
}

/* ---------- Magnetic and tilt ---------- */
.nx-btn,
.nx-magnetic {
	transition: translate .5s var(--nx-ease), background-color .3s, border-color .3s, color .3s;
}

.nx-tilt {
	transition: transform .6s var(--nx-ease);
}

/* ---------- Header hide on scroll + progress line ---------- */
.nx-header {
	transition: transform .55s var(--nx-ease-io);
}

.nx-header.is-hidden {
	transform: translateY(calc(-100% - env(safe-area-inset-top)));
}

.nx-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--nx-copper);
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- Custom cursor (fine pointers only, added by motion.js) ---------- */
.nx-has-cursor,
.nx-has-cursor * {
	cursor: none !important;
}

.nx-has-cursor input,
.nx-has-cursor textarea,
.nx-has-cursor select,
.nx-has-cursor [contenteditable] {
	cursor: text !important;
}

.nx-cur,
.nx-cur-r {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 220;
	border-radius: 50%;
	pointer-events: none;
}

.nx-cur {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: var(--nx-copper);
	transition: opacity .2s;
}

/* The ring is drawn at its largest size and scaled down, so size changes stay on transform. */
.nx-cur-r {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	margin: -52px 0 0 -52px;
}

.nx-cur-r::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2.5px solid rgba(251, 248, 244, .3);
	border-radius: 50%;
	transform: scale(.4);
	transition: transform .4s var(--nx-ease), background-color .3s, border-color .3s;
}

.nx-cur-r.is-link::before {
	transform: scale(.64);
	border-color: var(--nx-copper);
}

.nx-cur-r.is-big::before {
	transform: scale(1);
	background: var(--nx-copper);
	border-color: var(--nx-copper);
}

.nx-cur-r b {
	position: relative;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nx-ink);
	opacity: 0;
	transition: opacity .2s;
}

.nx-cur-r.is-big b {
	opacity: 1;
}

.nx-cur-r.is-big ~ .nx-cur {
	opacity: 0;
}

/* ---------- Page curtain ---------- */
.nx-curtain {
	position: fixed;
	inset: 0;
	z-index: 250;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--nx-copper);
	color: var(--nx-ink);
	pointer-events: none;
	transform: scaleY(0);
	transform-origin: bottom;
}

.nx-curtain svg {
	animation: nx-spin 1.6s linear infinite;
}

.nx-curtain-label {
	font-size: clamp(40px, 6vw, 96px);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .3s, transform .5s var(--nx-ease);
}

.nx-curtain.is-on,
.nx-curtain-in .nx-curtain {
	transform: scaleY(1);
}

.nx-curtain.is-on {
	transition: transform .55s var(--nx-ease-io);
}

.nx-curtain.is-on .nx-curtain-label,
.nx-curtain-in .nx-curtain-label {
	opacity: 1;
	transform: none;
	transition-delay: .2s;
}

.nx-curtain-in .nx-curtain {
	transform-origin: top;
}

.nx-curtain.is-off {
	transform-origin: top;
	transition: transform .65s var(--nx-ease-io);
}

/* ---------- Preloader (first visit per session) ---------- */
.nx-pl {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	background: var(--nx-ink);
	animation: nx-pl-out 1s var(--nx-ease-io) 1.6s forwards, nx-gone 0s 2.7s forwards;
}

.nx-pl-seen .nx-pl {
	display: none;
}

.nx-pl-in {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nx-pl svg {
	width: 112px;
	height: 112px;
	color: var(--nx-copper);
}

.nx-pl-ring {
	transform-origin: 50% 50%;
	transform: scale(.6);
	opacity: 0;
	animation: nx-pop .9s var(--nx-ease) .1s forwards;
}

.nx-pl-burst {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0) rotate(-140deg);
	animation: nx-pop 1s cubic-bezier(.2, .9, .25, 1.15) .5s forwards;
}

.nx-pl-word {
	display: flex;
	gap: .06em;
	margin-top: 22px;
	overflow: hidden;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--nx-sand);
}

.nx-pl-word span {
	transform: translateY(110%);
	animation: nx-pop .8s var(--nx-ease) calc(.7s + var(--i) * 60ms) forwards;
}

/* ---------- Grain ---------- */
.nx-grain {
	position: fixed;
	inset: -50%;
	z-index: 150;
	opacity: .05;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: nx-grain 1.2s steps(4) infinite;
}

/* ---------- Keyframes ---------- */
@keyframes nx-spin {
	to { transform: rotate(360deg); }
}

@keyframes nx-pop {
	to { transform: none; opacity: 1; }
}

@keyframes nx-pl-out {
	to { clip-path: inset(0 0 100% 0); }
}

@keyframes nx-gone {
	to { visibility: hidden; pointer-events: none; }
}

@keyframes nx-grain {
	25% { transform: translate(-3%, 2%); }
	50% { transform: translate(2%, -3%); }
	75% { transform: translate(-2%, -1%); }
}

/* ---------- Reduced motion: show everything, run nothing ---------- */
@media (prefers-reduced-motion: reduce) {
	.nx-pl,
	.nx-grain,
	.nx-curtain,
	.nx-cur,
	.nx-cur-r {
		display: none !important;
	}

	.nx-curtain svg {
		animation: none;
	}

	.nx-rv,
	.nx-reveal-img,
	.nx-split .nx-w > span,
	.nx-grow {
		opacity: 1 !important;
		transform: none !important;
		scale: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.nx-sw {
		opacity: 1 !important;
	}
}