/* =====================================================
   Motion: reveal system, marquee, parallax helpers
   All effects respect prefers-reduced-motion.
   ===================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity .8s var(--ease-out) var(--rd, 0ms),
		transform .8s var(--ease-out) var(--rd, 0ms),
		clip-path 1s var(--ease-out) var(--rd, 0ms);
	will-change: opacity, transform;
}

[data-reveal="scale"] { transform: translateY(24px) scale(.96); }

[data-reveal].is-inview {
	opacity: 1;
	transform: none;
}

/* Image clip reveal for hero/case media */
.n-hero__portrait[data-reveal="scale"],
.n-casepage__media[data-reveal="scale"] {
	clip-path: inset(6% 6% 6% 6% round var(--r-lg));
}

.n-casepage__media.is-inview,
.n-hero__portrait.is-inview {
	clip-path: inset(0 0 0 0 round var(--r-lg));
}

/* ---------- Marquee ---------- */
.n-marquee {
	overflow: clip;
	padding-block: clamp(20px, 3vw, 30px);
	border-block: 1px solid var(--line);
	background: rgba(255, 255, 255, .4);
	-webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}

.n-marquee__track {
	display: flex;
	width: max-content;
	animation: n-marquee 36s linear infinite;
}

.n-marquee:hover .n-marquee__track { animation-play-state: paused; }

.n-marquee__group { display: flex; }

.n-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	margin-inline-end: 44px;
	color: var(--ink-3);
	font-family: var(--font-lt);
	font-size: .92rem;
	letter-spacing: .22em;
	font-weight: 500;
	white-space: nowrap;
}

.n-marquee__item .n-icon { width: 14px; height: 14px; color: var(--coral); }

@keyframes n-marquee {
	to { transform: translateX(-50%); }
}

/* ---------- Floating ambient ---------- */
.n-float,
.n-blob { pointer-events: none; }

@keyframes n-floaty {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}

/* ---------- Scroll hint ---------- */
.n-scrollhint {
	position: absolute;
	inset-block-end: 26px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	display: grid;
	justify-items: center;
	gap: 10px;
	color: var(--ink-3);
	font-size: .78rem;
	letter-spacing: .08em;
	z-index: 3;
}

[dir="rtl"] .n-scrollhint { transform: translateX(-50%); }

.n-scrollhint i {
	width: 1.5px;
	height: 42px;
	background: linear-gradient(var(--indigo), transparent);
	display: block;
	position: relative;
	overflow: hidden;
}

.n-scrollhint i::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -40%;
	height: 40%;
	background: var(--coral);
	animation: n-drip 1.8s var(--ease) infinite;
}

@keyframes n-drip {
	to { top: 110%; }
}

/* ---------- Reading progress ---------- */
.n-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	z-index: 300;
	background: transparent;
	pointer-events: none;
}

.n-progress span {
	display: block;
	height: 100%;
	background: var(--grad-main);
	transform-origin: right;
	transform: scaleX(0);
}

[dir="rtl"] .n-progress span { transform-origin: right; }

/* ---------- Orbit visual (process) ---------- */
.n-orbit {
	position: absolute;
	inset: 12%;
	border: 1px dashed rgba(79, 70, 229, .35);
	border-radius: 50%;
	animation: n-spin-slow 26s linear infinite;
}

.n-orbit--2 {
	inset: 26%;
	border-color: rgba(255, 109, 77, .4);
	animation-duration: 16s;
	animation-direction: reverse;
}

.n-orbit::before {
	content: "";
	position: absolute;
	inset-block-start: -5px;
	inset-inline-start: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--violet);
	box-shadow: 0 0 14px var(--violet);
}

.n-orbit--2::before { background: var(--coral); box-shadow: 0 0 14px var(--coral); }

/* ---------- Tilt ---------- */
.n-tilt { transition: transform .2s ease-out; transform-style: preserve-3d; will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.n-marquee__track { animation: none; }
	.n-scrollhint { display: none; }
	.n-orbit, .n-orbit--2 { animation: none; }
}