/* Shared motion, independent from base layout. */
:root {
	--df-reveal: var(--wp--custom--motion--reveal, 600ms) var(--wp--custom--motion--ease, cubic-bezier(.22,1,.36,1));
	--df-stagger: var(--wp--custom--motion--stagger, 80ms);
	--df-distance: var(--wp--custom--motion--distance, 1.5rem);
	--df-tilt: var(--wp--custom--motion--tilt, 6);
	--df-count-duration: var(--wp--custom--motion--count, 1400);
}

/* ظاهر شدن خود بلوک */
.df-motion .df-reveal {
	opacity: 0;
	transform: translate3d(0, var(--df-distance), 0);
	transition: opacity var(--df-reveal), transform var(--df-reveal);
}

/* فرزندان یکی‌یکی؛ --i را اسکریپت می‌گذارد */
.df-motion .df-stagger > * {
	opacity: 0;
	transform: translate3d(0, var(--df-distance), 0);
	transition: opacity var(--df-reveal), transform var(--df-reveal);
	transition-delay: calc(var(--i, 0) * var(--df-stagger));
}

/* فرزندان از چهار جهت پخش‌شده سر جایشان می‌آیند */
.df-motion .df-assemble > * {
	--df-x: 1.75rem;
	--df-y: -1.1rem;
	opacity: 0;
	transform: translate3d(var(--df-x), var(--df-y), 0);
	transition: opacity var(--df-reveal), transform var(--df-reveal);
	transition-delay: calc(var(--i, 0) * var(--df-stagger));
}

.df-motion .df-assemble > :nth-child(4n + 2) { --df-x: -1.4rem; --df-y: 1rem; }
.df-motion .df-assemble > :nth-child(4n + 3) { --df-x: 1.1rem; --df-y: 1.5rem; }
.df-motion .df-assemble > :nth-child(4n + 4) { --df-x: -1rem; --df-y: -1.25rem; }

.df-motion .df-reveal.is-in,
.df-motion .df-stagger.is-in > *,
.df-motion .df-assemble.is-in > * {
	opacity: 1;
	transform: none;
}

/* کلمه‌به‌کلمه از زیر خط؛ ماسک با overflow روی df-w است */
.df-words .df-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-block-end: 0.08em;
}

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

.df-motion .df-words .df-w > span {
	transform: translate3d(0, 110%, 0);
	transition: transform var(--df-reveal);
	transition-delay: calc(var(--i, 0) * var(--df-stagger));
}

.df-motion .df-words.is-in .df-w > span {
	transform: none;
}

/* کارت کج‌شونده؛ نور از رنگ نقش accent */
.df-tilt {
	position: relative;
	transform: perspective(900px) rotateX(var(--df-rx, 0deg)) rotateY(var(--df-ry, 0deg));
	transition: transform var(--wp--custom--motion--fast) linear;
}

.df-motion .df-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(26rem circle at var(--df-mx, 50%) var(--df-my, 50%), color-mix(in oklab, var(--wp--preset--color--accent) 35%, transparent), transparent 42%);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease, cubic-bezier(.22,1,.36,1));
}

.df-motion .df-tilt:hover::after {
	opacity: 1;
}

/* parallax با انیمیشن وابسته به اسکرول. مرورگری که پشتیبانی نکند بلوک
   را ثابت نشان می‌دهد؛ چیزی خراب نمی‌شود. شدت: --df-parallax روی بلوک. */
@supports (animation-timeline: view()) {
	.df-motion .df-parallax {
		animation: df-parallax linear both;
		animation-timeline: view();
	}
}

@keyframes df-parallax {
	from {
		transform: translate3d(0, var(--df-parallax, 12%), 0);
	}
	to {
		transform: translate3d(0, calc(var(--df-parallax, 12%) * -1), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}