/*
 * Heroes: Home (HANDOFF §5.4, Figma 14:86 / 67:540) and, at the end, the inner pages (.hero--page, §5.5).
 * Loaded on every page that has a hero.
 * Layers, bottom up: media (poster, later the video), Cell intro layer, panel, header, pause button.
 */

/* At least the screen's height (640 at the least); taller only when the panel's content needs it (short
   windows, zoom, a phone held sideways), so nothing is ever cut off or hidden under the header (HANDOFF §8). */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: max(100svh, 640px);
	overflow: hidden;
	background: var(--color-graphite);
	color: var(--color-white);
}

.hero__media,
.hero__media picture,
.hero__poster,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__poster,
.hero__video {
	object-fit: cover;
	object-position: center;
}

/* The 480 px Cell: draws itself during the intro, then stays as an 8% watermark in the panel area. */
.hero__intro {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--panel-width-desktop);
	display: grid;
	place-items: center;
	opacity: var(--structure-opacity-dark);
	pointer-events: none;
}

.hero__cell {
	width: min(480px, 60vh, 90%);
	height: auto;
}

/* The panel is in the flow and fills the hero's height, so its content sets the hero's minimum. */
.hero__panel-wrap {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	width: var(--panel-width-desktop);
}

/* The content is centred in the full height (Figma 14:86): the header's height above and below keeps the
   centre where it is and the text clear of the header. */
.hero__panel {
	--facet: var(--facet-xl);
	flex: 1;
	display: flex;
	align-items: center;
	padding: var(--header-height) var(--space-64) var(--header-height) var(--margin);
	background: color-mix(in srgb, var(--color-graphite) calc(var(--panel-opacity) * 100%), transparent);
	clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% calc(var(--facet) * 0.57735), 100% 100%, 0 100%);
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	width: 100%;
	max-width: 470px;
}

.hero__content > * {
	margin: 0;
}

.hero__title {
	color: var(--color-white);
}

.hero__actions {
	gap: var(--space-16);
}

/* The only round element on the site: the 40 px pause/play button. */
.hero__pause {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--color-white);
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.hero__pause-icon {
	display: flex;
	gap: 5px;
	width: 14px;
	height: 14px;
}

.hero__pause-icon span {
	width: 3px;
	height: 14px;
	background: var(--color-white);
}

.hero__pause.is-paused .hero__pause-icon {
	width: 12px;
	margin-left: 3px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	gap: 0;
}

.hero__pause.is-paused .hero__pause-icon span {
	width: 6px;
}

/* ---------- Mobile: the panel is a sheet pinned to the bottom (Figma 67:540) ---------- */

@media (max-width: 767px) {
	/* The header's height on top, so the sheet never slides under it on a short screen. */
	.hero {
		min-height: 100svh;
		padding-top: var(--header-height-mobile);
	}

	/* The Cell draws over the graphite cover, then settles as the watermark inside the bottom sheet. */
	.hero__intro {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 60svh;
	}

	.hero__panel-wrap {
		order: 2;
		flex: none;
		width: 100%;
	}

	.hero__panel {
		--facet: var(--facet-l);
		display: block;
		padding: 40px var(--margin);
	}

	.hero__content {
		max-width: none;
	}

	.hero__actions {
		gap: 12px;
	}

	.hero__pause {
		position: relative;
		order: 1;
		right: auto;
		bottom: auto;
		align-self: flex-end;
		margin: 0 20px 16px 0;
	}
}

/* ---------- Intro, once per session (HANDOFF §5.4). Gated by the inline head script. ---------- */

.hero-fade .hero {
	animation: hero-fade 0.4s var(--ease) both;
}

@keyframes hero-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* 0.0–0.9 s: on graphite, the Cell draws itself. */
.hero-intro .hero__intro {
	opacity: 1;
	animation: hero-cell-settle 0.8s var(--ease) 0.8s forwards;
}

.hero-intro .hero__cell polygon {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: hero-draw 0.9s var(--ease) 0s forwards;
}

@keyframes hero-draw {
	to { stroke-dashoffset: 0; }
}

/* 0.8–1.6 s: the media fades in behind; the Cell fades to the 8% watermark. */
.hero-intro .hero__media {
	animation: hero-fade 0.8s var(--ease) 0.8s both;
}

@keyframes hero-cell-settle {
	to { opacity: var(--structure-opacity-dark); }
}

/* 1.0–1.6 s: the panel reveals left to right, keeping its Facet. */
.hero-intro .hero__panel-wrap {
	clip-path: inset(0 100% 0 0);
	animation: hero-panel 0.6s var(--ease) 1s forwards;
}

@keyframes hero-panel {
	to { clip-path: inset(0 0 0 0); }
}

/* 1.4–2.0 s: eyebrow, title and text rise in sequence; the rule draws. */
.hero-intro .hero__eyebrow,
.hero-intro .hero__title,
.hero-intro .hero__text,
.hero-intro .hero__actions {
	animation: hero-rise 0.6s var(--ease) both;
}

.hero-intro .hero__eyebrow { animation-delay: 1.4s; }
.hero-intro .hero__title { animation-delay: 1.55s; }
.hero-intro .hero__text { animation-delay: 1.7s; }
.hero-intro .hero__actions { animation-delay: 1.85s; }

.hero-intro .hero__rule {
	transform-origin: left center;
	animation: hero-rule 0.6s var(--ease) 1.45s both;
}

@keyframes hero-rise {
	from {
		opacity: 0;
		transform: translateY(var(--motion-reveal-distance));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hero-rule {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ---------- Inner-page heroes: About us, CRM, Contacts (HANDOFF §5.5) ---------- */

/* 70vh (560–760), the same panel at 44% with Facet xl, its content centred in the space below the
   header (Figma 12:18); taller only if the content needs it. Mobile: 720 tall at most 90svh, the sheet
   pinned to the bottom as on Home. */
.hero--page {
	min-height: clamp(560px, 70vh, 760px);
}

@media (min-width: 768px) {
	.hero--page .hero__panel {
		padding-bottom: 0;
	}
}

@media (max-width: 767px) {
	.hero--page {
		min-height: min(720px, 90svh);
	}
}

/* No intro: on every load the panel reveals left to right, then the eyebrow, rule, H1 and the button or
   the hours line (Contacts) come in. */
@media (prefers-reduced-motion: no-preference) {
	.hero--page .hero__panel-wrap {
		clip-path: inset(0 100% 0 0);
		animation: hero-panel 0.6s var(--ease) 0.1s forwards;
	}

	.hero--page .hero__eyebrow,
	.hero--page .hero__title,
	.hero--page .hero__text,
	.hero--page .hero__actions {
		animation: hero-rise var(--motion-reveal-duration) var(--ease) both;
	}

	.hero--page .hero__eyebrow {
		animation-delay: 0.4s;
	}

	.hero--page .hero__title {
		animation-delay: calc(0.4s + 2 * var(--motion-stagger));
	}

	.hero--page .hero__text,
	.hero--page .hero__actions {
		animation-delay: calc(0.4s + 3 * var(--motion-stagger));
	}

	.hero--page .hero__rule {
		transform-origin: left center;
		animation: hero-rule 0.6s var(--ease) calc(0.4s + var(--motion-stagger)) both;
	}
}