/**
 * Nearly Native — Section Transitions
 * Opt-in CSS classes for clip-path reveal effects between sections.
 *
 * Classes: nn-reveal-wipe, nn-reveal-circle, nn-reveal-diagonal
 * Uses animation-timeline: view() as progressive enhancement.
 * JS fallback via scroll-reveal.js handles .nn-visible toggling.
 */

/* Base state: hidden via clip-path */
.nn-reveal-wipe,
.nn-reveal-circle,
.nn-reveal-diagonal {
	will-change: clip-path;
}

/* Wipe: left-to-right reveal */
.nn-reveal-wipe {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.nn-reveal-wipe.nn-visible {
	clip-path: inset(0 0 0 0);
}

/* Circle: expanding circle from center */
.nn-reveal-circle {
	clip-path: circle(0% at 50% 50%);
	transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.nn-reveal-circle.nn-visible {
	clip-path: circle(75% at 50% 50%);
}

/* Diagonal: sweeps open from the top-left corner along the diagonal.
   All four vertices start at the origin; as they interpolate toward the
   full rect, the bottom-right vertex traces the diagonal — the reveal
   front is a corner, not a vertical edge. (The old start polygon put all
   points at x=0, which rendered identically to nn-reveal-wipe.) */
.nn-reveal-diagonal {
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.nn-reveal-diagonal.nn-visible {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Progressive enhancement: scroll-driven animation where supported */
@supports (animation-timeline: view()) {
	.nn-reveal-wipe {
		transition: none;
		animation: nn-wipe-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}

	.nn-reveal-circle {
		transition: none;
		animation: nn-circle-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}

	.nn-reveal-diagonal {
		transition: none;
		animation: nn-diagonal-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}

	@keyframes nn-wipe-in {
		from { clip-path: inset(0 100% 0 0); }
		to { clip-path: inset(0 0 0 0); }
	}

	@keyframes nn-circle-in {
		from { clip-path: circle(0% at 50% 50%); }
		to { clip-path: circle(75% at 50% 50%); }
	}

	@keyframes nn-diagonal-in {
		from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
		to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.nn-reveal-wipe,
	.nn-reveal-circle,
	.nn-reveal-diagonal {
		clip-path: none !important;
		animation: none !important;
		transition: none !important;
	}
}