/*
 * Heroes (HANDOFF §4, §5.4; Figma 26:2640 / 35:1093). Layers from the bottom: the poster, the video, the
 * hero fade, (the fixed header), the content, the video control. At least the design height, growing
 * when the content needs room; the content never sits under the header. Inner pages: a photo instead of the
 * poster and the video, no buttons, no control.
 */

.hero {
	position: relative;
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--color-ink);
	isolation: isolate;
	overflow: hidden;
}

/* About us (A.1): HANDOFF's 640 at 375 and 680 at 1440 (Figma), fluid between like the type. theme.json has no
   hero heights; these are the brief's. */
.hero--about {
	min-height: clamp(40rem, 39.12rem + 3.756vw, 42.5rem);
}

/* Products (P.1) and Contacts (K.1): 400 at 375 and 480 at 1440, the same way. */
.hero--compact {
	min-height: clamp(25rem, 23.239rem + 7.512vw, 30rem);
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hero__poster,
.hero__image,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Transparent until it plays, then it fades in over the poster. */
.hero__video {
	opacity: 0;
	transition: opacity var(--motion-reveal-duration) var(--motion-ease);
}

.hero.is-playing .hero__video {
	opacity: 1;
}

/* Phones: a vertical fade, held to 65% of the height. The text spans the width there, and the diagonal fade is thin at
   the right, where a white silo can sit behind the end of a line; this one keeps the headline and the lead at AA on
   every frame of the loop from 320 px (approved after the testing round, 3 October 2026). From tablets up, Figma's
   diagonal from the bottom left. */
.hero__fade {
	position: absolute;
	inset: 0;
	background: var(--color-hero-fade-phone);
}

/* Phones: clear of the header and the video control under it (64 + 20 + 48 + 20). */
.hero__body {
	display: flex;
	align-items: flex-end;
	padding-top: calc(var(--header-height-mobile) + var(--video-control-offset-mobile) * 2 + var(--video-control-size));
	padding-bottom: calc(var(--space-section) - var(--space-24));
}

/* H1, text and buttons 24 apart. The block spans 7 columns (Figma 760; the H1 needs 724), the text at
   most 640 (half the content width), as in Figma. */
.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	width: 100%;
}

.hero__text {
	max-width: calc(var(--layout-content) / 2);
}

/* Phones: the buttons full width, one under the other (Figma 12 apart; here 16). */
.hero__actions {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: var(--space-16);
}

@media (min-width: 768px) {
	.hero__fade {
		background: var(--color-hero-fade);
	}

	.hero__body {
		padding-top: calc(var(--header-height) + var(--space-48));
	}

	.hero__content {
		width: calc((100% - (var(--grid-columns-tablet) - 1) * var(--grid-gutter)) / var(--grid-columns-tablet) * 7 + 6 * var(--grid-gutter));
	}

	.hero__actions {
		flex-flow: row wrap;
		align-self: flex-start;
	}
}

@media (min-width: 1024px) {
	.hero__content {
		width: calc((100% - (var(--grid-columns) - 1) * var(--grid-gutter)) / var(--grid-columns) * 7 + 6 * var(--grid-gutter));
	}
}

/* The video control (Figma 8:121): 48 × 48, Ink with the Notch. Phones: top right, under the header;
   from 768: bottom right, 32 from the edges. Shown only once the video plays. */
.hero__control {
	position: absolute;
	top: calc(var(--header-height-mobile) + var(--video-control-offset-mobile));
	right: var(--video-control-offset-mobile);
	width: var(--video-control-size);
	height: var(--video-control-size);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__control[hidden] {
	display: none;
}

.hero__control-icon {
	width: 100%;
	height: 100%;
}

.hero__control-icon--play,
.hero.is-paused .hero__control-icon--pause {
	display: none;
}

.hero.is-paused .hero__control-icon--play {
	display: block;
}

@media (min-width: 768px) {
	.hero__control {
		top: auto;
		right: var(--video-control-offset-desktop);
		bottom: var(--video-control-offset-desktop);
	}
}

/* Entrance (HANDOFF §5.4): the H1's lines rise, then the text and the buttons. The inline script in the
   <head> marks the page .js before the first paint, so the content starts hidden instead of flashing;
   hero.js takes over. If it never runs, the content shows anyway after a moment. */
.hero__word {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	.js .hero--intro .hero__title,
	.js .hero--intro .hero__text,
	.js .hero--intro .hero__actions {
		opacity: 0;
		animation: hero-failsafe 0s calc(var(--motion-reveal-duration) * 4) forwards;
	}
}

@keyframes hero-failsafe {
	to {
		opacity: 1;
	}
}