/* Osool Hero ------------------------------------------------------------------
 * Desktop (1440 design): video fills the screen under the header, dark corner
 * gradient, text at the bottom (64px headline, 18px text), fading up on load.
 * Phones: the video is pinned (sticky) full screen and the text block, which
 * starts below the first screen, slides up over it as the page scrolls.
 */
.ohero {
	--ohero-offset: 72px;            /* header height */
	--ohero-start: 100;              /* phones: where the text starts, % of screen */
	--ohero-overlay: #000;
	--ohero-overlay-opacity: 1;
	--ohero-text-width: 940px;
	--ohero-blue: #0088d3;
	position: relative;
	display: flex;
	align-items: flex-end;
	height: calc(100vh - var(--ohero-offset));
	height: calc(100svh - var(--ohero-offset));
	min-height: 560px;
	overflow: hidden;
	background: #1b1d38;
	color: #fff;
	isolation: isolate;
}

.ohero--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

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

.ohero__poster,
.ohero__poster img,
.ohero .ohero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.ohero .ohero__video {
	opacity: 0;
	transition: opacity .6s ease;
}

.ohero .ohero__video.is-playing {
	opacity: 1;
}

/* Corner gradient from the design: clear at the top right, dark at the bottom left. */
.ohero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(237deg, transparent 0%, var(--ohero-overlay) 100%);
	opacity: var(--ohero-overlay-opacity);
	pointer-events: none;
}

.ohero[dir="rtl"] .ohero__overlay {
	background: linear-gradient(123deg, transparent 0%, var(--ohero-overlay) 100%);
}

.ohero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 80px 74px;
}

.ohero__inner {
	max-width: 1180px;
}

.ohero .ohero__title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: 64px;
	font-weight: 600;
	line-height: 1.1;
}

.ohero .ohero__line {
	display: block;
}

.ohero .ohero__line--hl {
	color: var(--ohero-blue);
}

.ohero .ohero__text {
	max-width: var(--ohero-text-width);
	margin: 28px 0 0;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

/* Desktop entrance: lines rise in one after another. */
.ohero[data-osool-hero] .ohero__line,
.ohero[data-osool-hero] .ohero__text {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

.ohero.is-in .ohero__line,
.ohero.is-in .ohero__text {
	opacity: 1;
	transform: none;
}

.ohero.is-in .ohero__line--hl {
	transition-delay: .12s;
}

.ohero.is-in .ohero__text {
	transition-delay: .26s;
}

@media (max-width: 1024px) {
	.ohero__content {
		padding: 0 40px 56px;
	}

	.ohero .ohero__title {
		font-size: 44px;
	}
}

/* Phones: pinned video, text scrolls up over it. ----------------------------- */
@media (max-width: 767px) {
	.ohero {
		display: block;
		height: auto;
		min-height: 0;
		overflow: visible; /* needed for the pinned (sticky) video */
	}

	.ohero__media {
		position: sticky;
		inset: auto;
		top: 0; /* after "inset", which would reset it */
		height: 100vh;
		height: 100svh;
	}

	/* Darker towards the bottom, where the text passes. */
	.ohero__overlay,
	.ohero[dir="rtl"] .ohero__overlay {
		background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .35) 45%, var(--ohero-overlay) 100%);
		opacity: calc(var(--ohero-overlay-opacity) * .85);
	}

	/* The text starts at --ohero-start % of the screen and scrolls up over the video. */
	.ohero__content {
		margin-top: calc((var(--ohero-start) - 100) * 1svh);
		padding: 0 20px 40px;
	}

	.ohero .ohero__title {
		font-size: 32px;
		line-height: 1.15;
	}

	.ohero .ohero__text {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.45;
	}


	/* Text is revealed by the scroll itself; no load animation on phones. */
	.ohero[data-osool-hero] .ohero__line,
	.ohero[data-osool-hero] .ohero__text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ohero[data-osool-hero] .ohero__line,
	.ohero[data-osool-hero] .ohero__text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}