/*
 * Sahafa — scroll-reveal + hover micro-interactions.
 * Native to FSE blocks: works with any core block by adding `.has-reveal`
 * (or the data-reveal attribute) — no markup gymnastics required.
 *
 * All tokens come from theme.json `settings.custom`:
 *   var(--wp--custom--motion--duration--*)   transitions
 *   var(--wp--custom--motion--ease-out)      easing
 *   var(--wp--custom--reveal--distance)      Y-offset before reveal
 *   var(--wp--custom--reveal--stagger)       delay step between siblings
 *   var(--wp--custom--hover--lift)           card hover transform
 */

/* ---------- scroll reveal ---------- */
.has-reveal,
[data-reveal] {
	opacity: 0;
	transform: translateY(var(--wp--custom--reveal--distance, 1.5rem));
	transition:
		opacity var(--wp--custom--reveal--duration, 460ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		transform var(--wp--custom--reveal--duration, 460ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	will-change: opacity, transform;
}

.has-reveal.is-revealed,
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* slide-from-right (use `.has-reveal--slide-r`) */
.has-reveal--slide-r {
	transform: translateX(2rem);
}
.has-reveal--slide-r.is-revealed {
	transform: none;
}

/* slide-from-left */
.has-reveal--slide-l {
	transform: translateX(-2rem);
}
.has-reveal--slide-l.is-revealed {
	transform: none;
}

/* zoom-in (use `.has-reveal--zoom`) */
.has-reveal--zoom {
	transform: scale(0.96);
}
.has-reveal--zoom.is-revealed {
	transform: scale(1);
}

/* ---------- staggered children ----------
   Add `.has-reveal-stagger` to a parent — direct children fade in with delay. */
.has-reveal-stagger > .has-reveal:nth-child(1).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(1).is-revealed { transition-delay: 0ms; }
.has-reveal-stagger > .has-reveal:nth-child(2).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(2).is-revealed { transition-delay: var(--wp--custom--reveal--stagger, 100ms); }
.has-reveal-stagger > .has-reveal:nth-child(3).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(3).is-revealed { transition-delay: calc(var(--wp--custom--reveal--stagger, 100ms) * 2); }
.has-reveal-stagger > .has-reveal:nth-child(4).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(4).is-revealed { transition-delay: calc(var(--wp--custom--reveal--stagger, 100ms) * 3); }
.has-reveal-stagger > .has-reveal:nth-child(5).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(5).is-revealed { transition-delay: calc(var(--wp--custom--reveal--stagger, 100ms) * 4); }
.has-reveal-stagger > .has-reveal:nth-child(6).is-revealed,
.has-reveal-stagger > [data-reveal]:nth-child(6).is-revealed { transition-delay: calc(var(--wp--custom--reveal--stagger, 100ms) * 5); }

/* ---------- hover lift (use on .ka-card and other interactive groups) ---------- */
.has-hover-lift {
	transition:
		transform var(--wp--custom--motion--duration--base, 260ms) var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
		box-shadow var(--wp--custom--motion--duration--base, 260ms) var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.has-hover-lift:hover {
	transform: var(--wp--custom--hover--lift, translateY(-4px));
	box-shadow: var(--wp--custom--shadow--strong);
}

/* button lift — applied to wp-block-button__link */
.wp-block-button__link {
	transition:
		transform var(--wp--custom--motion--duration--fast, 160ms) var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
		background-color var(--wp--custom--motion--duration--fast, 160ms) var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
		box-shadow var(--wp--custom--motion--duration--base, 260ms) var(--wp--custom--motion--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
.wp-block-button__link:hover {
	transform: var(--wp--custom--hover--lift-sm, translateY(-2px));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* link underline-on-hover */
a:not(.wp-element-button):not(.wp-block-button__link) {
	transition: color var(--wp--custom--motion--duration--fast, 160ms) var(--wp--custom--motion--ease, ease);
}

/* ---------- floating animation for hero device mockup ---------- */
@keyframes ka-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.ka-float {
	animation: ka-float 6s var(--wp--custom--motion--ease-in-out, ease-in-out) infinite;
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.has-reveal,
	[data-reveal],
	.has-reveal--slide-r,
	.has-reveal--slide-l,
	.has-reveal--zoom {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.has-hover-lift:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
	.ka-float {
		animation: none;
	}
}