/* The poster is the deliberate fallback when video is unavailable or motion is reduced. */
.home .site-header:not(.is-scrolled) {
	background: linear-gradient(180deg, rgba(29, 5, 13, .88), rgba(29, 5, 13, .67));
	backdrop-filter: blur(12px);
}

.campaign-hero__media {
	top: var(--hero-header-height, 140px);
	overflow: hidden;
	background: #320412 url('../video/xhose-hero-poster-v3.png') right center / contain no-repeat;
}

.campaign-hero { background: #320412; }

.campaign-hero__media::after {
	z-index: 1;
	background: none;
}

.campaign-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: right center;
	opacity: 0;
	transition: opacity .65s ease;
	transform-origin: 75% 50%;
	animation: xhose-campaign-breathe 16s ease-in-out infinite alternate;
	animation-play-state: paused;
}

@keyframes xhose-campaign-breathe {
	from { transform: scale(1); }
	to { transform: scale(1.012); }
}

.campaign-hero__media.is-moving .campaign-hero__video { animation-play-state: running; }

.campaign-hero__motion {
	position: absolute;
	bottom: 1.25rem;
	right: 5vw;
	z-index: 3;
	min-height: 44px;
	padding: .5rem 1rem;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 30px;
	background: rgba(29,5,13,.72);
	color: #fff;
	font-size: .7rem;
	letter-spacing: .08em;
	cursor: pointer;
}
.campaign-hero__motion[hidden] { display: none; }

.campaign-hero__media.is-playing .campaign-hero__video {
	opacity: 1;
}

/* Keep portrait and copy in separate columns on tablet-sized screens. */
@media (min-width: 761px) and (max-width: 1024px) {
	.campaign-hero {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		min-height: 0;
		padding-top: var(--hero-header-height, 87px);
	}
	.campaign-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		aspect-ratio: 3 / 4;
		background-image: url('../video/xhose-hero-mobile-poster-v3.png');
		background-position: center;
	}
	.campaign-hero__video { object-position: center; }
	.campaign-hero__media::after { background: none; }
	.campaign-hero__content {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		margin: 0;
		padding: 2.5rem clamp(1.5rem, 3vw, 2rem);
	}
	.campaign-hero__content .eyebrow { display: grid; gap: .6rem; }
	.campaign-hero__content h1 { font-size: clamp(3.5rem, 7.5vw, 4.8rem); line-height: .95; }
	.campaign-hero__content > p:not(.eyebrow) { font-size: 1rem; }
	.campaign-hero .scroll-indicator { display: none; }
	.campaign-hero__motion { right: 1rem; bottom: 1rem; }
}
@media (max-width: 760px) {
	.campaign-hero {
		display: block;
		min-height: 0;
		background: #320412;
	}

	.campaign-hero__media {
		position: relative;
		top: auto;
		z-index: 0;
		aspect-ratio: 3 / 4;
		margin-top: 76px;
		background-image: url('../video/xhose-hero-mobile-poster-v3.png');
		background-position: center top;
	}

	.campaign-hero__video {
		object-position: center top;
	}

	.campaign-hero__content {
		position: relative;
		z-index: 2;
		padding-top: 2rem;
		padding-bottom: 5rem;
		background: #320412;
	}

	.campaign-hero__content h1 {
		max-width: 10ch;
		font-size: clamp(3.35rem, 14vw, 5.8rem);
		line-height: .9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.campaign-hero__video {
		display: none;
		transition: none;
		animation: none;
	}
}

/* Alpha video must sit over the solid panel, not over its fallback photograph. */
.campaign-hero__media.is-playing { background-image: none; }