/*
 * Legal stage — the legal notice and the privacy policy open with a stage
 * card like the four stages of the front page: two Boreas flip the pins of a
 * rail wagon while the card scrolls away (assets/js/legal-stage.js). The text
 * of the page follows below in the normal flow.
 * Without JS or with reduced motion the first frame stays.
 */
.ls-stage {
	position: relative;
	padding: 1rem;
	background: #fff;
	margin: 0 !important;
	max-width: none !important;
}

.ls-teaser {
	position: relative;
	overflow: hidden;
	height: calc(100vh - 2rem);
	min-height: 560px;
	background: #0f1a20;
	border-radius: var(--radius);
	color: #fff;
	display: flex;
	/* the title sits low in the card, like the stages */
	align-items: flex-end;
}

.ls-teaser::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius);
	pointer-events: none;
	z-index: 5;
}

.ls-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* legal-stage.js draws the later frames with the same crop */
	object-position: 50% 50%;
	filter: saturate(0.8) brightness(0.85);
}

/* dark towards the title on the left and towards the lower edge */
.ls-teaser::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #0f1a20 0%, rgba(15, 26, 32, 0.7) 22%, rgba(15, 26, 32, 0) 50%),
		linear-gradient(180deg, rgba(15, 26, 32, 0) 55%, #0f1a20 100%);
}

.ls-content {
	position: relative;
	z-index: 2;
	padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 12vh, 9rem);
}

/* the size of the career closing line */
.ls-title {
	font-size: clamp(1.75rem, 2.9vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
	color: #fff;
}

.ls-title span {
	display: block;
	color: rgba(255, 255, 255, 0.62);
}

/* the scroll hint of the Aiolos stage on the front page */
.ls-content .ls-hint {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.62);
	margin: 1.5rem 0 0;
	white-space: nowrap;
}

.ls-hint::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.5rem;
	margin-left: 0.75rem;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.62);
	animation: ls-hint 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
	transform-origin: top;
}

@keyframes ls-hint {
	0% { transform: scaleY(0); }
	60% { transform: scaleY(1); }
	100% { transform: scaleY(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ls-hint::after {
		animation: none;
	}
}

@media (max-width: 767.98px) {
	.ls-title {
		font-size: var(--wp--preset--font-size--xl);
	}

	/* a fixed crop around the robots where they flip the pins */
	.ls-frame {
		object-position: 30% 50%;
	}

	/* the robots stand in the middle of the narrow card: dark only towards
	   the title at the bottom */
	.ls-teaser::after {
		background: linear-gradient(180deg, rgba(15, 26, 32, 0) 50%, #0f1a20 100%);
	}
}