/*
 * The film (HANDOFF §5.6; Figma 26:2745 / 35:1101): an Ink band. The eyebrow "PRASPEKT in motion" over the
 * white eyebrow rule, the 16:9 poster with the play button in its centre (one <button>; film.js swaps in
 * YouTube's player on click), then "Play the film (2:59)" and the note. On desktop the poster is Figma's 1120
 * at 1440: the content width less a page margin on each side. Everything centred.
 */
.film {
	padding-block: var(--space-section);
	background: var(--color-ink);
}

.film__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	text-align: center;
}

.film__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.film__eyebrow {
	color: var(--color-cement);
}

.film__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-ink);
}

.film__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

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

.film__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--film-play-size-mobile);
	height: var(--film-play-size-mobile);
	transform: translate(-50%, -50%);
}

.film__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Figma: 12 between the label and the note (here 16). */
.film__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

.film__note {
	color: var(--color-cement);
}

/* Once the player is in, the "Play the film" label has done its job. */
.film.is-playing .film__label {
	display: none;
}

@media (min-width: 768px) {
	/* Figma: 48 between the rule and the poster on desktop. */
	.film__intro {
		margin-bottom: var(--space-24);
	}

	.film__play {
		width: var(--film-play-size-desktop);
		height: var(--film-play-size-desktop);
	}
}

@media (min-width: 1024px) {
	.film__player {
		width: calc(100% - var(--space-margin) * 2);
	}
}

/* The Dart in the play button pulses once when the band comes into view, after the poster has risen in. */
@media (prefers-reduced-motion: no-preference) {
	.film.is-in .film__play path {
		transform-box: fill-box;
		transform-origin: center;
		animation: film-pulse var(--motion-pulse-duration) var(--motion-ease) var(--motion-reveal-duration);
	}
}

@keyframes film-pulse {
	50% {
		transform: scale(var(--motion-pulse-scale));
	}
}