/* plinth/sky-hero */
.b-sky-hero {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	view-timeline: --sky-hero block;
	min-block-size: 110svh;
	overflow: clip;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--base);

	& .b-sky-hero__background,
	& .b-sky-hero__fade {
		position: absolute;
		inset: 0;
	}

	& .b-sky-hero__background {
		z-index: -2;
	}

	& .b-sky-hero__background-image {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: center top;
	}

	& .b-sky-hero__fade {
		z-index: -1;
		background: linear-gradient(
			to bottom,
			transparent 42%,
			color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent) 68%,
			var(--wp--preset--color--base) 100%
		);
	}

	& .b-sky-hero__inner {
		display: grid;
		justify-items: center;
		gap: var(--wp--preset--spacing--xl);
		max-width: var(--wp--style--global--wide-size);
		min-block-size: 110svh;
		margin-inline: auto;
		padding-block: calc(var(--wp--preset--spacing--xxl) + var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--md)) var(--wp--preset--spacing--xl);
		padding-inline: var(--wp--preset--spacing--gutter);
		text-align: center;
	}

	& .b-sky-hero__copy {
		display: grid;
		justify-items: center;
		gap: var(--wp--preset--spacing--sm);
		max-width: var(--wp--style--global--wide-size);
	}

	& .b-sky-hero__heading {
		font-size: var(--wp--preset--font-size--display);
		font-weight: 700;
		line-height: 1.02;
		letter-spacing: -0.035em;
		text-wrap: balance;
		animation: b-sky-hero-content-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) both;
	}

	& .b-sky-hero__line {
		display: block;
	}

	& .b-sky-hero__subtitle {
		max-width: var(--wp--style--global--content-size);
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1.45;
		text-wrap: balance;
		animation: b-sky-hero-content-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) var(--wp--custom--motion--delay--stagger) both;
	}

	& .b-sky-hero__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--xxs);
		min-block-size: calc(var(--wp--preset--spacing--lg) + var(--wp--preset--spacing--xs));
		padding-inline: var(--wp--preset--spacing--md);
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base) !important;
		font-weight: 700;
		text-decoration: none;
		box-shadow: var(--wp--custom--shadow--md);
		animation: b-sky-hero-content-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) calc(var(--wp--custom--motion--delay--stagger) * 2) both;
		transition: transform var(--wp--custom--transition--fast);

		&::before {
			content: "";
			flex: 0 0 auto;
			inline-size: var(--wp--preset--spacing--sm);
			block-size: var(--wp--preset--spacing--sm);
			background: currentcolor;
			-webkit-mask: url("../../assets/images/apple.svg") center / contain no-repeat;
			mask: url("../../assets/images/apple.svg") center / contain no-repeat;
			translate: 0 -0.125em;
		}

		&:hover {
			transform: translateY(calc(var(--wp--preset--spacing--xxs) / -2));
		}
	}

	& .b-sky-hero__stack {
		display: grid;
		grid-template-areas: "stack";
		place-items: start center;
		inline-size: 100%;
	}

	& .b-sky-hero__device {
		position: relative;
		grid-area: stack;
		inline-size: min(calc(var(--wp--style--global--content-size) / 2), 76cqi);
		margin: 0;
		padding: var(--wp--preset--spacing--xxs);
		overflow: hidden;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 65%, transparent);
		border-radius: var(--wp--custom--radius--xl);
		background: var(--wp--preset--color--contrast);
		box-shadow: var(--wp--custom--shadow--lg);
	}

	& .b-sky-hero__device--centre {
		z-index: 2;
		translate: 0;
		scale: 1;
		animation: b-sky-hero-centre-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) calc(var(--wp--custom--motion--delay--stagger) * 4) both;
	}

	& .b-sky-hero__device--rear {
		--device-scale: 0.84;

		z-index: 1;
		scale: var(--device-scale);
	}

	& .b-sky-hero__device--left {
		--device-x: -32%;

		translate: var(--device-x) var(--wp--preset--spacing--md);
		animation: b-sky-hero-left-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) calc(var(--wp--custom--motion--delay--stagger) * 3) both;
	}

	& .b-sky-hero__device--right {
		--device-x: 32%;

		translate: var(--device-x) var(--wp--preset--spacing--md);
		animation: b-sky-hero-right-enter var(--wp--custom--motion--duration--entrance) var(--wp--custom--motion--easing--entrance) calc(var(--wp--custom--motion--delay--stagger) * 3) both;
	}

	& .b-sky-hero__screenshot {
		inline-size: 100%;
		border-radius: calc(var(--wp--custom--radius--xl) - var(--wp--preset--spacing--xxs));
	}

	@container (max-width: 47.999rem) {
		& .b-sky-hero__device--rear {
			display: none;
		}
	}

	& .b-sky-hero__header-trigger {
		position: absolute;
		inset-block-start: 82%;
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: 1px;
		pointer-events: none;
	}

	& .b-sky-hero__placeholder {
		padding: var(--wp--preset--spacing--md);
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
	}

	@supports (animation-timeline: view()) {
		& .b-sky-hero__copy {
			animation: b-sky-hero-copy-parallax 1ms linear both;
			animation-timeline: --sky-hero;
			animation-range: cover 0% cover 78%;
		}

		& .b-sky-hero__device--centre {
			animation-name: b-sky-hero-centre-enter, b-sky-hero-device-parallax;
			animation-duration: var(--wp--custom--motion--duration--entrance), 1ms;
			animation-timing-function: var(--wp--custom--motion--easing--entrance), linear;
			animation-delay: calc(var(--wp--custom--motion--delay--stagger) * 4), 0s;
			animation-fill-mode: both, both;
			animation-timeline: auto, --sky-hero;
			animation-range: normal, cover 0% cover 86%;
		}

		& .b-sky-hero__device--left {
			animation-name: b-sky-hero-left-enter, b-sky-hero-rear-parallax;
		}

		& .b-sky-hero__device--right {
			animation-name: b-sky-hero-right-enter, b-sky-hero-rear-parallax;
		}

		& .b-sky-hero__device--rear {
			animation-duration: var(--wp--custom--motion--duration--entrance), 1ms;
			animation-timing-function: var(--wp--custom--motion--easing--entrance), linear;
			animation-delay: calc(var(--wp--custom--motion--delay--stagger) * 3), 0s;
			animation-fill-mode: both, both;
			animation-timeline: auto, --sky-hero;
			animation-range: normal, cover 0% cover 82%;
		}
	}

	@container (min-width: 48rem) {
		& .b-sky-hero__copy {
			max-width: calc(var(--wp--style--global--wide-size) - var(--wp--preset--spacing--xxl));
		}

		& .b-sky-hero__device {
			inline-size: min(calc(var(--wp--style--global--content-size) / 2), 42cqi);
		}

		& .b-sky-hero__device--rear {
			--device-scale: 0.9;
		}

		& .b-sky-hero__device--left {
			--device-x: -48%;
		}

		& .b-sky-hero__device--right {
			--device-x: 48%;
		}
	}
}

.editor-styles-wrapper .b-sky-hero [data-scroll-motion] {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.editor-styles-wrapper .b-sky-hero :where(
	.b-sky-hero__heading,
	.b-sky-hero__subtitle,
	.b-sky-hero__cta,
	.b-sky-hero__screenshot
) {
	animation: none !important;
	opacity: 1 !important;
	scale: 1 !important;
	translate: 0 !important;
}

@keyframes b-sky-hero-content-enter {
	from {
		opacity: 0;
		translate: 0 var(--wp--preset--spacing--sm);
	}

	to {
		opacity: 1;
		translate: 0;
	}
}

@keyframes b-sky-hero-centre-enter {
	from {
		opacity: 0;
		translate: 0 var(--wp--preset--spacing--sm);
		scale: 0.96;
	}

	to {
		opacity: 1;
		translate: 0;
		scale: 1;
	}
}

@keyframes b-sky-hero-left-enter {
	from {
		opacity: 0;
		translate: calc(var(--device-x) * 0.56) var(--wp--preset--spacing--lg);
		scale: calc(var(--device-scale) - 0.04);
	}

	to {
		opacity: 1;
		translate: var(--device-x) var(--wp--preset--spacing--md);
		scale: var(--device-scale);
	}
}

@keyframes b-sky-hero-right-enter {
	from {
		opacity: 0;
		translate: calc(var(--device-x) * 0.56) var(--wp--preset--spacing--lg);
		scale: calc(var(--device-scale) - 0.04);
	}

	to {
		opacity: 1;
		translate: var(--device-x) var(--wp--preset--spacing--md);
		scale: var(--device-scale);
	}
}

@keyframes b-sky-hero-copy-parallax {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc((var(--wp--preset--spacing--xl) + var(--wp--preset--spacing--lg)) * -1));
	}
}

@keyframes b-sky-hero-device-parallax {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc((var(--wp--preset--spacing--xxl) + var(--wp--preset--spacing--lg)) * -1));
	}
}

@keyframes b-sky-hero-rear-parallax {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(calc(var(--wp--preset--spacing--xl) * -1));
	}
}