/* Rocket Journey: one screen, a rocket flying low through 3D clouds beneath six milestone stars (assets/js/journey.js). */
.seamkt-journey {
	--jy-ink: #f5f3ef;
	--jy-warm: rgba(255, 238, 214, 1);
	--jy-ground: #060607;
	--jy-gutter: clamp(20px, 3.4vw, 60px);
	/* The rocket flies low across the screen, beneath the milestone stars. */
	--rocket-w: clamp(200px, min(24vw, 36svh), 400px);
	--rocket-y: 62%;
	--rx: 30vw;
	--sky-w: 100vw;
	--line-h: clamp(22px, 3.4svh, 34px);
	--card-w: clamp(300px, 24vw, 380px);
	position: relative;
	isolation: isolate;
	background: var(--jy-ground);
	color: var(--jy-ink);
	font-family: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
}

.seamkt-journey *,
.seamkt-journey *::before,
.seamkt-journey *::after {
	box-sizing: border-box;
}

.seamkt-journey img {
	display: block;
	max-width: none;
	user-select: none;
}

/* ---------- Sky ---------- */

.seamkt-journey__sky {
	position: relative;
	height: 64svh;
	min-height: 380px;
	overflow: hidden;
	background: linear-gradient(180deg, #020203 0%, #060607 50%, #0e0e10 82%, #17171a 100%);
}

/* Bands: two copies of a tile side by side, slid sideways by the script. */
.seamkt-journey__band {
	position: absolute;
	left: 0;
	display: flex;
	pointer-events: none;
	will-change: transform;
}

/* A tile may come wrapped in <picture> (a raster copy for phones); the picture adds no box,
   so the image stays the band's direct flex item. */
.seamkt-journey__band picture {
	display: contents;
}

.seamkt-journey__band--milky,
.seamkt-journey__band--stars {
	top: 0;
	height: 100%;
}

.seamkt-journey .seamkt-journey__band--milky img,
.seamkt-journey .seamkt-journey__band--stars img {
	width: var(--sky-w);
	height: 100%;
	object-fit: cover;
}

.seamkt-journey__band--mountains-back {
	bottom: 3%;
	opacity: 0.85;
}

.seamkt-journey .seamkt-journey__band--mountains-back img,
.seamkt-journey .seamkt-journey__band--mist img {
	width: max(var(--sky-w), 1300px);
	height: auto;
}

.seamkt-journey__band--mist {
	bottom: 10%;
	opacity: 0.5;
}

.seamkt-journey .seamkt-journey__band--mist img {
	height: clamp(48px, 9svh, 90px);
}

/* A dark red-orange planet caught by the sun on its upper-right rim, with a small moon. */
.seamkt-journey__planet {
	position: absolute;
	top: clamp(-180px, -9vw, -50px);
	right: clamp(-220px, -10vw, -60px);
	width: clamp(260px, 30vw, 560px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 72% 26%, #8c4528 0%, #4d2012 30%, #1f0c07 58%, #0d0605 72%);
	box-shadow: inset -24px 22px 40px -16px rgba(255, 168, 112, 0.85), 0 0 90px rgba(255, 110, 50, 0.12);
	pointer-events: none;
	will-change: transform;
}

.seamkt-journey__moon {
	position: absolute;
	bottom: 14%;
	left: -22%;
	width: 11%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 70% 30%, #6d6b67 0%, #1c1c1b 58%, #0b0b0b);
	box-shadow: inset -4px 4px 10px -4px rgba(255, 236, 210, 0.7);
}

/* SVG clouds, used when WebGL is unavailable (and before the script runs). */
.seamkt-journey__fallback {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
}

.seamkt-journey .seamkt-journey__fallback img {
	width: max(200%, 2400px);
	height: auto;
	animation: seamkt-journey-drift 160s linear infinite;
}

.seamkt-journey__fallback--far {
	top: 12%;
	opacity: 0.35;
}

.seamkt-journey__fallback--mid {
	bottom: 18%;
	z-index: 2;
	opacity: 0.6;
}

@keyframes seamkt-journey-drift {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ---------- Rocket (the PNG points right, which is the direction of flight) ---------- */

.seamkt-journey__rocket {
	position: absolute;
	z-index: 3;
	top: var(--rocket-y);
	left: 0;
	width: var(--rocket-w);
	margin-top: calc(var(--rocket-w) * -0.2814);
	aspect-ratio: 1672 / 941;
	transform: translate3d(var(--rx), 0, 0);
	will-change: transform;
}

.seamkt-journey__rocket-bob {
	position: absolute;
	inset: 0;
	animation: seamkt-journey-bob 3.6s ease-in-out infinite;
}

@keyframes seamkt-journey-bob {
	0%,
	100% {
		transform: translate3d(0, -2%, 0) rotate(-3deg);
	}

	50% {
		transform: translate3d(0, 3%, 0) rotate(-1.5deg);
	}
}

.seamkt-journey .seamkt-journey__rocket img {
	position: relative;
	z-index: 2;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55));
}

/* Exhaust: the nozzle is 7% in from the image's left edge, on its centre line. Percentage
   margins resolve against the width, so half a height h% is h% / 2 × 941 / 1672. */
.seamkt-journey__flame,
.seamkt-journey__flame-glow,
.seamkt-journey__trail {
	position: absolute;
	top: 50%;
	pointer-events: none;
}

/* The flame: a white-hot core inside a tapering gold plume, with faint shock diamonds. */
.seamkt-journey__flame {
	z-index: 1;
	right: 92%;
	width: 32%;
	height: 24%;
	margin-top: -6.75%;
	background: linear-gradient(270deg, rgba(255, 244, 222, 0.95) 0%, rgba(255, 200, 128, 0.85) 16%, rgba(255, 140, 64, 0.5) 42%, rgba(255, 96, 40, 0.15) 72%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 100% 50% at 100% 50%, #000 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 100% 50% at 100% 50%, #000 40%, transparent 100%);
	filter: blur(1px);
	transform-origin: right center;
	animation: seamkt-journey-flame 0.36s linear infinite;
}

.seamkt-journey__flame::before,
.seamkt-journey__flame::after {
	position: absolute;
	-webkit-mask-image: radial-gradient(ellipse 100% 50% at 100% 50%, #000 45%, transparent 100%);
	mask-image: radial-gradient(ellipse 100% 50% at 100% 50%, #000 45%, transparent 100%);
	content: '';
}

.seamkt-journey__flame::before {
	top: 24%;
	right: 0;
	width: 48%;
	height: 52%;
	background: linear-gradient(270deg, #fff 0%, #fffaf0 30%, rgba(255, 230, 180, 0.7) 60%, transparent 100%);
}

.seamkt-journey__flame::after {
	top: 34%;
	right: 6%;
	width: 64%;
	height: 32%;
	background: repeating-linear-gradient(270deg, transparent 0 10%, rgba(255, 255, 255, 0.6) 13%, transparent 16%);
	opacity: 0.7;
	mix-blend-mode: screen;
}

/* A small warm halo at the nozzle, not a blob. */
.seamkt-journey__flame-glow {
	z-index: 0;
	right: 86%;
	width: 26%;
	height: 40%;
	margin-top: -11.25%;
	border-radius: 50%;
	background: radial-gradient(ellipse at 75% 50%, rgba(255, 196, 130, 0.32), rgba(255, 140, 70, 0.1) 45%, transparent 70%);
	animation: seamkt-journey-glow 1.4s ease-in-out infinite alternate;
}

/* Smoke trail for the SVG fallback; with WebGL the clouds draw a real 3D trail. */
.seamkt-journey__trail {
	z-index: 0;
	right: 96%;
	width: 240%;
	height: 14%;
	margin-top: -7%;
	border-radius: 999px;
	background: linear-gradient(270deg, rgba(255, 238, 214, 0.55), rgba(220, 218, 214, 0.18) 40%, transparent 90%);
	filter: blur(6px);
}

.seamkt-journey.has-webgl .seamkt-journey__trail,
.seamkt-journey.has-webgl .seamkt-journey__fallback {
	display: none;
}

/* The script drives the bob in the flight, so the shader's smoke stays on the nozzle. */
.seamkt-journey.is-enhanced .seamkt-journey__rocket-bob {
	animation: none;
	will-change: transform;
}

@keyframes seamkt-journey-flame {
	0%,
	100% {
		transform: scale(1, 1);
		opacity: 1;
	}

	20% {
		transform: scale(0.92, 0.97);
		opacity: 0.94;
	}

	45% {
		transform: scale(1.06, 1.02);
		opacity: 1;
	}

	70% {
		transform: scale(0.96, 0.99);
		opacity: 0.96;
	}
}

@keyframes seamkt-journey-glow {
	from {
		opacity: 0.7;
	}

	to {
		opacity: 1;
	}
}

.seamkt-journey__clouds {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.seamkt-journey.has-webgl .seamkt-journey__clouds {
	display: block;
}

/* ---------- Intro and milestones (also the static, no-JS layout) ---------- */

.seamkt-journey__intro {
	padding: clamp(40px, 5vw, 64px) var(--jy-gutter) 0;
	text-align: center;
}

.seamkt-journey .seamkt-journey__eyebrow {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.72);
	font-size: clamp(14px, 1.15vw, 17px);
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1;
	text-transform: uppercase;
}

.seamkt-journey .seamkt-journey__heading {
	max-width: 1120px;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(42px, 5.2vw, 78px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-wrap: balance;
	text-transform: none;
}

.seamkt-journey .seamkt-journey__description {
	max-width: 920px;
	margin: clamp(22px, 2.4vw, 32px) auto 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(17px, 1.4vw, 21px);
	font-weight: 400;
	letter-spacing: 0.005em;
	line-height: 1.6;
	text-wrap: pretty;
}

.seamkt-journey__milestones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 40px);
	margin: 0;
	padding: clamp(40px, 5vw, 72px) var(--jy-gutter) clamp(56px, 7vw, 96px);
	list-style: none;
}

.seamkt-journey__milestone {
	margin: 0;
}

.seamkt-journey__dot,
.seamkt-journey__line {
	display: none;
}

.seamkt-journey__card {
	text-align: center;
}

.seamkt-journey__icon {
	display: inline-block;
	width: 46px;
	height: 46px;
	color: #fff;
}

.seamkt-journey__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 10px rgba(255, 238, 214, 0.35));
}

.seamkt-journey .seamkt-journey__title {
	margin: 14px 0 8px;
	padding: 0;
	color: #fff;
	font-family: inherit;
	font-size: clamp(20px, 1.5vw, 24px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

.seamkt-journey .seamkt-journey__title--single-line {
	font-size: clamp(17px, 1.5vw, 24px);
	white-space: nowrap;
}

.seamkt-journey .seamkt-journey__text {
	max-width: 27em;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.74);
	font-size: clamp(15px, 1.1vw, 17px);
	font-weight: 450;
	line-height: 1.55;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* ---------- Enhanced: the pinned, scroll-driven flight ---------- */

.seamkt-journey.is-enhanced .seamkt-journey__scroller {
	position: relative;
	/* One screen to pin the stage, plus the length of the flight. */
	height: calc(100svh + 640svh);
}

.seamkt-journey.is-enhanced .seamkt-journey__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

.seamkt-journey.is-enhanced .seamkt-journey__sky {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0;
}

/* The milestones are stars in the sky above the flight path, running on past the right
   edge; the script places them (--x), slides them in, and the rocket passes beneath each
   one in turn. */
.seamkt-journey.is-enhanced .seamkt-journey__milestones {
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
	will-change: transform;
}

.seamkt-journey.is-enhanced .seamkt-journey__milestone {
	position: absolute;
	top: var(--y);
	left: var(--x, -9999px);
	width: 0;
	height: 0;
}

/* Lines join the stars the rocket has passed. Each is drawn on as the rocket flies from
   one star to the next, fading out before it touches either star, with a small spark
   of light running at its head. */
.seamkt-journey__constellation {
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
	will-change: transform;
}

.seamkt-journey__constellation line {
	fill: none;
	stroke-width: 1.1;
	stroke-linecap: round;
}

.seamkt-journey__constellation .is-spark {
	transition: opacity 300ms ease;
}

/* A star: a small twinkling target ahead of the rocket, a bright flared star once reached. */
.seamkt-journey.is-enhanced .seamkt-journey__dot {
	position: absolute;
	top: -3px;
	left: -3px;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.07), 0 0 12px 3px rgba(255, 236, 210, 0.35);
	outline: 1px solid rgba(255, 255, 255, 0.22);
	outline-offset: 6px;
	transform: scale(0.9);
	transition: outline-color 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), background 700ms ease, box-shadow 700ms ease;
	animation: seamkt-journey-twinkle 2.8s ease-in-out infinite;
	/* Its own layer, so the twinkle is composited rather than repainted every frame. */
	will-change: opacity, transform;
}

.seamkt-journey.is-enhanced .seamkt-journey__milestone:nth-child(2n) .seamkt-journey__dot {
	animation-delay: -1.3s;
}

.seamkt-journey.is-enhanced .seamkt-journey__milestone:nth-child(3n) .seamkt-journey__dot {
	animation-delay: -0.6s;
}

.seamkt-journey.is-enhanced .is-lit .seamkt-journey__dot {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 0 16px 5px rgba(255, 236, 210, 0.6), 0 0 56px 16px rgba(255, 236, 210, 0.18);
	outline-color: transparent;
	transform: scale(1.25);
	animation: none;
}

/* The four-point flare that opens when a star is reached. */
.seamkt-journey.is-enhanced .seamkt-journey__dot::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	background:
		linear-gradient(90deg, transparent, rgba(255, 246, 230, 0.95), transparent) center / 100% 1px no-repeat,
		linear-gradient(0deg, transparent, rgba(255, 246, 230, 0.95), transparent) center / 1px 100% no-repeat;
	opacity: 0.6;
	transform: scale(0.5) rotate(-45deg);
	transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 900ms ease;
	content: '';
}

.seamkt-journey.is-enhanced .is-lit .seamkt-journey__dot::before {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* The current star sends out two ripples. */
.seamkt-journey.is-enhanced .seamkt-journey__dot::after {
	position: absolute;
	inset: -1px;
	border: 1px solid rgba(255, 236, 210, 0.85);
	border-radius: 50%;
	opacity: 0;
	content: '';
}

.seamkt-journey.is-enhanced .is-reached .seamkt-journey__dot::after {
	animation: seamkt-journey-ping 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) 2 both;
}

@keyframes seamkt-journey-ping {
	from {
		opacity: 0.9;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(9);
	}
}

@keyframes seamkt-journey-twinkle {
	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}

/* A thin beam drops from the star to its card. */
.seamkt-journey.is-enhanced .seamkt-journey__line {
	position: absolute;
	top: 8px;
	left: -0.5px;
	display: block;
	width: 1px;
	height: var(--line-h);
	background: linear-gradient(180deg, rgba(255, 240, 220, 0.9), rgba(255, 255, 255, 0.1));
	transform: scaleY(0);
	transform-origin: center top;
}

.seamkt-journey.is-enhanced .seamkt-journey__card {
	position: absolute;
	top: calc(var(--line-h) + 14px);
	left: var(--shift, 0px);
	width: var(--card-w);
	margin-left: calc(var(--card-w) / -2);
	visibility: hidden;
	opacity: 0;
	pointer-events: auto;
}

/* The intro sits on the cloud wall and dissolves with it. */
.seamkt-journey.is-enhanced .seamkt-journey__intro {
	position: absolute;
	z-index: 9;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--jy-gutter) 4svh;
	pointer-events: none;
}

.seamkt-journey.is-enhanced .seamkt-journey__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.seamkt-journey.is-enhanced .seamkt-journey__heading {
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}

.seamkt-journey.is-enhanced .seamkt-journey__description {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
	.seamkt-journey__milestones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.seamkt-journey {
		--jy-gutter: 16px;
		--rocket-w: clamp(160px, 52vw, 240px);
		--rocket-y: 62%;
		--card-w: min(88vw, 360px);
		--line-h: 22px;
	}

	.seamkt-journey__milestones {
		grid-template-columns: minmax(0, 1fr);
	}

	.seamkt-journey .seamkt-journey__eyebrow {
		margin-bottom: 14px;
	}

	.seamkt-journey .seamkt-journey__heading {
		font-size: clamp(36px, 10.5vw, 50px);
		line-height: 1.08;
	}

	.seamkt-journey .seamkt-journey__description {
		max-width: 38rem;
		margin-top: 16px;
		font-size: 16px;
		line-height: 1.55;
	}

	/* Phones: less running all the time. The rocket bobs in CSS (there is no 3D smoke to keep on
	   its nozzle, so the script no longer writes it every frame), its flame holds its shape
	   instead of flickering through a mask, a blur and a blend on every frame, the clouds rest,
	   and the lines between the stars are left out. */
	.seamkt-journey.is-enhanced .seamkt-journey__rocket-bob {
		animation: seamkt-journey-bob 3.6s ease-in-out infinite;
	}

	.seamkt-journey__flame,
	.seamkt-journey__flame-glow,
	.seamkt-journey .seamkt-journey__fallback img {
		animation: none;
	}

	.seamkt-journey__flame {
		filter: none;
	}

	.seamkt-journey__flame::after {
		mix-blend-mode: normal;
	}

	/* Phones draw the lines between the stars as bars (journey.js) instead of the SVG: each bar is
	   placed and turned once, then drawn on by scaling along its length, so it never repaints. */
	.seamkt-journey__constellation {
		display: none;
	}

	.seamkt-journey__beams {
		position: absolute;
		z-index: 5;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		pointer-events: none;
		will-change: transform;
	}

	.seamkt-journey__beams span {
		position: absolute;
		top: 0;
		left: 0;
		height: 1px;
		margin-top: -0.5px;
		transform-origin: 0 50%;
	}

	.seamkt-journey__beams i {
		display: block;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(255, 240, 220, 0), rgba(255, 240, 220, 0.7) 18%, rgba(255, 240, 220, 0.7) 82%, rgba(255, 240, 220, 0));
		transform: scaleX(0);
		transform-origin: 0 50%;
		will-change: transform;
	}

	/* Phones: a shorter flight, about three and a half screens instead of six and a half, so the sky
	   is crossed briskly; every star and card still comes in turn (journey.js reads the length). */
	.seamkt-journey.is-enhanced .seamkt-journey__scroller {
		height: calc(100svh + 340svh);
	}

	/* Phones: the pinned sky fills the large viewport (Safari's toolbar collapsed), so no dark
	   strip opens beneath it while the toolbar shrinks and grows mid-scroll. */
	@supports (height: 100lvh) {
		.seamkt-journey.is-enhanced .seamkt-journey__scroller {
			height: calc(100lvh + 340svh);
		}

		.seamkt-journey.is-enhanced .seamkt-journey__stage {
			height: 100lvh;
		}
	}

	/* Phones: every card docks at the same spot just below the stars (the script centres it
	   and passes each star's height as --sy), so only the stars and the rocket move. */
	.seamkt-journey.is-enhanced {
		--rocket-y: 67%;
		--card-dock: calc(27svh + 40px);
	}

	.seamkt-journey.is-enhanced .seamkt-journey__line {
		display: none;
	}

	/* Its own layer, so the per-frame translate that keeps it centred (journey.js) is composited. */
	.seamkt-journey.is-enhanced .seamkt-journey__card {
		top: calc(var(--card-dock) - var(--sy, 0px));
		will-change: transform, opacity;
	}

	.seamkt-journey.is-enhanced .seamkt-journey__icon {
		width: 36px;
		height: 36px;
	}

	.seamkt-journey.is-enhanced .seamkt-journey__title {
		margin: 12px 0 8px;
		font-size: 20px;
	}

	.seamkt-journey.is-enhanced .seamkt-journey__title--single-line {
		font-size: 18px;
		white-space: normal;
	}

	.seamkt-journey.is-enhanced .seamkt-journey__text {
		max-width: 22em;
		font-size: 14.5px;
		line-height: 1.5;
	}
}


/* Short screens: keep the milestone legible without crowding the rocket. */
@media (max-height: 700px) {
	.seamkt-journey.is-enhanced .seamkt-journey__text {
		font-size: 14px;
		line-height: 1.4;
	}

	.seamkt-journey.is-enhanced .seamkt-journey__icon {
		width: 38px;
		height: 38px;
	}
}

/* Looping art pauses while the section is off screen (toggled by the script), the twinkling
   stars included: left running on desktop, they restyled every frame of the whole page. */
.seamkt-journey.is-idle :is(.seamkt-journey__fallback img, .seamkt-journey__rocket-bob, .seamkt-journey__flame, .seamkt-journey__flame-glow, .seamkt-journey__dot) {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-journey .seamkt-journey__fallback img,
	.seamkt-journey__rocket-bob,
	.seamkt-journey__flame,
	.seamkt-journey__flame-glow {
		animation: none;
	}
}