/*
 * Landing page motion. Front end only: the editor keeps the static layout from landing.css.
 *
 * Nothing here runs for visitors who ask for reduced motion. The hero's entrance is time-based;
 * everything else follows the scroll position (CSS scroll-driven animations), so browsers
 * without them show the static layout.
 *
 * The motion language: the hero's arch opens into the picture, the arcade's arches rise over it,
 * and each coloured band unrolls to full width like a carpet as it arrives.
 *
 * The hero is a 3D stage. On arrival the carved façade tips up out of the ground in perspective,
 * the Immortals march in along the frieze, and the pieces drop onto the carpet. Afterwards the
 * monument tilts toward the pointer (assets/js/hero.js sets --px and --py, -1 to 1): inside
 * the arch the pieces drift over the carpet with their shadows, the tiling sits far behind, the
 * words sit near, so each layer moves by its own depth. The pieces stay inside the arch's window;
 * lifting them toward the viewer would push them past its edge. The tilt fades out as the arch
 * opens (--portal).
 */

@property --lift {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0deg;
}

@property --ps {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@property --px {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --py {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {

	/* Hero entrance: the façade tips up, the pieces land, the procession arrives, the words follow. */

	.handcraft-hero__stage {
		--calm: calc(1 - var(--portal));
		perspective: 1800px;
		perspective-origin: var(--x0) 58%;
		animation: handcraft-raise 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* The monument: façade and carpet turn together about the arch's base. */
	.handcraft-hero__stage::before,
	.handcraft-hero .handcraft-hero__cover {
		transform-origin: var(--x) var(--b);
		transform:
			rotateX(calc(var(--py) * -6deg * var(--calm)))
			rotateY(calc(var(--px) * 12deg * var(--calm)))
			rotateX(var(--lift));
		backface-visibility: hidden;
	}

	.handcraft-hero__stage::before {
		filter: drop-shadow(0 1.75rem 1.5rem rgb(74 26 30 / 0.28));
	}

	/* The pieces drift over the carpet, lifted off it by a shadow the carpet doesn't move with.
	   The shadow stays fixed so it is drawn once, not on every pointer move. */
	.handcraft-hero .handcraft-hero__pieces img {
		transform-origin: var(--x0) var(--b0);
		transform:
			translate3d(calc(var(--px) * 1.1rem * var(--calm)), calc(var(--py) * 0.8rem * var(--calm)), 0)
			scale(var(--ps));
		filter: drop-shadow(0 1rem 0.9rem rgb(40 10 20 / 0.3));
		animation: handcraft-land 1.4s cubic-bezier(0.34, 1.5, 0.64, 1) 0.75s both;
	}

	/* The hoopoe stands up and turns with the façade it perches on. */
	.handcraft-hero .handcraft-hero__hoopoe {
		transform-origin: var(--x0) var(--b0);
		transform:
			rotateX(calc(var(--py) * -6deg * var(--calm)))
			rotateY(calc(var(--px) * 12deg * var(--calm)))
			rotateX(var(--lift));
	}

	/* Far layer and near layer, moving against and with the pointer. */
	.handcraft-hero__stage::after {
		translate: calc(var(--px) * -1.1rem) calc(var(--py) * -0.7rem);
		scale: 1.06;
	}

	.handcraft-hero .handcraft-hero__frieze {
		inset-inline: -1.5rem;
		translate: calc(var(--px) * 0.6rem) 0;
		animation: handcraft-march 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
	}

	.handcraft-hero__copy {
		transform: translate3d(calc(var(--px) * -0.5rem), calc(var(--py) * -0.35rem), 0);
	}

	.handcraft-hero__copy > * {
		animation: handcraft-copy-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}

	.handcraft-hero__copy > :nth-child(1) { animation-delay: 0.35s; }
	.handcraft-hero__copy > :nth-child(2) { animation-delay: 0.55s; }
	.handcraft-hero__copy > :nth-child(3) { animation-delay: 0.75s; }

	@supports (animation-timeline: view()) {

		/* Hero: the stage holds still while the arch opens to fill it. */

		.handcraft-hero {
			view-timeline: --handcraft-hero block;
			block-size: 240svh;
		}

		.handcraft-hero .handcraft-hero__stage {
			position: sticky;
			inset-block-start: 0;
			block-size: 100svh;
			/* The header sits above the stage until the page scrolls. */
			--fold: 4.5rem;
			animation:
				handcraft-raise 2.2s cubic-bezier(0.22, 1, 0.36, 1) both,
				handcraft-portal linear both;
			animation-timeline: auto, --handcraft-hero;
			animation-range: normal, contain 0% contain 100%;
		}

		.handcraft-hero__copy {
			animation: handcraft-lift-out linear both;
			animation-timeline: --handcraft-hero;
			animation-range: contain 0% contain 30%;
		}

		.handcraft-hero .handcraft-hero__caption {
			position: absolute;
			z-index: 5;
			inset-block-end: var(--wp--preset--spacing--60);
			inset-inline: 0;
			display: block;
			inline-size: fit-content;
			max-inline-size: calc(100% - 2.5rem);
			margin: 0 auto;
			padding: 0.5em 1.1em;
			border-radius: 999px;
			background-color: color-mix(in srgb, var(--wp--preset--color--shiraz) 82%, transparent);
			color: var(--wp--preset--color--parchment);
			backdrop-filter: blur(6px);
			font-size: var(--wp--preset--font-size--large);
			text-align: center;
			animation: handcraft-caption linear both;
			animation-timeline: --handcraft-hero;
			animation-range: contain 52% contain 72%;
		}

		@media (max-width: 781px) {
			.handcraft-hero .handcraft-hero__stage {
				--fold: 7rem;
			}
		}

		/*
		 * The hoopoe takes off as the visitor scrolls: the perched bird hands over to the flying one
		 * (whose wings beat on their own, inside its SVG) in the first steps; it drops off the perch,
		 * then glides up and across toward the words and out past the side, pitched along its path,
		 * while the arch opens. The path is a cubic Bézier sampled into handcraft-hoopoe-flight.
		 */
		.handcraft-hero__hoopoe::before,
		.handcraft-hero__hoopoe::after {
			animation: handcraft-hoopoe-flight linear both, handcraft-hoopoe-perched linear both;
			animation-timeline: --handcraft-hero, --handcraft-hero;
			animation-range: contain 0% contain 48%;
		}

		.handcraft-hero__hoopoe::after {
			animation-name: handcraft-hoopoe-flight, handcraft-hoopoe-flying;
		}

		/* Section headings surface as they scroll in. */

		.handcraft-section h2 {
			animation: handcraft-surface linear both;
			animation-timeline: view();
			animation-range: entry 15% cover 30%;
		}

		/* Coloured bands unroll to full width. */

		.handcraft-unroll {
			animation: handcraft-unroll linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 75%;
		}

		/* Category niches rise one after another. */

		.handcraft-arcade__tile {
			animation: handcraft-niche linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 30%;
		}

		.handcraft-arcade__tile:nth-child(2) { animation-range: entry 15% cover 35%; }
		.handcraft-arcade__tile:nth-child(3) { animation-range: entry 25% cover 40%; }
		.handcraft-arcade__tile:nth-child(4) { animation-range: entry 35% cover 45%; }

		/* Made to order: the cord draws across, and each step arrives as the cord reaches it. */

		.handcraft-mto .handcraft-mto__steps {
			view-timeline: --handcraft-steps block;
		}

		.handcraft-mto__steps::before {
			animation: handcraft-cord linear both;
			animation-timeline: --handcraft-steps;
			animation-range: cover 10% cover 42%;
		}

		[dir="rtl"] .handcraft-mto__steps::before {
			animation-name: handcraft-cord-rtl;
		}

		.handcraft-mto__step {
			animation: handcraft-niche linear both;
			animation-timeline: --handcraft-steps;
			animation-range: cover 8% cover 20%;
		}

		.handcraft-mto__step:nth-child(2) { animation-range: cover 18% cover 30%; }
		.handcraft-mto__step:nth-child(3) { animation-range: cover 28% cover 40%; }

		/* Makers drift at different speeds. */

		@media (min-width: 782px) {
			.handcraft-maker {
				animation: handcraft-drift linear both;
				animation-timeline: view();
				animation-range: cover;
			}

			.handcraft-maker:nth-child(2) {
				animation-name: handcraft-drift-far;
			}
		}

		/* Process: the section pins, and the steps slide sideways as visitors scroll down. */

		.handcraft-landing > .handcraft-process {
			view-timeline: --handcraft-process block;
			block-size: 380svh;
			padding-block: 0;
		}

		.handcraft-process .handcraft-process__stage {
			position: sticky;
			inset-block-start: 0;
			display: flex;
			align-items: center;
			block-size: 100svh;
			overflow: clip;
			scroll-snap-type: none;
			container-type: size;
		}

		.handcraft-process__track {
			animation: handcraft-track linear both;
			animation-timeline: --handcraft-process;
			animation-range: contain 4% contain 92%;
		}

		[dir="rtl"] .handcraft-process__track {
			animation-name: handcraft-track-rtl;
		}

		/* A girih band along the bottom fills in as the story moves on. */
		.handcraft-process__stage::after {
			content: "";
			position: absolute;
			inset-inline: 0;
			inset-block-end: var(--wp--preset--spacing--50);
			block-size: var(--wp--custom--motif-band);
			background-color: var(--wp--preset--color--ochre);
			mask: url(../motifs/girih.svg) repeat-x center / auto 100%;
			transform-origin: left center;
			animation: handcraft-progress linear both;
			animation-timeline: --handcraft-process;
			animation-range: contain 4% contain 92%;
		}

		[dir="rtl"] .handcraft-process__stage::after {
			transform-origin: right center;
		}

		/* Instagram: the medallion turns as the section passes. */

		.handcraft-landing > .handcraft-instagram {
			view-timeline: --handcraft-instagram block;
		}

		.handcraft-instagram::before {
			animation: handcraft-turn linear both;
			animation-timeline: --handcraft-instagram;
			animation-range: cover;
		}
	}
}

/* The hoopoe's flight: a drop off the perch, then a long rising glide toward the words (--flight),
   pitched along its path, growing a little as it comes forward, and out past the side. */
@keyframes handcraft-hoopoe-flight {
	0% { translate: calc(var(--flight) * 0.0cqw) 0.0cqh; rotate: calc(var(--flight) * 0.0deg); scale: 1.000; }
	6.2% { translate: calc(var(--flight) * -1.9cqw) 1.2cqh; rotate: calc(var(--flight) * -14.0deg); scale: 1.019; }
	12.5% { translate: calc(var(--flight) * -4.3cqw) 2.2cqh; rotate: calc(var(--flight) * -12.3deg); scale: 1.038; }
	18.8% { translate: calc(var(--flight) * -7.1cqw) 3.0cqh; rotate: calc(var(--flight) * -8.0deg); scale: 1.056; }
	25% { translate: calc(var(--flight) * -10.3cqw) 3.6cqh; rotate: calc(var(--flight) * -4.5deg); scale: 1.075; }
	31.2% { translate: calc(var(--flight) * -13.8cqw) 3.9cqh; rotate: calc(var(--flight) * -1.6deg); scale: 1.094; }
	37.5% { translate: calc(var(--flight) * -17.8cqw) 3.9cqh; rotate: calc(var(--flight) * 0.9deg); scale: 1.113; }
	43.8% { translate: calc(var(--flight) * -22.0cqw) 3.7cqh; rotate: calc(var(--flight) * 3.2deg); scale: 1.131; }
	50% { translate: calc(var(--flight) * -26.6cqw) 3.1cqh; rotate: calc(var(--flight) * 5.3deg); scale: 1.150; }
	56.2% { translate: calc(var(--flight) * -31.5cqw) 2.3cqh; rotate: calc(var(--flight) * 7.2deg); scale: 1.169; }
	62.5% { translate: calc(var(--flight) * -36.7cqw) 1.1cqh; rotate: calc(var(--flight) * 9.1deg); scale: 1.188; }
	68.8% { translate: calc(var(--flight) * -42.0cqw) -0.5cqh; rotate: calc(var(--flight) * 11.0deg); scale: 1.206; }
	75% { translate: calc(var(--flight) * -47.7cqw) -2.4cqh; rotate: calc(var(--flight) * 12.8deg); scale: 1.225; }
	81.2% { translate: calc(var(--flight) * -53.5cqw) -4.7cqh; rotate: calc(var(--flight) * 14.6deg); scale: 1.244; }
	87.5% { translate: calc(var(--flight) * -59.5cqw) -7.4cqh; rotate: calc(var(--flight) * 16.0deg); scale: 1.262; }
	93.8% { translate: calc(var(--flight) * -65.7cqw) -10.5cqh; rotate: calc(var(--flight) * 16.0deg); scale: 1.281; }
	100% { translate: calc(var(--flight) * -72.0cqw) -14.0cqh; rotate: calc(var(--flight) * 16.0deg); scale: 1.300; }
}

@keyframes handcraft-hoopoe-perched {
	0%, 3% { opacity: 1; }
	9%, 100% { opacity: 0; }
}

@keyframes handcraft-hoopoe-flying {
	0%, 3% { opacity: 0; }
	9%, 100% { opacity: 1; }
}

/* The façade lies back on the ground, then stands up past upright and settles. */
@keyframes handcraft-raise {
	0% {
		--lift: 78deg;
		opacity: 0;
	}
	25% { opacity: 1; }
	72% { --lift: -2.5deg; }
	100% { --lift: 0deg; }
}

/* The pieces fall toward the carpet from above and bounce as they land. */
@keyframes handcraft-land {
	from {
		--ps: 1.45;
		opacity: 0;
	}
	35% { opacity: 1; }
}

/* The procession steps in four places toward the arch. */
@keyframes handcraft-march {
	from { background-position: calc(var(--frieze) * -130 / 240 * 4) 0; }
}

@keyframes handcraft-copy-in {
	from {
		opacity: 0;
		translate: 0 1.5rem;
	}
}

@keyframes handcraft-portal {
	0% {
		--portal: 0;
		animation-timing-function: cubic-bezier(0.55, 0, 0.35, 1);
	}
	62%,
	100% { --portal: 1; }
}

@keyframes handcraft-lift-out {
	to {
		opacity: 0;
		translate: 0 -4rem;
	}
}

@keyframes handcraft-caption {
	from {
		opacity: 0;
		translate: 0 1.5rem;
	}
}

@keyframes handcraft-surface {
	from {
		opacity: 0;
		translate: 0 0.6em;
		filter: blur(6px);
	}
}

@keyframes handcraft-unroll {
	from { clip-path: inset(0 9% round 3rem); }
	to { clip-path: inset(0 0 round 0); }
}

@keyframes handcraft-niche {
	from {
		opacity: 0;
		translate: 0 4rem;
	}
}

@keyframes handcraft-cord {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0); }
}

@keyframes handcraft-cord-rtl {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0); }
}

@keyframes handcraft-drift {
	from { translate: 0 3rem; }
	to { translate: 0 -3rem; }
}

@keyframes handcraft-drift-far {
	from { translate: 0 7rem; }
	to { translate: 0 -7rem; }
}

@keyframes handcraft-track {
	to { translate: calc(-100% + 100cqw) 0; }
}

@keyframes handcraft-track-rtl {
	to { translate: calc(100% - 100cqw) 0; }
}

@keyframes handcraft-progress {
	from { scale: 0 1; }
}

@keyframes handcraft-turn {
	from {
		rotate: -45deg;
		scale: 0.8;
	}
	to {
		rotate: 45deg;
		scale: 1.1;
	}
}