/*
 * video-story.css — S3b, the promo film in a cinematic frame.
 *
 * Wide 16:9 stage with generous margins on the pale band, a single caption
 * line beneath it, and a glass play mark centred over the poster. Deliberately
 * not a boxed embed with a logo pinned to it.
 */

.video-story {
	background: var(--bg-alt);
}

/* Width is capped by the viewport HEIGHT as well as the container, so on a
   laptop the frame never swallows the whole screen. 62vh of height at 16:9
   leaves room for the caption and the next section to peek through. */
.video-story__frame {
	margin: 0 auto;
	max-width: min(1100px, calc(56vh * 16 / 9));
}

.video-story__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--ink-deep); /* letterbox colour before the poster paints */
	box-shadow: var(--shadow-soft);
}

.video-story__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Play mark ---- */
.video-story__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	/* A soft pool of shade behind the mark: it keeps the play affordance
	   legible over any poster frame, and vanishes the moment playback starts. */
	background: radial-gradient(closest-side at 50% 50%, rgba(16, 28, 20, 0.45), rgba(16, 28, 20, 0) 100%);
	border: 0;
	cursor: pointer;
}

.video-story__play--static {
	cursor: default;
}

.video-story__play-mark {
	display: grid;
	place-items: center;
	width: clamp(72px, 9vw, 104px);
	aspect-ratio: 1;
	border-radius: var(--radius-pill);
	background: rgba(251, 252, 250, 0.92);
	box-shadow: 0 10px 30px -12px rgba(21, 36, 27, 0.55);
	transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* The triangle: a CSS shape, so there is no icon file to load. The small left
   margin optically centres it inside the circle. */
.video-story__play-mark::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--koivu);
}

.video-story__play:hover .video-story__play-mark,
.video-story__play:focus-visible .video-story__play-mark {
	transform: scale(1.06);
	background: #fff;
}

/* Once playing, native controls take over and the overlay steps aside. */
.video-story__stage.is-playing .video-story__play {
	display: none;
}

/* ---- Caption ---- */
.video-story__caption {
	margin-top: var(--s-6);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: var(--muted);
	max-width: var(--measure);
}