/* ==========================================================================
   Site-wide motion layer — inner pages (homepage keeps showcase.css).
   Pairs with assets/js/site-motion.js. Hidden states are only ever added
   by that script, so without JS everything is simply visible.
   ========================================================================== */

/* Cube cursor */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	body.kleyman-cube-cursor-active,
	body.kleyman-cube-cursor-active * { cursor: none !important; }
	body.kleyman-cube-cursor-active input,
	body.kleyman-cube-cursor-active textarea { cursor: text !important; }
	.kleyman-cube-cursor {
		position: fixed; top: 0; left: 0;
		width: 26px; height: 26px; margin: -13px 0 0 -13px;
		pointer-events: none; z-index: 10001; opacity: 0;
		will-change: transform, opacity; transition: opacity .25s ease;
	}
	.kleyman-cube-cursor.is-visible { opacity: 1; }
	.kleyman-cube-cursor__shape { display: block; width: 100%; height: 100%; transition: transform .35s var(--kleyman-ease, ease); }
	.kleyman-cube-cursor.is-hover .kleyman-cube-cursor__shape { transform: rotate(45deg) scale(1.6); }
	.kleyman-cube-cursor__shape svg { width: 100%; height: 100%; display: block; }
	.kleyman-cube-cursor__shape path { fill: none; stroke: var(--kleyman-dark); stroke-width: 1.4; }
	.kleyman-cube-cursor.is-hover .kleyman-cube-cursor__shape path { stroke: var(--kleyman-green); }
	.kleyman-cube-cursor.is-on-dark .kleyman-cube-cursor__shape path { stroke: #fff; }
	.kleyman-cube-cursor.is-on-dark.is-hover .kleyman-cube-cursor__shape path { stroke: var(--kleyman-green); }

	.kleyman-magnetic {
		transform: translate(var(--mx, 0), var(--my, 0));
		transition: transform .25s var(--kleyman-ease, ease), background-color .2s ease, color .2s ease, border-color .2s ease, gap .2s ease;
	}
}

/* Scroll rail */
.kleyman-scroll-rail {
	position: fixed; top: 50%; inset-inline-end: 22px; transform: translateY(-50%);
	width: 2px; height: 220px; border-radius: 2px;
	background: rgba(12, 22, 58, .1); z-index: 500; display: none;
}
.kleyman-scroll-rail__fill {
	position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 0;
	border-radius: 2px; background: linear-gradient(180deg, var(--kleyman-blue), var(--kleyman-green));
}
.kleyman-scroll-rail__joint {
	position: absolute; inset-inline-start: 50%; top: 0; width: 9px; height: 9px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: #fff; border: 1.5px solid var(--kleyman-green);
}
@media (min-width: 1200px) and (hover: hover) { .kleyman-scroll-rail { display: block; } }

/* Heading rise */
.kleyman-rise { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
.kleyman-rise.is-revealed {
	opacity: 1; transform: none; clip-path: inset(0 0 -10% 0);
	transition: opacity .7s ease, transform .9s var(--kleyman-ease, cubic-bezier(.22,.61,.36,1)), clip-path .9s var(--kleyman-ease, cubic-bezier(.22,.61,.36,1));
}

/* Image curtain — the frame opens from the bottom, the image settles from a slight zoom */
.kleyman-curtain { clip-path: inset(100% 0 0 0 round 18px); }
.kleyman-curtain img, .kleyman-curtain video { transform: scale(1.12); }
.kleyman-curtain.is-revealed {
	clip-path: inset(0 0 0 0 round 18px);
	transition: clip-path 1s var(--kleyman-ease, cubic-bezier(.22,.61,.36,1));
}
.kleyman-curtain.is-revealed img, .kleyman-curtain.is-revealed video {
	transform: scale(1);
	transition: transform 1.4s var(--kleyman-ease, cubic-bezier(.22,.61,.36,1));
}

@media (prefers-reduced-motion: reduce) {
	.kleyman-rise, .kleyman-curtain { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.kleyman-curtain img, .kleyman-curtain video { transform: none !important; }
	.kleyman-scroll-rail, .kleyman-cube-cursor { display: none !important; }
}
@media (max-width: 1024px) {
	.kleyman-cube-cursor { display: none !important; }
}