/* Let's get started: hands holding out a laptop that plays the reel, with the closing call to action (assets/js/start.js). */
.seamkt-start {
	--sd-paper: #f1f0ee;
	--sd-ink: #0d0d0c;
	--sd-font: var(--seamkt-font, 'Manrope', system-ui, sans-serif);
	--sd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Width of the photo; everything in the scene scales with it. The arms may run past
	   the screen edges: they fade out there anyway. */
	--sd-w: min(1560px, 112vw);
	position: relative;
	/* Below the section above, never over it. */
	z-index: 0;
	isolation: isolate;
	overflow: clip;
	padding: clamp(72px, 12svh, 150px) 0 clamp(120px, 20svh, 220px);
	/* Paper grain (a small pre-rendered tile, cheap to paint while scrolling), then studio
	   light (brighter where the laptop is) on the paper of the page. */
	background:
		url('../images/grain.webp') 0 0 / 220px 220px,
		radial-gradient(70% 60% at 50% 38%, #fbfbfa 0%, rgba(251, 251, 250, 0) 70%),
		var(--sd-paper);
	color: var(--sd-ink);
	font-family: var(--sd-font);
	text-align: center;
}

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

/* ---------- The hands and the laptop ---------- */

/* A giant brand word set faintly behind the laptop, like INDUSTRIES above. */
.seamkt-start__backword {
	position: absolute;
	z-index: 0;
	top: clamp(40px, 7svh, 90px);
	left: 2vw;
	width: 96vw;
	height: min(30vw, 46svh);
	color: #e4e3df;
	pointer-events: none;
	overflow: visible;
}

.seamkt-start__backword text {
	font-family: var(--sd-font);
	font-size: 200px;
	font-weight: 800;
	letter-spacing: 0;
}

.seamkt-start__scene {
	position: relative;
	z-index: 1;
}

.seamkt-start__device {
	position: relative;
	width: var(--sd-w);
	margin-left: calc(50% - var(--sd-w) / 2);
	aspect-ratio: 1148 / 601;
}

/* A soft contact shadow under the laptop, between the hands. */
.seamkt-start__shadow {
	position: absolute;
	z-index: 0;
	top: 70%;
	left: 20%;
	width: 60%;
	height: 16%;
	background: radial-gradient(closest-side, rgba(13, 13, 12, 0.2), rgba(13, 13, 12, 0.06) 60%, rgba(13, 13, 12, 0));
}

/* A black-and-white study whose arms dissolve at their ends and below the hands, like a
   drawing left unfinished at its edges. The tone and both fades are baked into
   session5-art.webp, so the browser only has to show it: a CSS filter and mask on a photo
   this size were redone as the page scrolled. */
.seamkt-start .seamkt-start__hands {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

/* The display inside the bezel of session5.png: x 319–868, y 92–410 of 1148 × 601. Square
   corners like the panel in the photo, so the video needs no rounded clip each frame;
   contain keeps its repaints from reaching the rest of the scene. */
.seamkt-start__screen {
	position: absolute;
	z-index: 2;
	top: 15.308%;
	left: 27.787%;
	width: 47.909%;
	height: 53.078%;
	overflow: hidden;
	background: #050505;
	contain: strict;
}

.seamkt-start .seamkt-start__screen video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Glass: a faint diagonal reflection and a darker rim where the panel meets the bezel. */
.seamkt-start__glass {
	position: absolute;
	inset: 0;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 46%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 28px rgba(0, 0, 0, 0.32);
	pointer-events: none;
}

/* ---------- Heading and call to action ---------- */

/* As the footer comes up, a milky mist gathers from the bottom of the scene, thick at the
   foot and clear near the top. A plain gradient whose opacity start.js sets from the
   footer's position: no backdrop blur, which would have to re-blur the playing reel on
   every frame. */
.seamkt-start__mist {
	position: absolute;
	z-index: 5;
	inset: 0;
	background: linear-gradient(to bottom, rgba(241, 240, 238, 0) 20%, rgba(241, 240, 238, 0.35) 50%, rgba(241, 240, 238, 0.8) 78%, #f1f0ee 100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: opacity;
}

/* Pulled up so the heading sits over the fading hands, as in a printed poster. */
.seamkt-start__copy {
	position: relative;
	z-index: 3;
	display: grid;
	justify-items: center;
	margin-top: calc(var(--sd-w) * -0.11);
	padding: 0 20px;
}

.seamkt-start .seamkt-start__heading {
	margin: 0;
	padding: 0;
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: clamp(44px, 6.4vw, 120px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: none;
}

/* Each word rises out of its own line as the heading comes into view. */
/* The mask reaches well below the baseline (and is given back with a negative margin), so
   Manrope's descenders — the tail of the g — are never cut off. */
.seamkt-start__word {
	display: inline-block;
	overflow: hidden;
	padding: 0.06em 0.06em 0.3em;
	margin: -0.06em -0.06em -0.3em;
	vertical-align: top;
}

.seamkt-start__word > span {
	display: inline-block;
}

.seamkt-start .seamkt-start__cta {
	display: inline-flex;
	gap: 14px;
	align-items: center;
	margin-top: clamp(24px, 4svh, 40px);
	padding: 17px 22px 17px 28px;
	/* Frosted glass, the same material as the header bar. */
	border: 1px solid rgba(13, 13, 12, 0.1);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(146, 146, 146, 0.26));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(13, 13, 12, 0.05), 0 18px 40px -18px rgba(13, 13, 12, 0.38);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	color: var(--sd-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.3s ease, transform 0.4s var(--sd-ease), box-shadow 0.4s var(--sd-ease);
}

.seamkt-start__cta svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

.seamkt-start .seamkt-start__cta:hover,
.seamkt-start .seamkt-start__cta:focus-visible {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(146, 146, 146, 0.24));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 22px 44px -18px rgba(13, 13, 12, 0.42);
	color: var(--sd-ink);
	transform: translateY(-2px);
}

.seamkt-start .seamkt-start__cta:hover svg,
.seamkt-start .seamkt-start__cta:focus-visible svg {
	transform: translateX(4px);
}

.seamkt-start .seamkt-start__cta:focus-visible {
	outline: 1px solid var(--sd-ink);
	outline-offset: 4px;
}

/* ---------- Enhanced: the screen switches on, the heading rises ---------- */

/* The laptop settles in once, when the section comes into view (not tied to the scroll). */
.seamkt-start.is-enhanced .seamkt-start__device {
	opacity: 0;
	transform: translateY(48px) scale(0.96);
	transition: opacity 1.1s ease, transform 1.6s var(--sd-ease);
}

.seamkt-start.is-shown .seamkt-start__device {
	opacity: 1;
	transform: none;
}

.seamkt-start.is-enhanced .seamkt-start__screen video {
	opacity: 0;
	filter: brightness(1.9) blur(10px);
	transform: scale(1.04);
	transition: opacity 0.9s ease, filter 1.2s var(--sd-ease), transform 1.6s var(--sd-ease);
}

.seamkt-start.is-on .seamkt-start__screen video {
	opacity: 1;
	filter: none;
	transform: none;
}

.seamkt-start.is-enhanced .seamkt-start__word > span {
	transform: translateY(140%);
	transition: transform 1.1s var(--sd-ease) calc(var(--i, 0) * 0.09s);
}

.seamkt-start.is-enhanced .seamkt-start__copy.is-in .seamkt-start__word > span {
	transform: none;
}

.seamkt-start.is-enhanced .seamkt-start__cta {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s ease 0.45s, transform 1s var(--sd-ease) 0.45s, background-color 0.3s ease, box-shadow 0.4s var(--sd-ease);
}

.seamkt-start.is-enhanced .seamkt-start__copy.is-in .seamkt-start__cta {
	opacity: 1;
	transform: none;
}

.seamkt-start.is-enhanced .seamkt-start__copy.is-in .seamkt-start__cta:hover {
	transform: translateY(-2px);
	transition-delay: 0s;
}

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

/* On a phone the laptop stays large; the arms run off both edges of the screen. */
@media (max-width: 767px) {
	.seamkt-start {
		--sd-w: 172vw;
	}

	.seamkt-start .seamkt-start__heading {
		font-size: clamp(40px, 12vw, 60px);
	}

	.seamkt-start__copy {
		margin-top: calc(var(--sd-w) * -0.08);
	}

	/* Phones: a solid frosted look without the live backdrop blur, which was redrawn on every scroll frame. */
	.seamkt-start .seamkt-start__cta {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(226, 226, 224, 0.88));
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.seamkt-start *,
	.seamkt-start.is-enhanced .seamkt-start__word > span {
		transition: none !important;
	}
}