/**
 * "Watch video" trigger and modal.
 *
 * Values are the design's own. No box-sizing reset -- the design has none,
 * and its inline sizes assume content-box.
 *
 * The trigger has no `narrow` branch in the design; the modal sizes itself
 * from `clamp()` and a 16/9 box, so there is no breakpoint here.
 */

@keyframes rcvp-fade {

	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rcvp-scale-in {

	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes rcvp-fade-up {

	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/*
 * The wrapper exists only to keep the modal next to its trigger. `contents`
 * takes it out of layout so the trigger is the flex item wherever it is
 * dropped, exactly as the design's bare <a> is. The modal is fixed, so it
 * never becomes an item itself.
 */
.rcvp {
	display: contents;
}

/* Trigger ------------------------------------------------------------------ */

.rcvp__trigger {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #0f1117;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: color 140ms ease;
	animation: rcvp-fade-up 500ms cubic-bezier(0.22, 0.8, 0.28, 1) 380ms both;
}

.rcvp__trigger:hover {
	color: #4f46e5;
}

.rcvp__play {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: transparent;
	color: #4f46e5;
	box-shadow: inset 0 0 0 1.5px #4f46e5;
	transition: transform 220ms cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 220ms ease, background 160ms ease, color 160ms ease;
}

/* The design's `.rc-play:hover > span` rule. */
.rcvp__trigger:hover .rcvp__play,
.rcvp__trigger:focus-visible .rcvp__play {
	transform: scale(1.08);
	background: #eef2ff;
	box-shadow: inset 0 0 0 1.5px #4f46e5, 0 0 0 5px rgba(79, 70, 229, 0.1);
}

/* Modal -------------------------------------------------------------------- */

/*
 * `display: flex` below is an author rule, and author rules beat the browser's
 * `[hidden] { display: none }` whatever the specificity -- without this the
 * modal would be on screen from page load.
 */
.rcvp__modal[hidden] {
	display: none;
}

.rcvp__modal {
	position: fixed;
	inset: 0;
	/* The design uses 80; 99 so the overlay clears the site header. */
	z-index: 99;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 40px);
	background: rgba(9, 11, 20, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: rcvp-fade 180ms ease-out both;
}

.rcvp__dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
	animation: rcvp-scale-in 260ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.rcvp__close {
	position: absolute;
	z-index: 2;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 999px;
	background: rgba(9, 11, 20, 0.6);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
	transition: background 140ms ease;
}

.rcvp__close:hover,
.rcvp__close:focus-visible {
	background: rgba(9, 11, 20, 0.85);
}

.rcvp__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	background: #12141c;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}

.rcvp__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.rcvp__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.rcvp__placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}

.rcvp__caption {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {

	.rcvp__trigger,
	.rcvp__play,
	.rcvp__close {
		animation: none;
		transition: none;
	}

	.rcvp__trigger:hover .rcvp__play {
		transform: none;
	}

	.rcvp__modal,
	.rcvp__dialog {
		animation: none;
	}
}