/**
 * Block: Hero Video (gagamuller/hero-video).
 * Flexible Content layout (layouts/hero-video) – also used by the legacy block.
 * Figma: MK 05 – Website 2026 › Wireframe V5 › homepage v2 › header (596:958).
 *
 * Layer stack (Figma 596:959 → 596:961), inside the rounded container:
 *   1. black base ............................ #000 (Figma: black, multiply)
 *   2. media (poster → Vimeo) ................ 55% opacity
 *   3. gradient overlay (CSS, not in video) .. 99.02deg, see --gm-hero-gradient
 *   4. content (heading, intro, buttons)
 *
 * 1440px values are Figma; smaller sizes scale fluidly (Figma has no
 * tablet/mobile frames – PROVISIONAL, DECISIONS.md D3b/D23).
 */

.gm-hero-video {
	/* FIGMA 596:961 – exact stops. Left: #101010 at 85% behind the heading;
	   clear in the middle; translucent brand purple (#7215f4 at 29.8%) right. */
	--gm-hero-gradient: linear-gradient(
		99.02deg,
		rgb(16 16 16 / 0.85) 25.923%,
		rgb(16 16 16 / 0) 52.084%,
		rgb(114 21 244 / 0.298) 79.541%
	);
	--gm-hero-media-opacity: 0.55;                       /* FIGMA 596:960 */
	--gm-hero-radius: clamp(40px, 7vw, 101px);           /* FIGMA 101px at 1440 (--gm-radius-hero) */
	--gm-hero-min-h: clamp(500px, 47.5vw, 684px);        /* Figma 778px at 1440; −12% (v0.7.1) */
	--gm-hero-pad-top: clamp(40px, 6.5vw, 94px);         /* Figma 117px; reduced with the height */
	--gm-hero-pad-bottom: clamp(36px, 5.3vw, 76px);      /* Figma 91px; reduced with the height */
	--gm-hero-text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);  /* FIGMA */
	--gm-hero-cta-width: 272px;                          /* Figma 321; refined −15% (v0.7.3) */
	--gm-hero-cta-icon: 40px;                            /* Figma 49; refined (v0.7.3) */
	--gm-hero-cta-h: 54px;                               /* Figma 63; refined (v0.7.3) */

	position: relative;
	isolation: isolate;
	display: flex;
	min-height: var(--gm-hero-min-h);
	overflow: hidden;
	border-radius: 0 0 var(--gm-hero-radius) var(--gm-hero-radius);
	background: #000;
	color: var(--gm-color-white);
}

/* --- 2. Media ------------------------------------------------------- */

.gm-hero-video__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: var(--gm-hero-media-opacity);
}

.gm-hero-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Vimeo player sized like object-fit: cover (16:9) via container units. */
.gm-hero-video__frame {
	position: absolute;
	inset: 0;
	container-type: size;
	opacity: 0;
	transition: opacity 500ms var(--gm-ease);
}

.gm-hero-video__frame.is-playing {
	opacity: 1;
}

.gm-hero-video__frame iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78cqh);
	height: max(100%, 56.25cqw);
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* --- 3. Gradient overlay -------------------------------------------- */

.gm-hero-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--gm-hero-gradient);
	pointer-events: none;   /* never blocks the buttons */
}

/* --- 4. Content ----------------------------------------------------- */

.gm-hero-video__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gm-space-40);
	width: 100%;
	padding-top: var(--gm-hero-pad-top);
	padding-bottom: var(--gm-hero-pad-bottom);
}

.gm-hero-video__title {
	max-width: 2.45em;      /* FIGMA 428px at 175px: one word per line */
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: calc(var(--gm-text-display) * 0.88); /* v0.7.0: −12% vs Figma */
	font-weight: var(--gm-weight-bold);
	line-height: 0.88;
	text-shadow: var(--gm-hero-text-shadow);
}

.gm-hero-video__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gm-space-32);
}

.gm-hero-video__intro {
	max-width: 660px;       /* Figma 730 − 10% with the smaller lead */
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: calc(var(--gm-text-lead) * 0.9); /* v0.7.0: −10% */
	font-weight: var(--gm-weight-bold);
	line-height: 1.1;
	text-shadow: var(--gm-hero-text-shadow);
}

.gm-hero-video__highlight {
	color: var(--gm-color-light-purple);
}

.gm-hero-video__actions {
	display: grid;
	flex: 0 0 var(--gm-hero-cta-width);
	gap: 12px;              /* Figma 15px, tightened with the smaller buttons */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-hero-video__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;                 /* FIGMA: label runs up to the icon */
	box-sizing: border-box;
	width: 100%;
	min-height: var(--gm-hero-cta-h);
	padding: 0 7px 0 24px;  /* label 24px in, icon 7px from the edge */
	border: 1px solid transparent;
	border-radius: var(--gm-radius-pill);
	color: var(--gm-color-white);
	font-family: var(--gm-font-body);
	font-size: calc(var(--gm-text-control) * 0.8);   /* 20px at 1440 */
	font-weight: var(--gm-weight-regular);
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;   /* FIGMA ALL CAPS (D6) */
	transition: background-color var(--gm-duration) var(--gm-ease), border-color var(--gm-duration) var(--gm-ease);
}

.gm-hero-video .gm-hero-video__cta {
	text-decoration: none;  /* beats core global styles :root :where(a) underline */
}

.gm-hero-video__cta > span:first-child {
	min-width: 0;
	white-space: nowrap;
}

.gm-hero-video__cta .gm-icon {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--gm-hero-cta-icon);
	height: var(--gm-hero-cta-icon);
	padding: 10px;
	border-radius: var(--gm-radius-round);
	transition: transform var(--gm-duration) var(--gm-ease);
}

.gm-hero-video__cta--primary {
	background: var(--gm-color-purple);
}

.gm-hero-video__cta--primary .gm-icon {
	background: var(--gm-color-light-purple);
}

.gm-hero-video__cta--secondary {
	border-color: var(--gm-color-white);
	background: transparent;
}

.gm-hero-video__cta--secondary .gm-icon {
	border: 1px solid var(--gm-color-white);
}

/* Hover / focus – PROVISIONAL (not designed in Figma, D6/D24).
   Text always stays white: beats the global a:hover colour and core
   global styles (both would otherwise turn the label purple). */
.gm-hero-video .gm-hero-video__cta,
.gm-hero-video .gm-hero-video__cta:hover,
.gm-hero-video .gm-hero-video__cta:focus,
.gm-hero-video .gm-hero-video__cta:visited {
	color: var(--gm-color-white);
}

.gm-hero-video__cta {
	transition:
		background-color 300ms var(--gm-ease),
		border-color 300ms var(--gm-ease),
		box-shadow 300ms var(--gm-ease),
		transform 300ms var(--gm-ease);
}

.gm-hero-video__cta .gm-icon {
	transition:
		background-color 300ms var(--gm-ease),
		border-color 300ms var(--gm-ease),
		color 300ms var(--gm-ease),
		transform 300ms var(--gm-ease);
}

/* Primary: purple lifts slightly brighter with a soft brand glow; the arrow
   circle turns white and nudges along the arrow's direction. */
.gm-hero-video__cta--primary:hover,
.gm-hero-video__cta--primary:focus-visible {
	background: color-mix(in srgb, var(--gm-color-purple) 88%, var(--gm-color-white));
	box-shadow: 0 12px 32px -12px rgb(114 21 244 / 0.75);
}

.gm-hero-video__cta--primary:hover .gm-icon,
.gm-hero-video__cta--primary:focus-visible .gm-icon {
	background: var(--gm-color-white);
	color: var(--gm-color-purple);
}

/* Secondary: frosted fill; the outlined circle fills white. */
.gm-hero-video__cta--secondary:hover,
.gm-hero-video__cta--secondary:focus-visible {
	background: rgb(255 255 255 / 0.12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.gm-hero-video__cta--secondary:hover .gm-icon,
.gm-hero-video__cta--secondary:focus-visible .gm-icon {
	border-color: var(--gm-color-white);
	background: var(--gm-color-white);
	color: var(--gm-color-black);
}

.gm-hero-video__cta:hover .gm-icon,
.gm-hero-video__cta:focus-visible .gm-icon {
	transform: translate(3px, 3px);
}

.gm-hero-video__cta:active {
	transform: scale(0.98);
}

.gm-hero-video__cta:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color-on-dark);
	outline-offset: var(--gm-focus-offset);
}

/* Pause / play (WCAG 2.2.2): shown by view.js only when the video runs. */
.gm-hero-video__toggle {
	position: absolute;
	top: var(--gm-space-24);
	right: var(--gm-gutter);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gm-touch-target);
	height: var(--gm-touch-target);
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.3);
	border-radius: var(--gm-radius-round);
	background: rgb(16 16 16 / 0.5);
	color: var(--gm-color-white);
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.gm-hero-video__toggle[hidden] {
	display: none;
}

.gm-hero-video__toggle:hover {
	border-color: var(--gm-color-light-purple);
}

.gm-hero-video__toggle:focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-focus-color-on-dark);
	outline-offset: var(--gm-focus-offset);
}

.gm-hero-video__toggle .gm-icon {
	width: 18px;
	height: 18px;
}

.gm-hero-video__toggle-icon {
	display: inline-flex;
}

.gm-hero-video__toggle[aria-pressed="false"] .gm-hero-video__toggle-icon--play,
.gm-hero-video__toggle[aria-pressed="true"] .gm-hero-video__toggle-icon--pause {
	display: none;
}

/* Desktop: Figma grid – buttons in the right column rise beside the heading
   (FIGMA: buttons 537–678px, intro 602–687px, hero 778px). */
@media (min-width: 1024px) {
	.gm-hero-video__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--gm-hero-cta-width);
		grid-template-rows: 1fr auto;
		gap: 50px var(--gm-space-32);   /* FIGMA heading → intro 50px */
	}

	.gm-hero-video__footer {
		display: contents;
	}

	.gm-hero-video__title {
		grid-area: 1 / 1;
	}

	.gm-hero-video__intro {
		grid-area: 2 / 1;
		align-self: end;
	}

	.gm-hero-video__actions {
		grid-area: 1 / 2 / 3 / 3;
		align-self: end;
		margin-bottom: 9px;             /* FIGMA buttons end 9px above the intro */
	}
}

/* --- Tablet and mobile (PROVISIONAL) -------------------------------- */

@media (max-width: 1023px) {
	.gm-hero-video {
		--gm-hero-min-h: 540px;
		--gm-hero-pad-top: 36px;
		--gm-hero-pad-bottom: 32px;
	}

	.gm-hero-video__inner {
		gap: var(--gm-space-24);
	}

	.gm-hero-video__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.gm-hero-video__actions {
		flex-basis: auto;
		width: min(var(--gm-hero-cta-width), 100%);
	}
}

@media (max-width: 479px) {
	.gm-hero-video {
		--gm-hero-min-h: 440px;
		--gm-hero-pad-top: 28px;
		--gm-hero-pad-bottom: 24px;
		--gm-hero-cta-h: 50px;
		--gm-hero-cta-icon: 36px;
	}

	.gm-hero-video__cta {
		font-size: 1rem;   /* 16px: labels stay on one line at 320px */
	}

	.gm-hero-video__actions {
		gap: 10px;
		width: min(250px, 100%);
	}
}

/* --- Entrance (D24): word-by-word heading, then a quiet fade --------
   Words rise softly out of a light blur, one after another; the supporting
   line and the buttons then fade in. Restrained timings – no bounce. */

.gm-hero-video__word {
	display: inline-block;
	animation: gm-hero-word 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(150ms + var(--gm-word, 0) * 140ms);
}

.gm-hero-video__intro,
.gm-hero-video__actions {
	animation: gm-hero-fade 1200ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
	animation-delay: calc(450ms + var(--gm-words, 3) * 140ms);
}

.gm-hero-video__actions {
	animation-delay: calc(650ms + var(--gm-words, 3) * 140ms);
}

@keyframes gm-hero-word {
	from {
		opacity: 0;
		filter: blur(8px);
		transform: translateY(0.18em);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}

@keyframes gm-hero-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Reduced motion: poster only (view.js never loads the player) and no
   entrance animation – content is simply there. */
@media (prefers-reduced-motion: reduce) {
	.gm-hero-video__frame {
		display: none;
	}

	.gm-hero-video__word,
	.gm-hero-video__intro,
	.gm-hero-video__actions {
		animation: none;
	}
}