/**
 * Page Transitions
 *
 * Browser-native View Transitions API crossfade and entry animations.
 * CSS-only — no JavaScript required.
 *
 * Motion language: translateY(1rem) → translateY(0), opacity 0 → 1,
 * 300ms ease, 60ms stagger between siblings.
 */

/* === Cross-Document View Transitions === */
@view-transition {
	navigation: auto;
}

/*
 * Outgoing page: no animation, instant cut.
 * Only the incoming page animates (slide up + fade in).
 */
::view-transition-old(root) {
	animation: none;
	display: none;
}

/* Incoming page: slide up + fade in */
::view-transition-new(root) {
	animation: pageEntrySlideUp 300ms ease both;
}

/* === Keyframes === */
@keyframes pageEntrySlideUp {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===================================================================
   STAGGERED ENTRY: All block-level content elements within main.
   Every heading, paragraph, figure, list, group, section, etc.
   staggers in individually using a universal child selector
   on wp-block-group containers (WordPress's content wrappers).
   =================================================================== */

/*
 * Target all direct children of any wp-block-group inside main.
 * This catches: headings, paragraphs, images, lists, buttons,
 * columns, separators, spacers — every content block WordPress outputs.
 */
main .wp-block-group > * {
	opacity: 0;
	transform: translateY(1rem);
	animation: pageEntrySlideUp 300ms ease forwards;
}

main .wp-block-group > *:nth-child(1) { animation-delay: 0ms; }
main .wp-block-group > *:nth-child(2) { animation-delay: 60ms; }
main .wp-block-group > *:nth-child(3) { animation-delay: 120ms; }
main .wp-block-group > *:nth-child(4) { animation-delay: 180ms; }
main .wp-block-group > *:nth-child(5) { animation-delay: 240ms; }
main .wp-block-group > *:nth-child(6) { animation-delay: 300ms; }
main .wp-block-group > *:nth-child(7) { animation-delay: 360ms; }
main .wp-block-group > *:nth-child(8) { animation-delay: 420ms; }
main .wp-block-group > *:nth-child(9) { animation-delay: 480ms; }
main .wp-block-group > *:nth-child(10) { animation-delay: 540ms; }
main .wp-block-group > *:nth-child(11) { animation-delay: 600ms; }
main .wp-block-group > *:nth-child(12) { animation-delay: 660ms; }
main .wp-block-group > *:nth-child(13) { animation-delay: 720ms; }
main .wp-block-group > *:nth-child(14) { animation-delay: 780ms; }
main .wp-block-group > *:nth-child(15) { animation-delay: 840ms; }
main .wp-block-group > *:nth-child(n+16) { animation-delay: 900ms; }

/* ===================================================================
   STAGGERED ENTRY: Portfolio grid cards
   =================================================================== */

/* PHP-rendered grid: cards are direct children of .portfolio-grid */
.portfolio-grid > .portfolio-card {
	opacity: 0;
	transform: translateY(1rem);
	animation: pageEntrySlideUp 300ms ease forwards;
}

.portfolio-grid > .portfolio-card:nth-child(1) { animation-delay: 0ms; }
.portfolio-grid > .portfolio-card:nth-child(2) { animation-delay: 80ms; }
.portfolio-grid > .portfolio-card:nth-child(3) { animation-delay: 160ms; }
.portfolio-grid > .portfolio-card:nth-child(4) { animation-delay: 240ms; }
.portfolio-grid > .portfolio-card:nth-child(5) { animation-delay: 320ms; }
.portfolio-grid > .portfolio-card:nth-child(6) { animation-delay: 400ms; }
.portfolio-grid > .portfolio-card:nth-child(7) { animation-delay: 480ms; }
.portfolio-grid > .portfolio-card:nth-child(8) { animation-delay: 560ms; }
.portfolio-grid > .portfolio-card:nth-child(9) { animation-delay: 640ms; }
.portfolio-grid > .portfolio-card:nth-child(10) { animation-delay: 720ms; }
.portfolio-grid > .portfolio-card:nth-child(11) { animation-delay: 800ms; }
.portfolio-grid > .portfolio-card:nth-child(12) { animation-delay: 880ms; }

/* Block-rendered grid: cards wrapped in <li> by wp:post-template */
.portfolio-grid .wp-block-post-template > li {
	opacity: 0;
	transform: translateY(1rem);
	animation: pageEntrySlideUp 300ms ease forwards;
}

.portfolio-grid .wp-block-post-template > li:nth-child(1) { animation-delay: 0ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(2) { animation-delay: 80ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(3) { animation-delay: 160ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(4) { animation-delay: 240ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(5) { animation-delay: 320ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(6) { animation-delay: 400ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(7) { animation-delay: 480ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(8) { animation-delay: 560ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(9) { animation-delay: 640ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(10) { animation-delay: 720ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(11) { animation-delay: 800ms; }
.portfolio-grid .wp-block-post-template > li:nth-child(12) { animation-delay: 880ms; }

/* === Reduced Motion Override === */
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none;
	}

	main .wp-block-group > *,
	.portfolio-grid > .portfolio-card,
	.portfolio-grid .wp-block-post-template > li {
		opacity: 1;
		transform: none;
		animation: none;
		transition: none;
	}
}