.pg-opening {
	--pg-opening-inline-gutter: clamp(0.5rem, 3vw, var(--pg-shell-gutter));

	min-height: 100svh;
	background: var(--pg-color-stage-bg);
	color: var(--pg-color-stage-text);
}

.pg-opening__inner {
	container-type: inline-size;
	width: min(
		calc(
			100% - var(--pg-opening-inline-gutter) - var(--pg-opening-inline-gutter)
		),
		var(--pg-shell-max)
	);
	margin-inline: auto;
	padding-block: clamp(1rem, 4vw, 2.5rem);
	padding-inline: 0;
}

.pg-opening__media {
	--pg-opening-media-gap: clamp(1rem, 3vw, 2rem);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pg-opening-media-gap);
	align-items: stretch;
}

.pg-opening__video {
	min-width: 0;
	aspect-ratio: 16 / 9;
}

.pg-opening__video,
.pg-opening__playlist {
	width: 100%;
	min-width: 0;
	background: color-mix(in srgb, var(--pg-color-stage-text) 8%, transparent);
}

.pg-opening__youtube,
.pg-opening__soundcloud {
	display: block;
	width: 100%;
	border: 0;
}

.pg-opening__youtube {
	height: 100%;
}

.pg-opening__playlist {
	min-height: 320px;
}

.pg-opening__soundcloud {
	height: 320px;
}

.pg-opening__soundcloud-fallback {
	display: none;
	padding: 1rem;
	color: var(--pg-color-stage-text);
}

.pg-opening[data-soundcloud-state="error"] .pg-opening__soundcloud-fallback {
	display: inline-block;
}

.pg-opening__reveal {
	display: flex;
	justify-content: center;
	padding-block-start: clamp(1.25rem, 4vw, 2.5rem);
}

.pg-opening__reveal .pg-cta {
	max-width: 100%;
}

html.pg-opening-booting .pg-site-header,
html.pg-opening-booting .pg-site-main,
html.pg-opening-booting .pg-site-footer,
html.pg-opening-booting .pg-opening {
	visibility: hidden;
}

html.pg-opening-impact .pg-site-header,
html.pg-opening-impact .pg-site-main,
html.pg-opening-impact .pg-site-footer,
html.pg-opening-autoplay-blocked .pg-site-header,
html.pg-opening-autoplay-blocked .pg-site-main,
html.pg-opening-autoplay-blocked .pg-site-footer {
	display: none;
}

html.pg-opening-expanded .pg-site-header,
html.pg-opening-expanded .pg-site-main,
html.pg-opening-expanded .pg-site-footer {
	animation: pg-opening-reveal 400ms ease both;
}

html.pg-opening-expanded .pg-opening__reveal,
html.pg-opening-direct-anchor .pg-opening__reveal {
	display: none;
}

@keyframes pg-opening-reveal {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html.pg-opening-expanded .pg-site-header,
	html.pg-opening-expanded .pg-site-main,
	html.pg-opening-expanded .pg-site-footer {
		animation: none;
	}
}

@media (min-width: 48rem) {
	.pg-opening__media {
		--pg-opening-video-column-share: 0.6078431373;
		--pg-opening-video-aspect-height: 0.5625;
		--pg-opening-media-reference-height: calc(
			(100cqw - var(--pg-opening-media-gap)) *
			var(--pg-opening-video-column-share) *
			var(--pg-opening-video-aspect-height)
		);

		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.pg-opening__video,
	.pg-opening__playlist {
		height: var(--pg-opening-media-reference-height);
	}

	.pg-opening__playlist,
	.pg-opening__soundcloud {
		min-height: 0;
	}

	.pg-opening__soundcloud {
		height: 100%;
	}
}