/*
 * SECTION STYLE: SHOWREEL (a global section).
 *
 * The design of the home page: a small centred label and the video
 * under it. In the 1440 frame the video is 847 x 635 px (4:3) and sits
 * in the middle of the page; the label is 73 px above it.
 */

.aitio-showreel {
	padding: clamp(56px, 7.29vw, 105px) 0;
}

/* ---- the small label ------------------------------------------------ */

.aitio-showreel__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 clamp(40px, 5.07vw, 73px);
	color: var(--aitio-dark);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
}

/* The last line of the label sits on a yellow mark. */
.aitio-showreel__line--mark {
	background: var(--aitio-yellow);
	padding: 0 2px;
}

/* ---- the video ------------------------------------------------------ */

.aitio-reel {
	position: relative;
	width: 100%;
	max-width: 846.72px;
	margin: 0 auto;
	aspect-ratio: 4 / 3;
	background: var(--aitio-cream-deep);
	overflow: hidden;
}

.aitio-reel__poster,
.aitio-reel__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aitio-reel__video {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.aitio-reel.is-playing .aitio-reel__video {
	opacity: 1;
}

/* Less motion: the poster stays, the video is never shown. */
@media (prefers-reduced-motion: reduce) {

	.aitio-reel__video {
		display: none;
		transition: none;
	}
}