/*
 * Homepage visual refinements: sharper hero imagery, seamless section flow,
 * subtle focus-area ambience, compact impact bar and Global Giving control.
 */

/* Sharper responsive Hero collage imagery. */
.msf-hero {
	margin-bottom: -2px;
	border-bottom: 0;
}

.msf-hero::after {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	z-index: 6;
	height: 9px;
	background: var(--msf-light);
	content: "";
	pointer-events: none;
}

.msf-hero-collage__item {
	background: var(--msf-white);
	box-shadow: 0 18px 45px rgba(14, 35, 56, 0.18);
}

.msf-hero-collage__image,
.msf-hero-collage__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.08) contrast(1.055) brightness(1.015);
	image-rendering: auto;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Faint, animated programme symbols on the neutral homepage canvas. */
.site-main--home {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.site-main--home > section {
	position: relative;
	z-index: 2;
}

.site-main--home > .msf-about-section,
.site-main--home > .msf-focus--image-cards,
.site-main--home > .msf-team-section,
.site-main--home > .msf-news-section--home {
	background-color: rgba(244, 248, 250, 0.94) !important;
}

.msf-home-ambient {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.msf-home-ambient__icon {
	position: absolute;
	display: grid;
	width: clamp(58px, 6.4vw, 118px);
	height: clamp(58px, 6.4vw, 118px);
	place-items: center;
	border: 1px solid rgba(137, 184, 43, 0.06);
	border-radius: 28% 72% 63% 37% / 38% 32% 68% 62%;
	background: rgba(137, 184, 43, 0.025);
	color: rgba(71, 112, 19, 0.08);
	animation: msfAmbientDrift 12s ease-in-out infinite alternate,
		msfAmbientBreathe 7s ease-in-out infinite;
	will-change: transform, opacity;
}

.msf-home-ambient__icon .msf-icon {
	width: 47%;
	height: 47%;
}

.msf-home-ambient__icon:nth-child(3n + 2) {
	border-radius: 50%;
	background: rgba(210, 150, 14, 0.025);
	color: rgba(157, 103, 0, 0.075);
}

.msf-home-ambient__icon:nth-child(3n) {
	background: rgba(14, 35, 56, 0.018);
	color: rgba(14, 35, 56, 0.065);
}

.msf-home-ambient__icon--1 { top: 11%; left: 3%; animation-delay: -4s, -1s; }
.msf-home-ambient__icon--2 { top: 18%; right: 5%; animation-delay: -9s, -3s; }
.msf-home-ambient__icon--3 { top: 31%; left: 8%; animation-delay: -6s, -5s; }
.msf-home-ambient__icon--4 { top: 39%; right: 11%; animation-delay: -1s, -2s; }
.msf-home-ambient__icon--5 { top: 50%; left: 2%; animation-delay: -10s, -6s; }
.msf-home-ambient__icon--6 { top: 59%; right: 4%; animation-delay: -3s, -4s; }
.msf-home-ambient__icon--7 { top: 69%; left: 12%; animation-delay: -7s, -1s; }
.msf-home-ambient__icon--8 { top: 76%; right: 15%; animation-delay: -5s, -7s; }
.msf-home-ambient__icon--9 { top: 86%; left: 4%; animation-delay: -11s, -3s; }
.msf-home-ambient__icon--10 { top: 92%; right: 6%; animation-delay: -2s, -5s; }

@keyframes msfAmbientDrift {
	0% { transform: translate3d(-8px, -6px, 0) rotate(-5deg); }
	50% { transform: translate3d(8px, 9px, 0) rotate(4deg); }
	100% { transform: translate3d(-3px, 16px, 0) rotate(-2deg); }
}

@keyframes msfAmbientBreathe {
	0%, 100% { opacity: 0.42; }
	50% { opacity: 0.88; }
}

/* Persistent Global Giving control that opens the donation modal. */
.msf-float-button--global {
	min-width: 138px;
	gap: 0.52rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: linear-gradient(135deg, #2f9a50, #18763d);
	box-shadow: 0 13px 30px rgba(24, 118, 61, 0.28);
}

.msf-float-button--global span {
	max-width: 110px;
	opacity: 1;
}

.msf-float-button--global:hover,
.msf-float-button--global:focus-visible {
	background: linear-gradient(135deg, #37aa5a, #1b8244);
	box-shadow: 0 17px 38px rgba(24, 118, 61, 0.36);
}

/* Compact milestone and donation bar. */
.msf-donation-strip {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at 8% 40%, rgba(137, 184, 43, 0.15), transparent 20%),
		radial-gradient(circle at 86% 20%, rgba(210, 150, 14, 0.12), transparent 21%),
		linear-gradient(105deg, #0e2338 0%, #12304a 64%, #103b31 100%);
}

.msf-donation-strip::before,
.msf-donation-strip::after {
	position: absolute;
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.msf-donation-strip::before {
	top: -60px;
	left: 20%;
	width: 150px;
	height: 150px;
	border: 28px solid rgba(137, 184, 43, 0.075);
}

.msf-donation-strip::after {
	right: 4%;
	bottom: -86px;
	width: 180px;
	height: 180px;
	border: 35px solid rgba(210, 150, 14, 0.06);
}

.msf-donation-strip__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(225px, 0.75fr) minmax(390px, 1.25fr) auto;
	gap: clamp(1rem, 2.7vw, 2.8rem);
	align-items: center;
	padding-block: 1rem;
}

.msf-donation-strip__identity {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
	min-width: 0;
}

.msf-donation-strip__mark {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	border-radius: 18px 18px 18px 6px;
	background: var(--msf-green);
	color: var(--msf-navy);
	box-shadow: 0 12px 28px rgba(137, 184, 43, 0.2);
}

.msf-donation-strip__mark .msf-icon {
	width: 27px;
	height: 27px;
}

.msf-donation-strip__eyebrow {
	display: block;
	margin-bottom: 0.25rem;
	color: #cfea91;
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.msf-donation-strip__identity h2 {
	margin: 0;
	color: var(--msf-white);
	font-size: clamp(1.22rem, 2vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.msf-donation-strip__milestones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
}

.msf-donation-strip__milestone {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 0.75rem;
	align-items: center;
	min-width: 0;
	padding: 0.72rem 0.82rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.055);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(7px);
}

.msf-donation-strip__milestone-icon {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: 14px;
	background: rgba(137, 184, 43, 0.95);
	color: var(--msf-navy);
}

.msf-donation-strip__milestone:nth-child(2) .msf-donation-strip__milestone-icon {
	background: rgba(210, 150, 14, 0.95);
	color: var(--msf-white);
}

.msf-donation-strip__milestone-icon .msf-icon {
	width: 22px;
	height: 22px;
}

.msf-donation-strip__milestone strong,
.msf-donation-strip__milestone span {
	display: block;
}

.msf-donation-strip__milestone strong {
	color: var(--msf-white);
	font-size: clamp(1.25rem, 2.2vw, 1.82rem);
	line-height: 1;
}

.msf-donation-strip__milestone div > span {
	margin-top: 0.2rem;
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.msf-donation-strip__button {
	min-width: 164px;
	min-height: 52px;
	box-shadow: 0 13px 30px rgba(210, 150, 14, 0.24);
}

@media (min-width: 961px) {
	.msf-donation-strip__inner {
		height: 176px;
		max-height: 196px;
	}
}

@media (max-width: 1120px) {
	.msf-donation-strip__inner {
		grid-template-columns: minmax(190px, 0.7fr) minmax(340px, 1.15fr) auto;
		gap: 1rem;
	}

	.msf-donation-strip__identity {
		grid-template-columns: 46px minmax(0, 1fr);
	}

	.msf-donation-strip__mark {
		width: 46px;
		height: 46px;
		border-radius: 14px 14px 14px 5px;
	}

	.msf-donation-strip__button {
		min-width: 146px;
		padding-inline: 1rem;
	}
}

@media (max-width: 960px) {
	.msf-donation-strip__inner {
		grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
		padding-block: 1.4rem;
	}

	.msf-donation-strip__button {
		grid-column: 1 / -1;
		justify-self: center;
	}
}

@media (max-width: 700px) {
	.msf-home-ambient__icon {
		width: 58px;
		height: 58px;
		opacity: 0.52;
	}

	.msf-float-button--global {
		min-width: 122px;
		height: 48px;
		padding-inline: 12px;
	}

	.msf-donation-strip__inner,
	.msf-donation-strip__milestones {
		grid-template-columns: 1fr;
	}

	.msf-donation-strip__identity {
		max-width: 430px;
	}

	.msf-donation-strip__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msf-home-ambient__icon {
		animation: none;
	}
}
