/**
 * Styles the two-column hero: copy beside a showreel video box over the
 * gold-glow studio backdrop image, closed by a timecode ruler and fact slate.
 *
 * The backdrop is a single owned image (assets/images/hero/hero-bg.webp) shown
 * clean; the showreel thumbnail is the other owned asset, and a dropped-in
 * loop plays inside the box when the files exist.
 */

.hero {
	position: relative;
	overflow: hidden;
	/* Fill the full viewport height so no next-section strip shows below the
	   hero on load; keep a floor for short/landscape screens. */
	min-height: max(42rem, 100svh);
	padding-block: calc(var(--inv-header-height) + var(--inv-space-xl)) var(--inv-space-xl);
	/* The backdrop is the owned studio image, shown clean — no veil or overlays
	   on top. Falls back to flat ink if the file is missing. Its near-black left
	   keeps the headline legible on its own. Same image as every other page's
	   top band (--inv-backdrop); the homepage sets it longhand because it also
	   shifts the framing on mobile below. */
	background-color: var(--inv-ink);
	background-image: var(--inv-backdrop);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--inv-text-inv);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--inv-space-2xl);
	min-height: calc(max(42rem, 100svh) - var(--inv-header-height) - var(--inv-space-xl) * 2);
}

.hero__main {
	display: grid;
	align-content: center;
	align-items: center;
	gap: var(--inv-space-2xl);
}

@media (min-width: 60rem) {
	.hero__main {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.82fr);
	}
}

.hero__copy {
	display: grid;
	justify-items: start;
	gap: var(--inv-space-md);
	max-width: 44rem;
}

.hero__eyebrow {
	color: var(--inv-muted-inv);
}

.hero__eyebrow::before {
	display: none;
}

.hero__title {
	/* Wider measure + tighter tracking so the headline packs more words per
	   line and takes fewer lines (less vertical space). The size sits a notch
	   below the service-page h1 because this hero's left column is narrow —
	   the full h1 scale only fit ~2 words per line here. */
	max-width: 22ch;
	font-size: clamp(2.6rem, 5vw, 5.25rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.hero__title::after {
	display: inline-block;
	width: 0.12em;
	height: 0.12em;
	margin-left: 0.06em;
	border-radius: 50%;
	background: var(--inv-signal);
	content: "";
}

.hero__intro {
	max-width: 34rem;
	color: var(--inv-muted-inv);
	font-size: clamp(1rem, 1.25vw, 1.25rem);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inv-space-md);
	margin-top: var(--inv-space-xs);
}

.hero__reel-tc {
	color: var(--inv-muted-inv);
	font-family: var(--inv-font-mono);
	font-size: 0.75rem;
	font-weight: 400;
}

/* ---- Showreel video box (right column) ---- */
.showreel-card {
	position: relative;
	justify-self: end;
	overflow: hidden;
	width: min(100%, 39rem);
	aspect-ratio: 1.62;
	border: 1px solid var(--inv-line-inv);
	border-radius: var(--inv-radius-md);
	box-shadow: var(--inv-shadow-strong);
	transform: rotate(-1.8deg);
	transition: transform var(--inv-duration) var(--inv-ease), border-color var(--inv-duration) var(--inv-ease);
}

.showreel-card:hover {
	border-color: var(--inv-signal);
	transform: rotate(0) translateY(-0.4rem);
}

.showreel-card::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, transparent 45%, var(--inv-ink-overlay));
	content: "";
	pointer-events: none;
}

.showreel-card img,
.showreel-card__loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showreel-card img {
	transition: transform var(--inv-duration) var(--inv-ease);
}

.showreel-card:hover img {
	transform: scale(1.035);
}

/* The dropped-in loop sits above the still; hidden when motion is reduced. */
.showreel-card__loop {
	z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
	.showreel-card__loop {
		display: none;
	}
}

.showreel-card__tag,
.showreel-card__duration,
.showreel-card__caption {
	position: absolute;
	z-index: 2;
	font-family: var(--inv-font-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
}

.showreel-card__tag {
	top: var(--inv-space-sm);
	left: var(--inv-space-sm);
	padding: var(--inv-space-xs) var(--inv-space-sm);
	border: 1px solid var(--inv-signal);
	background: var(--inv-ink-overlay-strong);
	color: var(--inv-signal);
}

.showreel-card__button {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(3.8rem, 7vw, 5.5rem);
	height: clamp(3.8rem, 7vw, 5.5rem);
	border-radius: 50%;
	background: var(--inv-signal);
	color: var(--inv-ink);
	transform: translate(-50%, -50%);
	transition: transform var(--inv-duration-fast) var(--inv-ease);
}

.showreel-card:hover .showreel-card__button {
	transform: translate(-50%, -50%) scale(1.08);
}

.showreel-card__button svg {
	width: 36%;
	height: 36%;
	margin-left: 0.2rem;
}

.showreel-card__duration {
	right: var(--inv-space-sm);
	bottom: var(--inv-space-xl);
	color: var(--inv-muted-inv);
}

.showreel-card__caption {
	right: var(--inv-space-sm);
	bottom: var(--inv-space-sm);
	left: var(--inv-space-sm);
	display: flex;
	justify-content: space-between;
	gap: var(--inv-space-sm);
	color: var(--inv-muted-inv);
}

/* ---- Deck: timecode ruler + fact slate ---- */
.hero__deck {
	display: grid;
	gap: var(--inv-space-sm);
}

.hero__ruler {
	height: 0.55rem;
	border-top: 1px solid var(--inv-line-inv);
	background-image: repeating-linear-gradient(90deg, var(--inv-line-inv) 0 1px, transparent 1px 0.75rem);
	background-size: 100% 0.35rem;
	background-repeat: no-repeat;
}

.hero__signals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--inv-space-sm) var(--inv-space-xl);
	color: var(--inv-muted-inv);
	font-family: var(--inv-font-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	text-transform: uppercase;
}

.hero__signals span {
	display: inline-flex;
	align-items: center;
	gap: var(--inv-space-xs);
}

.hero__signals strong {
	color: var(--inv-text-inv);
	font-family: var(--inv-font-display);
	font-size: 1.3rem;
	letter-spacing: -0.02em;
}

.hero__signals i {
	color: var(--inv-signal);
	font-style: normal;
}

@media (max-width: 59.99rem) {
	.hero {
		/* Content sets the height once the columns stack — no viewport floor. */
		min-height: auto;
		/* Columns stack; show the dark-left slice of the image so the stacked
		   copy stays legible without any veil (glow eases in on the right). */
		background-position: 22% center;
	}

	.hero__inner {
		min-height: 0;
	}

	.showreel-card {
		justify-self: stretch;
		width: 100%;
		transform: none;
	}
}

@media (max-width: 35rem) {
	.hero__signals {
		display: grid;
		gap: var(--inv-space-sm);
	}
}