/*
Theme Name: WONARTH Eco Child
Theme URI: https://wonarth.com/
Author: WONARTH
Author URI: https://wonarth.com/
Description: A premium animated environment NGO child theme for Twenty Twenty-Five, built for campaigns, donations, volunteering, field impact, and transparent operations.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.4.0
Template: twentytwentyfive
Text Domain: wonarth-eco
Tags: block-patterns, full-site-editing, accessibility-ready, one-column, custom-colors, custom-menu, editor-style, featured-images
*/

:root {
	--wa-canopy: #123529;
	--wa-forest: #1f5c42;
	--wa-moss: #6f9c3d;
	--wa-sun: #f4b942;
	--wa-river: #3ca6a6;
	--wa-earth: #8b5e3c;
	--wa-cream: #f7f2e7;
	--wa-paper: #fffdf7;
	--wa-ink: #16211c;
	--wa-muted: #627068;
	--wa-line: rgba(18, 53, 41, 0.16);
	--wa-shadow: 0 24px 80px rgba(18, 53, 41, 0.15);
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 12% 8%, rgba(244, 185, 66, 0.14), transparent 28rem),
		radial-gradient(circle at 90% 4%, rgba(60, 166, 166, 0.14), transparent 26rem),
		linear-gradient(180deg, #fffdf7 0%, #f8f3e9 48%, #eef4eb 100%);
	color: var(--wa-ink);
}

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.wp-site-blocks {
	overflow-x: clip;
}

.wa-sticky-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(18px);
	background: color-mix(in srgb, var(--wa-paper) 88%, transparent);
	border-bottom: 1px solid rgba(18, 53, 41, 0.1);
}

.admin-bar .wa-sticky-header {
	top: 32px;
}

.wa-brand-mark {
	letter-spacing: 0.08em;
}

.wa-pill {
	border: 1px solid rgba(18, 53, 41, 0.15);
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(18, 53, 41, 0.07);
}

.wa-section {
	position: relative;
}

.wa-section::before {
	background-image:
		linear-gradient(rgba(18, 53, 41, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(18, 53, 41, 0.045) 1px, transparent 1px);
	background-size: 44px 44px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
	opacity: 0.7;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.wa-section > * {
	position: relative;
	z-index: 1;
}

.wa-hero {
	min-height: min(860px, calc(100vh - 24px));
	position: relative;
}

.wa-hero-media {
	border-radius: 0 0 42px 42px;
	box-shadow: var(--wa-shadow);
	filter: saturate(1.08) contrast(1.03);
	min-height: 620px;
	overflow: hidden;
	position: relative;
}

.wa-hero-media::after {
	background:
		linear-gradient(90deg, rgba(7, 28, 20, 0.82) 0%, rgba(7, 28, 20, 0.58) 43%, rgba(7, 28, 20, 0.08) 100%),
		linear-gradient(180deg, rgba(7, 28, 20, 0) 62%, rgba(7, 28, 20, 0.72) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wa-hero-media img {
	height: 100%;
	min-height: 620px;
	object-fit: cover;
	width: 100%;
}

.wa-hero-copy {
	max-width: 720px;
}

.wa-hero h1 {
	text-wrap: balance;
}

.wa-hero-word {
	color: var(--wa-sun);
	display: inline-block;
	position: relative;
}

.wa-hero-word::after {
	background: rgba(244, 185, 66, 0.26);
	border-radius: 999px;
	bottom: 0.06em;
	content: "";
	height: 0.18em;
	left: 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.wa-glass-panel {
	background: color-mix(in srgb, var(--wa-paper) 78%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 18px;
	box-shadow: var(--wa-shadow);
	backdrop-filter: blur(18px);
}

.wa-impact-strip {
	margin-top: -76px;
	position: relative;
	z-index: 5;
}

.wa-stat {
	border-left: 1px solid rgba(18, 53, 41, 0.14);
	min-height: 128px;
}

.wa-stat:first-child {
	border-left: 0;
}

.wa-card {
	background: var(--wa-paper);
	border: 1px solid var(--wa-line);
	border-radius: 8px;
	box-shadow: 0 18px 55px rgba(18, 53, 41, 0.08);
	overflow: hidden;
	transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.wa-card:hover {
	border-color: rgba(31, 92, 66, 0.35);
	box-shadow: 0 24px 80px rgba(18, 53, 41, 0.16);
	transform: translateY(-6px);
}

.wa-card img,
.wa-rounded-media img {
	border-radius: 8px;
}

.wa-program-card {
	position: relative;
}

.wa-program-card::after {
	background: linear-gradient(135deg, rgba(111, 156, 61, 0.16), rgba(60, 166, 166, 0.16));
	content: "";
	height: 100%;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 240ms ease;
	width: 100%;
}

.wa-program-card:hover::after {
	opacity: 1;
}

.wa-ticker {
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	overflow: hidden;
	white-space: nowrap;
}

.wa-ticker-track {
	animation: wa-marquee 28s linear infinite;
	display: inline-flex;
	gap: clamp(2rem, 4vw, 4rem);
	min-width: max-content;
	padding: 1rem 0;
}

.wa-ticker span {
	align-items: center;
	display: inline-flex;
	gap: 0.7rem;
}

.wa-ticker span::before {
	background: var(--wa-sun);
	border-radius: 999px;
	content: "";
	height: 0.55rem;
	width: 0.55rem;
}

.wa-earth-band {
	background:
		linear-gradient(135deg, rgba(18, 53, 41, 0.94), rgba(31, 92, 66, 0.92)),
		url("assets/images/canopy-texture.svg");
	background-size: cover;
	color: var(--wa-cream);
}

.wa-pathway {
	counter-reset: pathway;
}

.wa-pathway-item {
	border-left: 2px solid rgba(31, 92, 66, 0.26);
	padding-left: clamp(1.2rem, 3vw, 2rem);
	position: relative;
}

.wa-pathway-item::before {
	background: var(--wa-sun);
	border: 5px solid var(--wa-paper);
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(18, 53, 41, 0.18);
	content: "";
	height: 1.2rem;
	left: -0.68rem;
	position: absolute;
	top: 0.28rem;
	width: 1.2rem;
}

.wa-donation-card {
	background:
		linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(255, 253, 247, 0.9)),
		url("assets/images/leaf-lines.svg");
	background-position: center;
	background-size: cover;
	border: 1px solid rgba(18, 53, 41, 0.14);
	border-radius: 8px;
	box-shadow: var(--wa-shadow);
}

.wa-form-shell input,
.wa-form-shell textarea,
.wa-form-shell select {
	background: #fffdf7;
	border: 1px solid rgba(18, 53, 41, 0.18);
	border-radius: 8px;
	color: var(--wa-ink);
	font: inherit;
	padding: 0.9rem 1rem;
	width: 100%;
}

.wa-form-shell label {
	color: var(--wa-canopy);
	display: grid;
	font-weight: 650;
	gap: 0.4rem;
}

.wa-form-shell button,
.wp-block-button__link {
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.wa-form-shell button:hover,
.wp-block-button__link:hover {
	box-shadow: 0 14px 30px rgba(18, 53, 41, 0.18);
	transform: translateY(-2px);
}

.wa-newsletter {
	background:
		linear-gradient(120deg, rgba(60, 166, 166, 0.16), rgba(244, 185, 66, 0.16)),
		var(--wa-paper);
	border: 1px solid rgba(18, 53, 41, 0.14);
}

.wa-footer {
	background:
		linear-gradient(180deg, rgba(18, 53, 41, 0.98), rgba(9, 22, 17, 1)),
		url("assets/images/canopy-texture.svg");
	background-size: cover;
	color: var(--wa-cream);
}

.wa-footer a {
	color: var(--wa-cream);
}

.wa-site-main {
	margin-top: 0;
}

.wa-skip-card {
	background: rgba(255, 253, 247, 0.92);
	border: 1px solid rgba(18, 53, 41, 0.13);
	border-radius: 8px;
}

.wa-photo-stack {
	display: grid;
	gap: 1rem;
	grid-template-columns: 0.8fr 1fr;
}

.wa-photo-stack figure:first-child {
	margin-top: 2.8rem;
}

.wa-photo-stack img {
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.wa-reveal,
.wa-reveal-up,
.wa-reveal-left,
.wa-reveal-right,
.wa-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.65, 0.2, 1);
}

.wa-reveal-left {
	transform: translateX(-28px);
}

.wa-reveal-right {
	transform: translateX(28px);
}

.wa-is-visible,
.wa-stagger.wa-is-visible > * {
	opacity: 1;
	transform: translate(0, 0);
}

.wa-stagger.wa-is-visible > *:nth-child(2) {
	transition-delay: 90ms;
}

.wa-stagger.wa-is-visible > *:nth-child(3) {
	transition-delay: 180ms;
}

.wa-stagger.wa-is-visible > *:nth-child(4) {
	transition-delay: 270ms;
}

.wa-stagger.wa-is-visible > *:nth-child(5) {
	transition-delay: 360ms;
}

.wa-parallax-slow {
	will-change: transform;
}

.wa-floating-leaf {
	animation: wa-float 7s ease-in-out infinite;
}

.wa-pulse-ring {
	position: relative;
}

.wa-pulse-ring::after {
	animation: wa-pulse 2.8s ease-out infinite;
	border: 1px solid currentColor;
	border-radius: 999px;
	content: "";
	inset: -0.4rem;
	opacity: 0.45;
	position: absolute;
}

@keyframes wa-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes wa-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(-1deg);
	}
	50% {
		transform: translate3d(0, -12px, 0) rotate(1.5deg);
	}
}

@keyframes wa-pulse {
	0% {
		opacity: 0.45;
		transform: scale(0.92);
	}
	100% {
		opacity: 0;
		transform: scale(1.22);
	}
}

@media (max-width: 900px) {
	.admin-bar .wa-sticky-header {
		top: 46px;
	}

	.wa-hero {
		min-height: auto;
	}

	.wa-hero-media,
	.wa-hero-media img {
		min-height: 690px;
	}

	.wa-hero-media::after {
		background:
			linear-gradient(180deg, rgba(7, 28, 20, 0.72) 0%, rgba(7, 28, 20, 0.5) 52%, rgba(7, 28, 20, 0.78) 100%);
	}

	.wa-impact-strip {
		margin-top: 0;
	}

	.wa-stat {
		border-left: 0;
		border-top: 1px solid rgba(18, 53, 41, 0.14);
	}

	.wa-stat:first-child {
		border-top: 0;
	}

	.wa-photo-stack {
		grid-template-columns: 1fr;
	}

	.wa-photo-stack figure:first-child {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}

	.wa-reveal,
	.wa-reveal-up,
	.wa-reveal-left,
	.wa-reveal-right,
	.wa-stagger > * {
		opacity: 1;
		transform: none;
	}
}

.wa-hero.wp-block-cover {
	margin-top: 0;
	overflow: hidden;
}

.wa-hero.wp-block-cover::after {
	background:
		linear-gradient(90deg, rgba(7, 28, 20, 0.82) 0%, rgba(7, 28, 20, 0.58) 43%, rgba(7, 28, 20, 0.08) 100%),
		linear-gradient(180deg, rgba(7, 28, 20, 0) 62%, rgba(7, 28, 20, 0.72) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.wa-hero.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wa-hero.wp-block-cover .wp-block-cover__image-background {
	filter: saturate(1.08) contrast(1.03);
	transform: scale(1.02);
}

.is-style-leaf .wp-block-button__link {
	background: var(--wa-sun);
	color: var(--wa-canopy);
}

.is-style-glass {
	background: color-mix(in srgb, var(--wa-paper) 78%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 18px;
	box-shadow: var(--wa-shadow);
	backdrop-filter: blur(18px);
}

.wa-form-shell button {
	background: var(--wa-forest);
	border: 0;
	border-radius: 999px;
	color: var(--wa-paper);
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	padding: 0.9rem 1.25rem;
}

@media (max-width: 900px) {
	.wa-hero.wp-block-cover::after {
		background:
			linear-gradient(180deg, rgba(7, 28, 20, 0.72) 0%, rgba(7, 28, 20, 0.5) 52%, rgba(7, 28, 20, 0.78) 100%);
	}
}

/* Living rivers, trees, flora and fauna design layer. */
.wa-biodiversity {
	background:
		radial-gradient(circle at 12% 15%, rgba(244, 185, 66, 0.18), transparent 22rem),
		radial-gradient(circle at 90% 20%, rgba(60, 166, 166, 0.18), transparent 26rem),
		linear-gradient(180deg, #fffdf7 0%, #eaf7ef 58%, #f7f2e7 100%);
	overflow: hidden;
	position: relative;
}

.wa-biodiversity::after {
	background: url("assets/images/living-rivers-biodiversity.svg") center / cover no-repeat;
	content: "";
	inset: auto 0 0 0;
	height: min(42vw, 430px);
	opacity: 0.18;
	pointer-events: none;
	position: absolute;
	transform: translateY(16%);
}

.wa-nature-list li {
	margin-bottom: 0.7rem;
	padding-left: 0.2rem;
}

.wa-ecosystem-scene {
	aspect-ratio: 1.18 / 1;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, 0.1), rgba(255, 253, 247, 0.38)),
		url("assets/images/living-rivers-biodiversity.svg") center / cover no-repeat;
	border: 1px solid rgba(18, 53, 41, 0.16);
	border-radius: 8px;
	box-shadow: 0 30px 90px rgba(18, 53, 41, 0.18);
	min-height: 430px;
	overflow: hidden;
	position: relative;
}

.wa-ecosystem-scene::before {
	background: linear-gradient(180deg, rgba(18, 53, 41, 0.06), transparent 50%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.wa-sun-orb {
	animation: wa-sun-glow 5.5s ease-in-out infinite;
	background: #f4b942;
	border-radius: 999px;
	box-shadow: 0 0 0 22px rgba(244, 185, 66, 0.14), 0 0 70px rgba(244, 185, 66, 0.5);
	height: 88px;
	right: 11%;
	position: absolute;
	top: 11%;
	width: 88px;
}

.wa-tree {
	animation: wa-tree-sway 4.8s ease-in-out infinite;
	bottom: 34%;
	height: 150px;
	position: absolute;
	transform-origin: bottom center;
	width: 94px;
}

.wa-tree::before {
	background: #8b5e3c;
	border-radius: 999px 999px 0 0;
	bottom: 0;
	content: "";
	height: 74px;
	left: 41px;
	position: absolute;
	width: 13px;
}

.wa-tree::after {
	background: #1f5c42;
	border-radius: 54% 46% 48% 52%;
	box-shadow: -28px 18px 0 #6f9c3d, 28px 20px 0 #123529, 0 42px 0 #1f5c42;
	content: "";
	height: 68px;
	left: 15px;
	position: absolute;
	top: 0;
	width: 68px;
}

.wa-tree-a { left: 7%; animation-delay: -0.4s; }
.wa-tree-b { left: 18%; bottom: 39%; transform: scale(0.82); animation-delay: -1.1s; }
.wa-tree-c { right: 23%; bottom: 38%; transform: scale(1.08); animation-delay: -0.8s; }
.wa-tree-d { right: 8%; bottom: 35%; transform: scale(0.92); animation-delay: -1.6s; }

.wa-river-ribbon {
	animation: wa-river-breathe 6s ease-in-out infinite;
	background: linear-gradient(110deg, rgba(60, 166, 166, 0.95), rgba(247, 242, 231, 0.84), rgba(60, 166, 166, 0.9));
	border-radius: 999px 42% 999px 50%;
	bottom: 12%;
	box-shadow: inset 0 0 26px rgba(255, 253, 247, 0.54), 0 14px 40px rgba(60, 166, 166, 0.22);
	height: 28%;
	left: -8%;
	overflow: hidden;
	position: absolute;
	transform: rotate(-5deg);
	width: 116%;
}

.wa-river-ribbon i {
	animation: wa-river-flow 7s linear infinite;
	background: rgba(255, 253, 247, 0.56);
	border-radius: 999px;
	height: 5px;
	left: -20%;
	position: absolute;
	width: 46%;
}

.wa-river-ribbon i:nth-child(1) { top: 28%; }
.wa-river-ribbon i:nth-child(2) { top: 52%; animation-delay: -2.4s; }
.wa-river-ribbon i:nth-child(3) { top: 72%; animation-delay: -4.6s; }

.wa-bird {
	animation: wa-bird-glide 13s linear infinite;
	height: 18px;
	left: -10%;
	position: absolute;
	top: 20%;
	width: 42px;
}

.wa-bird::before,
.wa-bird::after {
	border-top: 3px solid #123529;
	content: "";
	height: 16px;
	position: absolute;
	top: 8px;
	width: 24px;
}

.wa-bird::before { border-radius: 100% 0 0 0; left: 0; transform: rotate(18deg); }
.wa-bird::after { border-radius: 0 100% 0 0; right: 0; transform: rotate(-18deg); }
.wa-bird-b { animation-delay: -6s; top: 29%; transform: scale(0.74); }

.wa-butterfly {
	animation: wa-butterfly-dance 8s ease-in-out infinite;
	bottom: 43%;
	height: 24px;
	left: 53%;
	position: absolute;
	width: 28px;
}

.wa-butterfly::before,
.wa-butterfly::after {
	background: #f4b942;
	border-radius: 80% 20% 70% 30%;
	content: "";
	height: 24px;
	position: absolute;
	top: 0;
	width: 14px;
}

.wa-butterfly::before { left: 0; transform: rotate(-22deg); }
.wa-butterfly::after { right: 0; transform: scaleX(-1) rotate(-22deg); }

.wa-fish {
	animation: wa-fish-swim 9s ease-in-out infinite;
	background: #123529;
	border-radius: 60% 45% 45% 60%;
	bottom: 20%;
	height: 13px;
	position: absolute;
	width: 34px;
}

.wa-fish::after {
	border-bottom: 7px solid transparent;
	border-left: 10px solid #123529;
	border-top: 7px solid transparent;
	content: "";
	position: absolute;
	right: -8px;
	top: 0;
}

.wa-fish-a { left: 20%; animation-delay: -1.5s; }
.wa-fish-b { left: 66%; bottom: 24%; transform: scale(0.78); animation-delay: -5.5s; }

.wa-flower {
	animation: wa-flower-nod 4.4s ease-in-out infinite;
	background: #6f9c3d;
	border-radius: 999px;
	bottom: 28%;
	height: 42px;
	position: absolute;
	transform-origin: bottom center;
	width: 5px;
}

.wa-flower::before {
	background: #f4b942;
	border-radius: 999px;
	box-shadow: -9px 2px 0 #fffdf7, 9px 2px 0 #fffdf7, 0 -8px 0 #fffdf7, 0 10px 0 #fffdf7;
	content: "";
	height: 13px;
	left: -4px;
	position: absolute;
	top: -9px;
	width: 13px;
}

.wa-flower-a { left: 36%; }
.wa-flower-b { left: 42%; bottom: 25%; animation-delay: -1.2s; }
.wa-flower-c { right: 33%; bottom: 29%; animation-delay: -2.1s; }

.wa-leaf-drift {
	animation: wa-leaf-drift 11s ease-in-out infinite;
	background: #6f9c3d;
	border-radius: 80% 0 80% 0;
	height: 18px;
	position: absolute;
	top: 11%;
	width: 11px;
}

.wa-leaf-drift-a { left: 32%; }
.wa-leaf-drift-b { left: 72%; animation-delay: -5.2s; transform: scale(0.82); }

@keyframes wa-sun-glow {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 22px rgba(244, 185, 66, 0.14), 0 0 70px rgba(244, 185, 66, 0.5); }
	50% { transform: scale(1.035); box-shadow: 0 0 0 34px rgba(244, 185, 66, 0.09), 0 0 90px rgba(244, 185, 66, 0.62); }
}

@keyframes wa-tree-sway {
	0%, 100% { transform: rotate(-0.7deg); }
	50% { transform: rotate(1deg); }
}

@keyframes wa-river-breathe {
	0%, 100% { filter: saturate(1); transform: rotate(-5deg) translateY(0); }
	50% { filter: saturate(1.18); transform: rotate(-5deg) translateY(-4px); }
}

@keyframes wa-river-flow {
	from { transform: translateX(0); }
	to { transform: translateX(280%); }
}

@keyframes wa-bird-glide {
	from { transform: translateX(0); opacity: 0; }
	10%, 88% { opacity: 0.72; }
	to { transform: translateX(760px); opacity: 0; }
}

@keyframes wa-butterfly-dance {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
	35% { transform: translate3d(18px, -24px, 0) rotate(9deg); }
	70% { transform: translate3d(-12px, -10px, 0) rotate(-7deg); }
}

@keyframes wa-fish-swim {
	0%, 100% { transform: translateX(0); opacity: 0.72; }
	50% { transform: translateX(64px); opacity: 0.95; }
}

@keyframes wa-flower-nod {
	0%, 100% { transform: rotate(-2deg); }
	50% { transform: rotate(3deg); }
}

@keyframes wa-leaf-drift {
	0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
	12%, 84% { opacity: 0.85; }
	100% { transform: translate3d(-80px, 280px, 0) rotate(210deg); opacity: 0; }
}

@media (max-width: 900px) {
	.wa-ecosystem-scene {
		aspect-ratio: auto;
		min-height: 520px;
	}

	.wa-tree-a { left: 3%; }
	.wa-tree-b { left: 20%; }
	.wa-tree-c { right: 17%; }
	.wa-tree-d { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-sun-orb,
	.wa-tree,
	.wa-river-ribbon,
	.wa-river-ribbon i,
	.wa-bird,
	.wa-butterfly,
	.wa-fish,
	.wa-flower,
	.wa-leaf-drift {
		animation: none !important;
	}
}

/* Natural variation tuning for animated ecosystem elements. */
.wa-tree { --wa-tree-scale: 1; }
.wa-tree-b { --wa-tree-scale: 0.82; }
.wa-tree-c { --wa-tree-scale: 1.08; }
.wa-tree-d { --wa-tree-scale: 0.92; }

@keyframes wa-tree-sway {
	0%, 100% { transform: scale(var(--wa-tree-scale)) rotate(-0.7deg); }
	50% { transform: scale(var(--wa-tree-scale)) rotate(1deg); }
}

.wa-bird { --wa-bird-scale: 1; }
.wa-bird-b { --wa-bird-scale: 0.74; }

@keyframes wa-bird-glide {
	from { transform: translateX(0) scale(var(--wa-bird-scale)); opacity: 0; }
	10%, 88% { opacity: 0.72; }
	to { transform: translateX(760px) scale(var(--wa-bird-scale)); opacity: 0; }
}

.wa-fish { --wa-fish-scale: 1; }
.wa-fish-b { --wa-fish-scale: 0.78; }

@keyframes wa-fish-swim {
	0%, 100% { transform: translateX(0) scale(var(--wa-fish-scale)); opacity: 0.72; }
	50% { transform: translateX(64px) scale(var(--wa-fish-scale)); opacity: 0.95; }
}

/* Premium finished design additions: cinematic hero, habitat cards, donor tiers and action calendar. */
.wa-hero-copy {
	position: relative;
	z-index: 3;
}

.wa-hero-living-layer {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.wa-hero-canopy {
	background:
		radial-gradient(circle at 8% 42%, rgba(111, 156, 61, 0.76) 0 4rem, transparent 4.2rem),
		radial-gradient(circle at 18% 30%, rgba(31, 92, 66, 0.84) 0 5rem, transparent 5.2rem),
		radial-gradient(circle at 30% 38%, rgba(18, 53, 41, 0.8) 0 4.5rem, transparent 4.7rem),
		radial-gradient(circle at 88% 34%, rgba(31, 92, 66, 0.78) 0 5.5rem, transparent 5.7rem),
		radial-gradient(circle at 76% 23%, rgba(111, 156, 61, 0.68) 0 3.8rem, transparent 4rem);
	filter: blur(0.2px);
	height: 42%;
	left: 0;
	opacity: 0.8;
	position: absolute;
	top: -9%;
	width: 100%;
}

.wa-hero-river-glint {
	animation: wa-hero-river-glint 8s ease-in-out infinite;
	background: linear-gradient(90deg, transparent, rgba(60, 166, 166, 0.42), rgba(255, 253, 247, 0.42), transparent);
	border-radius: 999px;
	bottom: 10%;
	height: 9px;
	left: -18%;
	position: absolute;
	transform: rotate(-4deg);
	width: 58%;
}

.wa-hero-leaf {
	animation: wa-hero-leaf-drift 13s ease-in-out infinite;
	background: #f4b942;
	border-radius: 90% 0 90% 0;
	height: 26px;
	position: absolute;
	width: 15px;
}

.wa-hero-leaf-a { left: 62%; top: 18%; }
.wa-hero-leaf-b { animation-delay: -4s; background: #6f9c3d; left: 78%; top: 32%; transform: scale(0.82); }
.wa-hero-leaf-c { animation-delay: -8s; background: #fffdf7; left: 48%; top: 11%; transform: scale(0.68); }

.wa-hero-bird {
	animation: wa-hero-bird-glide 16s linear infinite;
	height: 22px;
	left: -8%;
	position: absolute;
	top: 19%;
	width: 54px;
}

.wa-hero-bird::before,
.wa-hero-bird::after {
	border-top: 3px solid rgba(255, 253, 247, 0.78);
	content: "";
	height: 20px;
	position: absolute;
	top: 8px;
	width: 30px;
}

.wa-hero-bird::before { border-radius: 100% 0 0 0; left: 0; transform: rotate(19deg); }
.wa-hero-bird::after { border-radius: 0 100% 0 0; right: 0; transform: rotate(-19deg); }
.wa-hero-bird-b { animation-delay: -7s; top: 27%; transform: scale(0.7); }

.wa-habitat-section {
	background:
		linear-gradient(180deg, #eaf7ef 0%, #fffdf7 100%);
	position: relative;
}

.wa-habitat-card {
	min-height: 320px;
	position: relative;
}

.wa-mini-forest,
.wa-mini-river,
.wa-mini-fauna {
	height: 118px;
	margin-bottom: 1.1rem;
	position: relative;
}

.wa-mini-forest span {
	animation: wa-mini-tree-sway 4s ease-in-out infinite;
	background: #8b5e3c;
	border-radius: 999px 999px 0 0;
	bottom: 0;
	height: 54px;
	position: absolute;
	width: 10px;
}

.wa-mini-forest span::before {
	background: #1f5c42;
	border-radius: 999px;
	box-shadow: -17px 16px 0 #6f9c3d, 17px 16px 0 #123529;
	content: "";
	height: 52px;
	left: -21px;
	position: absolute;
	top: -38px;
	width: 52px;
}

.wa-mini-forest span:nth-child(1) { left: 18%; }
.wa-mini-forest span:nth-child(2) { animation-delay: -1s; left: 48%; transform: scale(1.18); }
.wa-mini-forest span:nth-child(3) { animation-delay: -1.8s; left: 76%; transform: scale(0.9); }

.wa-mini-river {
	background: linear-gradient(180deg, rgba(60, 166, 166, 0.08), rgba(60, 166, 166, 0.18));
	border-radius: 8px;
	overflow: hidden;
}

.wa-mini-river::before {
	background: linear-gradient(90deg, #3ca6a6, #fffdf7, #3ca6a6);
	border-radius: 999px;
	content: "";
	height: 42px;
	left: -15%;
	position: absolute;
	top: 38px;
	transform: rotate(-5deg);
	width: 130%;
}

.wa-mini-river span {
	animation: wa-river-flow 5.5s linear infinite;
	background: rgba(255, 253, 247, 0.72);
	border-radius: 999px;
	height: 5px;
	left: -40%;
	position: absolute;
	width: 44%;
	z-index: 1;
}

.wa-mini-river span:nth-child(1) { top: 48px; }
.wa-mini-river span:nth-child(2) { animation-delay: -2.4s; top: 68px; }

.wa-mini-fauna span {
	position: absolute;
}

.wa-mini-fauna span:nth-child(1) {
	animation: wa-butterfly-dance 7s ease-in-out infinite;
	background: #f4b942;
	border-radius: 90% 10% 90% 10%;
	height: 28px;
	left: 23%;
	top: 30px;
	width: 18px;
}

.wa-mini-fauna span:nth-child(1)::after {
	background: #f4b942;
	border-radius: 10% 90% 10% 90%;
	content: "";
	height: 28px;
	left: 17px;
	position: absolute;
	width: 18px;
}

.wa-mini-fauna span:nth-child(2),
.wa-mini-fauna span:nth-child(3) {
	animation: wa-bird-glide 10s linear infinite;
	height: 18px;
	left: -10%;
	top: 28px;
	width: 42px;
}

.wa-mini-fauna span:nth-child(2)::before,
.wa-mini-fauna span:nth-child(2)::after,
.wa-mini-fauna span:nth-child(3)::before,
.wa-mini-fauna span:nth-child(3)::after {
	border-top: 3px solid #123529;
	content: "";
	height: 16px;
	position: absolute;
	top: 8px;
	width: 24px;
}

.wa-mini-fauna span:nth-child(2)::before,
.wa-mini-fauna span:nth-child(3)::before { border-radius: 100% 0 0 0; left: 0; transform: rotate(18deg); }
.wa-mini-fauna span:nth-child(2)::after,
.wa-mini-fauna span:nth-child(3)::after { border-radius: 0 100% 0 0; right: 0; transform: rotate(-18deg); }
.wa-mini-fauna span:nth-child(3) { animation-delay: -4.6s; top: 70px; transform: scale(0.72); }

.wa-action-calendar {
	background:
		linear-gradient(135deg, rgba(18, 53, 41, 0.97), rgba(31, 92, 66, 0.95)),
		url("assets/images/canopy-texture.svg") center / cover;
	color: var(--wa-cream);
}

.wa-calendar-row {
	background: rgba(255, 253, 247, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	gap: 1.25rem;
	padding: 1.25rem;
}

.wa-calendar-row + .wa-calendar-row {
	margin-top: 1rem;
}

.wa-calendar-row h3,
.wa-calendar-row p {
	color: var(--wa-cream);
}

.wa-calendar-date {
	align-items: center;
	background: var(--wa-sun);
	border-radius: 999px;
	color: var(--wa-canopy) !important;
	display: inline-flex;
	flex: 0 0 3rem;
	font-weight: 900;
	height: 3rem;
	justify-content: center;
	line-height: 1;
	margin: 0;
	width: 3rem;
}

.wa-tier-card {
	background:
		linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(255, 253, 247, 0.9)),
		url("assets/images/leaf-lines.svg") center / cover;
}

.wa-tier-featured {
	border-color: rgba(244, 185, 66, 0.74);
	box-shadow: 0 28px 90px rgba(244, 185, 66, 0.22);
	transform: translateY(-10px);
}

.wa-tier-price {
	color: var(--wa-forest);
	font-size: clamp(2.3rem, 5vw, 4.4rem);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	margin: 0.4rem 0 0.8rem;
}

@keyframes wa-hero-river-glint {
	0%, 100% { opacity: 0.28; transform: translateX(0) rotate(-4deg); }
	50% { opacity: 0.84; transform: translateX(130%) rotate(-4deg); }
}

@keyframes wa-hero-leaf-drift {
	0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
	12%, 82% { opacity: 0.86; }
	100% { opacity: 0; transform: translate3d(-120px, 520px, 0) rotate(280deg); }
}

@keyframes wa-hero-bird-glide {
	from { opacity: 0; transform: translateX(0) scale(1); }
	12%, 84% { opacity: 0.8; }
	to { opacity: 0; transform: translateX(118vw) scale(1); }
}

@keyframes wa-mini-tree-sway {
	0%, 100% { transform: rotate(-1deg); }
	50% { transform: rotate(1.2deg); }
}

@media (max-width: 900px) {
	.wa-hero-canopy { height: 30%; opacity: 0.56; }
	.wa-tier-featured { transform: none; }
	.wa-calendar-row { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.wa-hero-river-glint,
	.wa-hero-leaf,
	.wa-hero-bird,
	.wa-mini-forest span,
	.wa-mini-river span,
	.wa-mini-fauna span {
		animation: none !important;
	}
}