/* The scene stays pinned. Each chapter brings its own type, color and composition. */
.pollen-story .pollen-scene::after {
	background:
		linear-gradient(
			90deg,
			var(--world-shade-left, rgba(8, 6, 9, 0.83)),
			var(--world-shade-mid, rgba(8, 6, 9, 0.53)) 42%,
			transparent 82%
		),
		linear-gradient(
			0deg,
			var(--world-shade-bottom, rgba(8, 6, 9, 0.5)),
			transparent 55%
		);
}
.pollen-worlds > [data-world] {
	background: transparent;
}

/* SaaS: geometric type and a measured product-system composition. */
.world-journey[data-world="saas"] {
	min-height: 105svh;
	height: auto;
	display: flex;
	align-items: center;
	padding: 14svh 7%;
	color: #f3f7fc;
}
.world-journey[data-world="saas"] .journey-caption {
	position: relative;
	inset: auto;
	width: min(49%, 620px);
	padding: 0;
}
.world-journey[data-world="saas"] h2 {
	font:
		600 clamp(56px, 7vw, 104px) / 1.02 Bricolage,
		sans-serif;
	letter-spacing: -0.04em;
	word-spacing: 0.06em;
	max-width: 8ch;
	margin: 0 0 28px;
	text-shadow: none;
}
.world-journey[data-world="saas"] p {
	max-width: 30ch;
	color: #c3d4e7;
	font-size: 20px;
	line-height: 1.5;
	margin: 0;
}

/* Consumer: generous space, quiet ink and a precise blue action. */
.agent-chapter[data-world="consumer"] {
	min-height: 110svh;
	padding: 15svh 7%;
	color: #171b20;
	--world-focus: #0668d1;
}
.agent-chapter[data-world="consumer"] .agent-story {
	width: min(49%, 610px);
	max-width: 610px;
}
.agent-chapter[data-world="consumer"] h2 {
	font:
		600 clamp(52px, 6.2vw, 88px) / 1.025 -apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	letter-spacing: -0.065em;
	max-width: 9ch;
	margin: 0 0 30px;
}
.agent-chapter[data-world="consumer"] .agent-story > p {
	font:
		400 20px / 1.6 -apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	letter-spacing: -0.025em;
	max-width: 34ch;
	color: #565d65;
}
.agent-chapter[data-world="consumer"] .agent-benefits {
	margin: 30px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.agent-chapter[data-world="consumer"] .agent-benefits li {
	border-color: rgba(23, 27, 32, 0.16);
	padding: 14px 0;
	font-size: 16px;
	line-height: 24px;
}
.agent-chapter[data-world="consumer"] .text-action {
	color: #0668d1;
	gap: 20px;
	font:
		500 16px / 24px -apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}
.agent-chapter[data-world="consumer"] .text-action:hover {
	color: #004ca8;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Agency: acidic color, emphatic italic type and the working site examples. */
.product-chapter[data-world="agency"] {
	min-height: 125svh;
	padding: 14svh 7%;
	gap: 5%;
	color: #18200e;
	--world-focus: #18200e;
}
.product-chapter[data-world="agency"] .product-story {
	text-shadow: none;
	max-width: 500px;
	gap: 26px;
}
.product-chapter[data-world="agency"] h2 {
	font:
		800 italic clamp(56px, 6.4vw, 100px) / 0.96 Anybody,
		sans-serif;
	letter-spacing: -0.055em;
	max-width: 9ch;
}
.product-chapter[data-world="agency"] .product-story > p {
	max-width: 30ch;
	color: #354125;
	font-size: 19px;
	line-height: 1.6;
}
.product-chapter[data-world="agency"] .primary-action {
	background: #18200e;
	color: #f0fa9c;
	border-radius: 0;
}
.product-chapter[data-world="agency"] .primary-action:hover {
	background: #354125;
	color: #fff;
}
.product-chapter[data-world="agency"] .design-showcase {
	border-color: rgba(24, 32, 14, 0.3);
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(24, 32, 14, 0.14);
	background: #fbfcec;
}
.product-chapter[data-world="agency"] .showcase-toolbar {
	background: #fbfcec;
	color: #18200e;
	border-bottom: 1px solid rgba(24, 32, 14, 0.2);
}
.product-chapter[data-world="agency"] .showcase-toolbar select {
	border-color: rgba(24, 32, 14, 0.25);
	color: #18200e;
	background: transparent;
	color-scheme: light;
}
.product-chapter[data-world="agency"] .example-facts {
	border: 1px solid rgba(24, 32, 14, 0.2);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.35);
	color: #18200e;
}
.product-chapter[data-world="agency"] .example-facts figcaption {
	color: #465139;
}
.product-chapter[data-world="agency"] .example-facts pre {
	color: #18200e;
}

/* Portfolio: warm paper, ink and an editorial serif headline. */
.pollen-close[data-world="portfolio"] {
	min-height: 110svh;
	align-items: center;
	padding: 16svh 7%;
	color: #3c2632;
	--world-focus: #3c2632;
}
.pollen-close[data-world="portfolio"] > div {
	max-width: 590px;
}
.pollen-close[data-world="portfolio"] h2 {
	font:
		400 clamp(54px, 6.7vw, 96px) / 1.04 Georgia,
		"Times New Roman",
		serif;
	font-style: italic;
	letter-spacing: -0.055em;
	max-width: 11ch;
	margin: 0 0 36px;
	text-wrap: balance;
}
.pollen-close[data-world="portfolio"] .primary-action {
	background: transparent;
	color: #3c2632;
	padding: 12px 0;
	border-bottom: 1px solid #3c2632;
	border-radius: 0;
	min-width: 210px;
	font-size: 17px;
}
.pollen-close[data-world="portfolio"] .primary-action:hover {
	color: #86503f;
	border-color: #86503f;
}

/* The floating bar follows the active world's contrast without changing its geometry. */
body:has(.pollen-story[data-world="consumer"]) .pollen-header,
body:has(.pollen-story[data-world="agency"]) .pollen-header,
body:has(.pollen-story[data-world="portfolio"]) .pollen-header {
	--glass-fill: linear-gradient(
		125deg,
		rgba(255, 255, 255, 0.65),
		rgba(255, 255, 255, 0.22)
	);
	--glass-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		inset 0 -1px 0 rgba(23, 27, 32, 0.08), 0 12px 36px rgba(23, 27, 32, 0.1);
	color: #18200e;
	text-shadow: none;
}
body:has(.pollen-story[data-world="consumer"]) .pollen-header .logo-link img,
body:has(.pollen-story[data-world="agency"]) .pollen-header .logo-link img,
body:has(.pollen-story[data-world="portfolio"]) .pollen-header .logo-link img {
	filter: brightness(0);
}
body:has(.pollen-story[data-world="consumer"])
	.pollen-header
	nav
	a[aria-current="page"],
body:has(.pollen-story[data-world="agency"])
	.pollen-header
	nav
	a[aria-current="page"],
body:has(.pollen-story[data-world="portfolio"])
	.pollen-header
	nav
	a[aria-current="page"] {
	color: #18200e;
}

@media (max-width: 900px) {
	.product-chapter[data-world="agency"] {
		gap: 48px;
	}
	.product-chapter[data-world="agency"] .product-story {
		max-width: 620px;
	}
	.product-chapter[data-world="agency"] h2 {
		max-width: 10ch;
	}
}
@media (max-width: 700px) {
	.pollen-story .pollen-scene::after {
		background:
			linear-gradient(
				90deg,
				var(--world-shade-left, rgba(8, 6, 9, 0.56)),
				var(--world-shade-mid, rgba(8, 6, 9, 0.12)) 78%,
				transparent
			),
			linear-gradient(
				0deg,
				var(--world-shade-bottom, rgba(8, 6, 9, 0.8)),
				transparent 80%
			);
	}
	.world-journey[data-world="saas"] {
		min-height: 100svh;
		padding: 14svh 20px;
		align-items: center;
	}
	.world-journey[data-world="saas"] .journey-caption {
		width: 100%;
		max-width: 420px;
	}
	.world-journey[data-world="saas"] h2 {
		font-size: 64px;
		max-width: 8ch;
	}
	.world-journey[data-world="saas"] p {
		max-width: 26ch;
		font-size: 18px;
	}
	.agent-chapter[data-world="consumer"] {
		min-height: 115svh;
		padding: 14svh 20px;
	}
	.agent-chapter[data-world="consumer"] .agent-story {
		width: 100%;
		max-width: 410px;
	}
	.agent-chapter[data-world="consumer"] h2 {
		font-size: 58px;
		max-width: 9ch;
	}
	.agent-chapter[data-world="consumer"] .agent-story > p {
		font-size: 18px;
	}
	.product-chapter[data-world="agency"] {
		padding: 12svh 20px;
	}
	.product-chapter[data-world="agency"] h2 {
		font-size: 64px;
	}
	.product-chapter[data-world="agency"] .product-story > p {
		font-size: 18px;
	}
	.pollen-close[data-world="portfolio"] {
		min-height: 105svh;
		padding: 15svh 20px;
	}
	.pollen-close[data-world="portfolio"] h2 {
		font-size: 62px;
		max-width: 10ch;
	}
	body:has(.pollen-story[data-world="consumer"]) .pollen-header nav,
	body:has(.pollen-story[data-world="agency"]) .pollen-header nav,
	body:has(.pollen-story[data-world="portfolio"]) .pollen-header nav {
		background: rgba(250, 250, 249, 0.86);
		color: #18200e;
	}
}
@media (prefers-reduced-transparency: reduce) {
	body:has(.pollen-story[data-world="consumer"]) .pollen-header,
	body:has(.pollen-story[data-world="agency"]) .pollen-header,
	body:has(.pollen-story[data-world="portfolio"]) .pollen-header {
		--glass-fill: #f8f8f2;
	}
}

.pollen-worlds > [data-world] :is(a, button, select):focus-visible {
	outline-color: var(--world-focus, var(--signal));
}
body:has(.pollen-story[data-world="consumer"]) .pollen-header :focus-visible,
body:has(.pollen-story[data-world="agency"]) .pollen-header :focus-visible,
body:has(.pollen-story[data-world="portfolio"]) .pollen-header :focus-visible {
	outline-color: #1f4872;
}

.world-index {
	display: none;
	position: absolute;
	left: 184px;
	top: 50%;
	transform: translateY(-50%);
	gap: 10px;
	color: inherit;
	font: 12px / 1.5 monospace;
	letter-spacing: 0.025em;
	pointer-events: none;
	transition: opacity 0.2s;
}
body:has(.pollen-story) .world-index {
	display: flex;
}
.world-index span {
	opacity: 0.6;
}
.world-index strong {
	font-weight: 400;
}
body:has(.pollen-story[data-world="swarm"]) .world-index {
	opacity: 0;
}
@media (max-width: 700px) {
	.world-index {
		left: 156px;
		font-size: 11px;
	}
	.world-index span {
		display: none;
	}
}