/* Typesee 3D hero — dark cinematic stage, warm-neutral system tokens. */

.ts-hero {
	--ts-hero-base: #0d0d0d;
	--ts-hero-ink: #f5f5f2;
	--ts-hero-muted: #8f8f8a;
	--ts-hero-line: #2e2e2c;
	--ts-hero-accent: #e72a00;
	position: relative;
	isolation: isolate;
	display: grid;
	overflow: hidden;
	min-height: clamp(600px, 100svh, 980px);
	background: var(--ts-hero-base);
	color: var(--ts-hero-ink);
	border-bottom: 1px solid var(--ts-hero-line);
}

/* Hardware-decoded film burn. The pseudo-element is a static video fallback. */
.ts-hero__glow-video,
.ts-hero--glow-fallback::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.ts-hero__glow-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.86;
}

.ts-hero--glow-fallback::before {
	content: "";
	background:
		radial-gradient(ellipse 18% 70% at 6% 48%, rgba(255, 92, 38, 0.58), transparent 74%),
		radial-gradient(ellipse 9% 58% at 24% 44%, rgba(255, 186, 128, 0.2), transparent 72%),
		radial-gradient(ellipse 15% 72% at 94% 52%, rgba(231, 42, 0, 0.42), transparent 74%),
		radial-gradient(ellipse 34% 28% at 54% 102%, rgba(64, 190, 255, 0.13) 0%, transparent 72%);
}

/* Full-bleed lower shade; unlike the content column, this never stops at 1440px. */
.ts-hero::after {
	content: "";
	position: absolute;
	inset: 36% 0 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(13, 13, 13, 0.3) 32%,
		rgba(13, 13, 13, 0.82) 68%,
		rgba(13, 13, 13, 0.98) 100%
	);
}

.ts-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 900ms ease;
}

.ts-hero--ready .ts-hero__stage,
.ts-hero--fallback .ts-hero__stage {
	opacity: 1;
}

.ts-hero__roll {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
	will-change: transform;
}

.ts-hero__roll-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: ts-hero-credits 40s linear infinite;
	will-change: transform;
}

.ts-hero--paused .ts-hero__roll-track {
	animation-play-state: paused;
	will-change: auto;
}

.ts-hero__roll-line {
	padding-block: clamp(0.5rem, 2.5vh, 1.5rem);
	font-size: clamp(3rem, 11vw, 10rem);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	color: var(--ts-hero-ink);
}

.ts-hero__roll-line:nth-child(odd) {
	color: var(--ts-hero-muted);
}

@keyframes ts-hero-credits {
	to {
		transform: translateY(-50%);
	}
}

.ts-hero__fallback {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: clamp(4rem, 12vh, 8rem) clamp(1rem, 3vw, 2.5rem);
}

.ts-hero--fallback .ts-hero__fallback {
	display: flex;
}

.ts-hero__fallback-word {
	font-size: clamp(3.5rem, 14vw, 13rem);
	font-weight: 800;
	line-height: 0.9;
	text-align: center;
	overflow-wrap: anywhere;
}

.ts-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: min(1440px, 100%);
	margin-inline: auto;
	padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vh, 3.5rem);
}

.ts-hero__eyebrow {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ts-hero-muted);
}

.ts-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.ts-hero__title {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(2.4rem, 5vw, 4.6rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 0.9;
	text-wrap: balance;
}

.ts-hero__title em {
	font-style: italic;
	color: var(--ts-hero-accent);
}

.ts-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	max-width: 34ch;
}

.ts-hero__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
}

.ts-hero__copy {
	margin: 0;
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	line-height: 1.5;
	color: var(--ts-hero-muted);
}

.ts-hero__cta {
	display: inline-block;
	padding: 0.95em 1.8em;
	background: var(--ts-hero-ink);
	color: var(--ts-hero-base);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
}

.ts-hero__cta:hover,
.ts-hero__cta:focus-visible {
	background: var(--ts-hero-accent);
	color: var(--ts-hero-base);
}

.ts-hero__credit {
	font-family: "Courier New", monospace;
	font-size: 0.78rem;
	color: var(--ts-hero-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--ts-hero-line);
	padding-bottom: 0.15em;
}

.ts-hero__credit:hover,
.ts-hero__credit:focus-visible {
	color: var(--ts-hero-accent);
	border-bottom-color: var(--ts-hero-accent);
}

.ts-hero__credit-arrow {
	display: inline-block;
	transition: transform 180ms ease;
}

.ts-hero__credit:hover .ts-hero__credit-arrow {
	transform: translateX(3px);
}

@media (max-width: 760px) {
	.ts-hero {
		min-height: clamp(520px, 92svh, 760px);
	}

	.ts-hero__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.ts-hero__title {
		font-size: clamp(2.6rem, 11vw, 4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ts-hero__stage {
		transition: none;
	}

	.ts-hero__roll-track {
		animation: none;
	}

}