/* The mission scrolls over David's portrait, revealing it through the section. */
/* Ported unchanged from the approved static reference (website/dist/style.css). Keep file order: later files override earlier ones. */

.mission {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	min-height: 900px;
	padding: 100px 6%;
	background: var(--paper);
}

.mission-portrait {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #eebc42;
	background-image: url('../images/david_shelton_blue_vest_gold_portrait.jpeg');
	background-repeat: no-repeat;
	background-position: right 7vw center;
	background-size: auto min(90vh,900px);
	background-attachment: fixed;
	pointer-events: none;
}

.mission::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg,var(--paper) 0%,var(--paper) 38%,rgba(255,254,248,.96) 46%,rgba(255,254,248,.65) 55%,rgba(255,254,248,0) 68%);
	pointer-events: none;
}

.mission-heading,
.mission-copy {
	position: relative;
	max-width: 49%;
}

.mission .mission-copy {
	padding-top: 20px;
	max-width: 45%;
}

.mission h2 {
	font-size: clamp(2.6rem,4.2vw,4.4rem);
}

@media(max-width:1000px) and (min-width:761px) {
	.mission {
		padding: 75px 5%;
		min-height: 950px;
	}
	.mission-portrait {
		background-position: right -5vw center;
	}
	.mission-heading {
		max-width: 59%;
	}
	.mission .mission-copy {
		max-width: 49%;
	}
	.mission::after {
		background: linear-gradient(90deg,var(--paper) 0%,rgba(255,254,248,.98) 43%,rgba(255,254,248,.75) 53%,transparent 78%);
	}
}

@media(max-width:760px) {
	.mission {
		min-height: 0;
		padding: 65px 6% 520px;
	}
	.mission-heading,
	.mission .mission-copy {
		max-width: 100%;
	}
	.mission-portrait {
		inset: auto 0 0;
		height: 560px;
		background-attachment: scroll;
		background-position: center bottom;
		background-size: auto 560px;
		transform: translateY(var(--portrait-shift,0px));
		will-change: transform;
	}
	.mission::after {
		background: linear-gradient(180deg,var(--paper) 0%,var(--paper) calc(100% - 540px),rgba(255,254,248,.95) calc(100% - 500px),transparent calc(100% - 410px));
	}
}

@media(prefers-reduced-motion:reduce) {
	.mission-portrait {
		background-attachment: scroll;
		transform: none;
		will-change: auto;
	}
}