/* ============================================================================
   Homepage Hero — Startup Neon · Split Screen
   Section ID: tmpl-startup-neon--hero--split-screen--1
   Layout: split-60-40 · max-w-6xl · min-height 100vh · video/image backdrop
   Visual: frosted-glass overlay · xl shadow · radius none · wave/blob/grid
   Type: 8xl heading (weight 800, tracking -0.03em), right aligned · lg sub
   Motion: bounce-in entrance · zoom-on-scroll · CTA glow-pulse · card tilt-3d
   All rules are scoped under .sn-hero so nothing leaks into other sections.
   ============================================================================ */

.sn-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: calc(var(--nav-height) + var(--space-16)) var(--space-16);
	padding-inline: var(--container-padding);
	background-color: var(--color-canvas-deep);
	color: var(--color-text-on-dark);
}

/* ---- Background image (background_image slot) + dark legibility gradient --- */
.sn-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
}

.sn-hero__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Slow, subtle "zoom-on-scroll" driven by CSS scroll-timeline where
	   supported; a gentle base scale keeps the frame filled as a fallback. */
	transform: scale(1.06);
	transform-origin: center;
	filter: saturate(1.05);
}

.sn-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(115deg, rgba(13, 10, 19, 0.94) 0%, rgba(13, 10, 19, 0.72) 42%, rgba(76, 29, 149, 0.35) 100%),
		radial-gradient(120% 120% at 90% 10%, rgba(var(--color-primary-rgb), 0.28) 0%, transparent 55%);
}

/* ---- Decorative: grid-lines ------------------------------------------------ */
.sn-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%);
}

/* ---- Decorative: blob-bottom-left ----------------------------------------- */
.sn-hero__blob {
	position: absolute;
	left: -10vw;
	bottom: -12vw;
	z-index: -2;
	width: min(48vw, 620px);
	aspect-ratio: 1;
	background: radial-gradient(circle at 40% 40%, rgba(var(--color-accent-rgb), 0.42) 0%, rgba(var(--color-primary-rgb), 0.30) 45%, transparent 70%);
	filter: blur(14px);
	border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
	animation: sn-hero-blob 16s var(--ease-default) infinite alternate;
}

/* ---- Decorative: wave-top -------------------------------------------------- */
.sn-hero__wave {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: clamp(60px, 9vw, 120px);
	color: var(--color-canvas-deep);
	opacity: 0.9;
}

/* ---- Split 60 / 40 layout -------------------------------------------------- */
.sn-hero__inner {
	width: 100%;
	max-width: 72rem; /* max-w-6xl */
	margin-inline: auto;
	display: grid;
	grid-template-columns: 60fr 40fr;
	align-items: center;
	gap: clamp(var(--space-8), 5vw, var(--space-20));
}

/* ---- Column 1: frosted-glass content panel -------------------------------- */
.sn-hero__content {
	display: flex;
	justify-content: flex-end;
}

.sn-hero__panel {
	width: 100%;
	max-width: 40rem;
	padding: clamp(var(--space-6), 3vw, var(--space-12));
	text-align: right; /* right aligned per spec */
	background: rgba(22, 17, 31, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-none); /* border-radius: none */
	box-shadow: var(--shadow-xl), var(--shadow-glow);
	/* Frosted-glass overlay */
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
}

.sn-hero__eyebrow {
	margin: 0 0 var(--space-4);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-accent-400);
}

.sn-hero__heading {
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	/* 8xl display headline */
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	font-weight: 800;
	line-height: var(--leading-tight);
	letter-spacing: -0.03em; /* tracking */
	color: var(--color-text-on-dark);
	text-wrap: balance;
}

.sn-hero__subheading {
	margin: 0 0 var(--space-8);
	margin-inline-start: auto;
	max-width: 46ch;
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
	color: var(--color-body-on-dark);
}

/* ---- CTA group (cta_primary + cta_secondary) — glow-pulse hover ----------- */
.sn-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-4);
}

.sn-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.9rem 1.75rem;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-tight);
	text-decoration: none;
	border-radius: var(--radius-none);
	border: 1px solid transparent;
	transition:
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.sn-hero__cta--accent {
	background: var(--color-accent-500);
	color: var(--color-on-accent);
	box-shadow: var(--shadow-glow-accent);
}

.sn-hero__cta--accent:hover {
	transform: translateY(-2px);
	background: var(--color-accent-400);
	animation: sn-hero-glow-pulse 1.6s var(--ease-default) infinite;
}

.sn-hero__cta--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-on-dark);
	border-color: rgba(255, 255, 255, 0.28);
}

.sn-hero__cta--ghost:hover {
	transform: translateY(-2px);
	border-color: var(--color-primary-400);
	background: rgba(var(--color-primary-rgb), 0.18);
	box-shadow: var(--shadow-glow);
}

.sn-hero__cta:focus-visible {
	outline: 2px solid var(--color-primary-400);
	outline-offset: 3px;
}

/* ---- Trust stats ----------------------------------------------------------- */
.sn-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: clamp(var(--space-5), 3vw, var(--space-10));
	margin: var(--space-10) 0 0;
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sn-hero__stat {
	margin: 0;
	text-align: right;
}

.sn-hero__stat-value {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	color: var(--color-text-on-dark);
}

.sn-hero__stat-label {
	margin: var(--space-1) 0 0;
	font-size: var(--text-xs);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-muted-on-dark);
}

/* ---- Column 2: side_image card — tilt-3d hover ---------------------------- */
.sn-hero__aside {
	display: flex;
	justify-content: center;
	perspective: 1000px;
}

.sn-hero__card {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 24rem;
	border-radius: var(--radius-none);
	overflow: hidden;
	background: var(--color-surface-card);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--shadow-xl), var(--shadow-glow);
	transform-style: preserve-3d;
	transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
	will-change: transform;
}

.sn-hero__card:hover {
	transform: rotateX(6deg) rotateY(-8deg) translateY(-4px);
	box-shadow: var(--shadow-xl), 0 0 44px rgba(var(--color-primary-rgb), 0.4);
}

.sn-hero__card-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.sn-hero__card-chip {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.4rem 0.85rem;
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
	color: var(--color-text-on-dark);
	background: rgba(13, 10, 19, 0.7);
	border: 1px solid rgba(var(--color-accent-rgb), 0.5);
	border-radius: var(--radius-full);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sn-hero__card-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
	background: var(--color-accent-400);
	box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.9);
	animation: sn-hero-pulse-dot 1.8s var(--ease-default) infinite;
}

/* ---- Entrance animation: bounce-in (300ms, 0ms stagger) ------------------- */
[data-sn-hero-animate] {
	opacity: 0;
	transform: translateY(28px) scale(0.98);
}

.sn-hero.is-visible [data-sn-hero-animate] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--duration-normal) var(--ease-out),
		transform var(--duration-normal) var(--ease-bounce);
}

/* ---- Keyframes ------------------------------------------------------------- */
@keyframes sn-hero-glow-pulse {
	0%, 100% { box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.35); }
	50%      { box-shadow: 0 0 34px rgba(var(--color-accent-rgb), 0.75); }
}

@keyframes sn-hero-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.82); }
}

@keyframes sn-hero-blob {
	0%   { transform: translate(0, 0) rotate(0deg); border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; }
	100% { transform: translate(20px, -24px) rotate(12deg); border-radius: 58% 42% 44% 56% / 46% 58% 42% 54%; }
}

/* ---- Zoom-on-scroll (progressive enhancement, no JS) ---------------------- */
@supports (animation-timeline: view()) {
	.sn-hero__bg-img {
		animation: sn-hero-zoom linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes sn-hero-zoom {
		from { transform: scale(1.02); }
		to   { transform: scale(1.16); }
	}
}

/* ---- Responsive: tablet = sidebar-collapse -------------------------------- */
@media (max-width: 1024px) {
	.sn-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
	.sn-hero__aside {
		order: -1; /* image above the text when the sidebar collapses */
	}
	.sn-hero__content {
		justify-content: stretch;
	}
	.sn-hero__panel {
		max-width: none;
	}
}

/* ---- Responsive: mobile = single-col, centred for readability ------------- */
@media (max-width: 600px) {
	.sn-hero {
		padding-block: calc(var(--nav-height) + var(--space-10)) var(--space-12);
	}
	.sn-hero__panel {
		text-align: left;
		padding: var(--space-6);
	}
	.sn-hero__subheading {
		margin-inline-start: 0;
	}
	.sn-hero__ctas,
	.sn-hero__stats,
	.sn-hero__stat {
		justify-content: flex-start;
		text-align: left;
	}
	.sn-hero__cta {
		flex: 1 1 auto;
	}
}

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sn-hero__blob,
	.sn-hero__card-dot,
	.sn-hero__cta--accent:hover {
		animation: none;
	}
	.sn-hero__bg-img {
		transform: scale(1.04);
	}
	[data-sn-hero-animate] {
		opacity: 1;
		transform: none;
	}
	.sn-hero__card:hover {
		transform: translateY(-2px);
	}
}