@layer components {
	.hero {
		--hero-line: color-mix(in srgb, var(--color-ink) 7%, transparent);

		position: relative;
		isolation: isolate;
		overflow: clip;
		padding-block-start: var(--space-l);
		background:
			radial-gradient(42rem 32rem at 82% 18%, color-mix(in srgb, var(--color-surface) 85%, transparent), transparent 70%),
			radial-gradient(36rem 26rem at 0% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%),
			var(--color-base);
	}

	.hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(var(--hero-line) 1px, transparent 1px),
			linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
		background-size: 4rem 4rem;
		background-position: center top;
		mask-image: radial-gradient(ellipse 75% 65% at 70% 35%, #000 20%, transparent 75%);
	}

	.hero__grid {
		display: flex;
		flex-direction: column;
	}

	.hero__copy {
		container-type: inline-size;
	}

	.hero__title {
		margin: 0;
		font-size: var(--text-display);
		font-weight: 700;
		letter-spacing: -0.035em;
		line-height: 1.05;
		text-wrap: balance;
	}

	.hero__title-line {
		display: block;
		margin-block-end: 0.15em;
		font-size: 0.72em;
		font-style: italic;
		font-weight: 500;
		letter-spacing: -0.02em;
	}

	.hero__title-accent {
		--marker-color: var(--color-accent);

		display: block;
		width: max-content;
		max-width: 100%;
		font-size: min(1em, 8.4cqi);
		white-space: nowrap;
	}

	.hero__photo picture {
		display: contents;
	}

	.hero__lead {
		max-width: 40rem;
		margin-block-start: var(--space-m);
		color: var(--color-muted);
		font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
		text-wrap: pretty;
	}

	.hero__cta {
		margin-block-start: var(--space-l);
		padding: 1rem 1.5rem;
	}

	.btn__arrow {
		transition: transform var(--duration) var(--ease-out);
	}

	.hero__cta:hover .btn__arrow {
		transform: translateX(4px);
	}

	.hero__actions {
		display: grid;
		gap: var(--space-s);
		margin-block-start: var(--space-l);
		scroll-margin-top: 8rem;
	}

	.action-card {
		background: color-mix(in srgb, var(--color-surface) 78%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.hero__photo {
		position: relative;
		isolation: isolate;
		order: 3;
		align-self: center;
		margin: var(--space-xl) 0 0;
		padding-inline: var(--space-m);
		line-height: 0;
	}

	.hero__photo::before,
	.hero__photo::after {
		content: "";
		position: absolute;
		inset: 16% 0 0;
		z-index: -1;
		border-radius: 999px 999px 0 0;
	}

	.hero__photo::before {
		background:
			radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--color-surface) 22%, transparent), transparent 55%),
			linear-gradient(180deg, color-mix(in srgb, var(--color-ink) 88%, var(--color-surface)), var(--color-ink) 60%);
	}

	.hero__photo::after {
		border: 1.5px solid var(--color-accent);
		border-block-end: 0;
		translate: -1.25rem -1.25rem;
	}

	.hero__image {
		width: min(70vw, 19rem);
		height: auto;
	}

	@media (min-width: 48rem) {
		.hero__actions {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (min-width: 64rem) {
		.hero {
			padding-block-start: var(--space-xl);
		}

		.hero__grid {
			display: grid;
			grid-template-columns: minmax(0, 1.15fr) auto;
			grid-template-rows: 1fr auto;
			grid-template-areas:
				"copy photo"
				"actions photo";
			column-gap: var(--space-xl);
		}

		.hero__copy {
			grid-area: copy;
			align-self: center;
		}

		.hero__actions {
			grid-area: actions;
			margin-block: var(--space-xl);
		}

		.hero__photo {
			grid-area: photo;
			align-self: end;
			margin: 0;
			padding-inline: var(--space-l) 0;
		}

		.hero__photo::before,
		.hero__photo::after {
			inset-inline-start: var(--space-l);
		}

		.hero__image {
			width: auto;
			height: min(44rem, calc(100svh - 8rem));
			min-height: 30rem;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.hero__title,
		.hero__lead,
		.hero__cta,
		.action-card {
			animation: hero-rise 800ms var(--ease-out) both;
			animation-delay: var(--hero-delay, 0ms);
		}

		.hero__title-accent {
			animation: text-marker-draw 900ms var(--ease-out) 700ms both;
		}

		.hero__lead {
			--hero-delay: 120ms;
		}

		.hero__cta {
			--hero-delay: 220ms;
		}

		.action-card:first-child {
			--hero-delay: 340ms;
		}

		.action-card:last-child {
			--hero-delay: 440ms;
		}

		.hero__image {
			animation: hero-photo 1000ms var(--ease-out) 100ms both;
		}

		.hero__photo::before {
			animation: hero-rise 1000ms var(--ease-out) both;
		}

		.hero__photo::after {
			animation: hero-fade 1200ms var(--ease-out) 500ms both;
		}
	}

	@keyframes hero-rise {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
	}

	@keyframes hero-photo {
		from {
			opacity: 0;
			translate: 0 1.5rem;
			scale: 1.03;
		}
	}

	@keyframes hero-fade {
		from {
			opacity: 0;
		}
	}
}