/* Stile della home. I font sono in fonts.css (caricato prima di questo file). */

:root {
	color-scheme: only light;
	--font-title: "Les Flos Sage", "Fredoka", sans-serif; /* font dei titoli */
	--brown: #432f2c;
	--gold: #c8a627;
	--cream: #fbf9e1;
	--forest: #06754d;
	--mint: #17fc96;
	--shadow: 0 18px 40px -20px rgba(67, 47, 44, 0.45);
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* evita il bordo bianco ai lati su mobile quando si fa pinch-zoom / overscroll:
	   senza questo, lo sfondo di <html> resta bianco (default del browser) mentre
	   <body> ha lo sfondo crema, e la differenza si vede ai bordi quando si zooma */
	background: var(--cream);
	height: 100%;
}

body {
	background: var(--cream);
	color: var(--brown);
	font-family: "Raleway", sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
	min-height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-title);
	font-weight: 600;
	line-height: 1.05;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

ul {
	list-style: none;
}

::selection {
	background: var(--mint);
	color: var(--brown);
}

:focus-visible {
	outline: 3px solid var(--forest);
	outline-offset: 3px;
	border-radius: 4px;
}

.wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

/* header */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--brown);
	color: var(--cream);
	border-bottom: 2px solid var(--gold);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	max-width: 1180px;
	margin: 0 auto;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Les Flos Sage", sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cream);
}

.brand img {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

/* hero */

.hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	padding: 60px 0;
	overflow: hidden;
	background: var(--cream);
}

.hero .wrap {
	/* il testo sta nella metà sinistra, così non finisce mai sopra la rana a destra */
	width: 58%;
	max-width: none;
	margin: 0;
	padding: 0 40px;
}

.hero-copy {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
}

.hero-copy h1 {
	max-width: 760px;
	margin: 0 auto;
	color: var(--brown);
	font-size: clamp(1.7rem, 3vw, 2.8rem);
	line-height: 1.18;
	text-align: center;
	text-wrap: balance;
}

/* i quattro versi della filastrocca */
.hero-copy h1 .verse {
	display: block;
	margin-top: 8px;
}

.hero-copy h1 .verse:first-child {
	margin-top: 0;
}

.hero-copy h1 .verse--green {
	color: var(--forest);
}

/* decorazione hero: laghetto con increspature e rana */

.pond {
	position: absolute;
	right: -6%;
	top: 50%;
	width: min(52vw, 720px);
	transform: translateY(-50%);
	z-index: 1;
	filter: drop-shadow(0 30px 50px rgba(67, 47, 44, 0.25));
}

.pond svg {
	width: 100%;
	display: block;
}

.ripple {
	transform-origin: center;
	opacity: 0;
	animation: ripple 4.5s var(--ease) infinite;
}

.ripple.r2 {
	animation-delay: 1.5s;
}
.ripple.r3 {
	animation-delay: 3s;
}

@keyframes ripple {
	from {
		transform: scale(0.7);
		opacity: 0.55;
	}
	to {
		transform: scale(1.55);
		opacity: 0;
	}
}

.hero-frog {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46%;
	transform: translate(-50%, -46%);
	animation: bob 6s ease-in-out infinite;
}

@keyframes bob {
	0%,
	100% {
		transform: translate(-50%, -46%) rotate(0);
	}
	50% {
		transform: translate(-50%, -49%) rotate(-2deg);
	}
}

.lily {
	position: absolute;
	border-radius: 50%;
	background: var(--forest);
	opacity: 0.9;
}

.lily::after {
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	background: var(--mint);
	opacity: 0.35;
}

/* le quattro ninfee decorative sullo stagno dell'hero */

.lily-1 {
	width: 60px;
	height: 60px;
	left: 6%;
	top: 18%;
}
.lily-2 {
	width: 34px;
	height: 34px;
	right: 8%;
	top: 12%;
}
.lily-3 {
	width: 44px;
	height: 44px;
	left: 2%;
	bottom: 14%;
}
.lily-4 {
	width: 26px;
	height: 26px;
	right: 4%;
	bottom: 22%;
}

/* onde tra le sezioni */

.wave {
	position: relative;
	width: 100%;
	height: 130px;
	overflow: hidden;
	line-height: 0;
	margin: -1px 0;
	padding: 0;
	background: transparent;
}

.wave svg {
	display: block;
	width: 200%;
	height: 100%;
}

.wave path {
	stroke: none;
}

.wave-back-layer {
	opacity: 0.3;
}

.wave-up svg {
	animation: wave-drift-rtl 22s linear infinite;
}

.wave-down svg {
	animation: wave-drift-ltr 22s linear infinite;
}

@keyframes wave-drift-rtl {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes wave-drift-ltr {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* sezioni generiche */

section {
	position: relative;
}

/* le decorazioni che sporgono (cespugli, ninfee) vengono tagliate invece di allargare la pagina */
main,
footer {
	overflow-x: hidden;
	overflow-x: clip;
}

.section-pad {
	padding: 30px 0;
}

/* missione */

.mission {
	background: var(--brown);
	color: var(--cream);
}

.mission .wrap {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 36px;
	align-items: center;
}

/* pannello testo missione */

.mission-info-panel {
	position: relative;
	min-height: 370px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 40px;
	overflow: hidden;
	border: 1px solid rgba(251, 249, 225, 0.15);
	border-radius: 30px;
	background: rgba(251, 249, 225, 0.06);
	box-shadow: inset 0 1px 0 rgba(251, 249, 225, 0.1);
}

.mission-info-panel::before {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	top: -120px;
	right: -95px;
	border-radius: 50%;
	background: var(--forest);
	opacity: 0.45;
}

.mission-info-panel > * {
	position: relative;
	z-index: 1;
}

.mission-info-panel .eyebrow {
	margin-bottom: 14px;
	color: var(--mint);
	font-family: "Caveat", cursive;
	font-size: 1.25rem;
	font-weight: 700;
}

.mission-info-panel h2 {
	color: var(--cream);
	font-size: clamp(2rem, 3.2vw, 2.55rem);
	transition: color 0.25s var(--ease);
}

.mission-info-panel p:last-child {
	max-width: 430px;
	margin-top: 18px;
	color: rgba(251, 249, 225, 0.8);
	font-size: 1.03rem;
}

.mission-info-panel.is-active h2 {
	color: var(--mint);
}

/* laghetto della missione */

.mission-pond-scene {
	position: relative;
	width: 108%;
	max-width: 900px;
	margin: 0 auto;
	isolation: isolate;
}

.mission-pond-scene::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -5%;
	height: 26%;
	z-index: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.2) 40%,
		rgba(0, 0, 0, 0) 75%
	);
	pointer-events: none;
}

.mission-pond {
	position: relative;
	width: 100%;
	aspect-ratio: 1.32/1;
	overflow: hidden;
	isolation: isolate;
	z-index: 1;
	background:
		radial-gradient(ellipse at 26% 22%, rgba(103, 244, 202, 0.34), transparent 22%),
		radial-gradient(ellipse at 75% 74%, rgba(1, 79, 72, 0.48), transparent 47%),
		radial-gradient(ellipse at 55% 48%, rgba(91, 211, 225, 0.19), transparent 42%),
		linear-gradient(135deg, #149fc0 0%, #087ca7 48%, #056b83 100%);
	border-radius: 58% 42% 63% 37% / 42% 66% 34% 58%;
	border: 12px solid rgba(251, 249, 225, 0.35);
	box-shadow:
		inset 0 0 0 2px rgba(208, 255, 237, 0.24),
		inset 18px 20px 60px rgba(0, 45, 69, 0.22),
		inset -24px -20px 50px rgba(0, 44, 55, 0.24);
}

.mission-pond::before {
	content: "";
	position: absolute;
	inset: 4% 6% 8% 3%;
	z-index: 1;
	pointer-events: none;
	border-radius: 62% 38% 68% 32% / 36% 69% 31% 64%;
	border: 3px solid rgba(251, 249, 225, 0.25);
}

.mission-pond::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse at 18% 80%, rgba(223, 255, 232, 0.28) 0 2%, transparent 2.6%),
		radial-gradient(ellipse at 77% 17%, rgba(223, 255, 232, 0.24) 0 1.8%, transparent 2.4%),
		linear-gradient(118deg, transparent 39%, rgba(232, 255, 248, 0.18) 47%, transparent 54%);
	mix-blend-mode: screen;
	animation: waterGlint 9s ease-in-out infinite alternate;
}

@keyframes waterGlint {
	from {
		transform: translateX(-8%) translateY(2%);
	}
	to {
		transform: translateX(8%) translateY(-2%);
	}
}

/* increspature statiche del laghetto */

.pond-ripple {
	position: absolute;
	border: 2px solid rgba(251, 249, 225, 0.15);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	box-shadow: 0 0 18px rgba(198, 255, 238, 0.08);
}

.pond-ripple.ripple-a {
	width: 55%;
	height: 24%;
	left: 23%;
	top: 38%;
}

.pond-ripple.ripple-b {
	width: 40%;
	height: 18%;
	left: 30%;
	top: 53%;
	transform: rotate(-8deg);
}

/* cespugli intorno al laghetto */

.bush {
	position: absolute;
	width: 60px;
	height: 50px;
	z-index: 2;
	pointer-events: none;
	border-radius: 50% 50% 45% 45%;
	background: radial-gradient(ellipse at 30% 30%, #7cb342 0%, #558b2f 50%, #33691e 100%);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bush::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 35px;
	top: -10px;
	left: 15px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 40% 40%, #8bc34a 0%, #689f38 60%, #4a7c2c 100%);
	opacity: 0.9;
}

.bush::before {
	content: "";
	position: absolute;
	width: 35px;
	height: 30px;
	top: -5px;
	left: -5px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 35% 35%, #9ccc65 0%, #7cb342 60%, #5a8a2e 100%);
	opacity: 0.85;
}

.bush-1 {
	top: -20px;
	left: -15px;
}
.bush-2 {
	top: 10%;
	left: -25px;
	transform: scale(0.85);
}
.bush-3 {
	bottom: -15px;
	left: 5%;
	transform: scale(0.9);
}
.bush-4 {
	top: -25px;
	right: -20px;
	transform: scale(0.95);
}
.bush-5 {
	top: 15%;
	right: -30px;
	transform: scale(0.8);
}
.bush-6 {
	bottom: -20px;
	right: 8%;
	transform: scale(0.85);
}

/* ninfee del laghetto (le tre voci del menu) */

.water-lily {
	position: absolute;
	width: 140px;
	height: 120px;
	z-index: 3;
	cursor: pointer;
	transition:
		transform 0.3s var(--ease),
		filter 0.3s var(--ease);
}

.water-lily:hover,
.water-lily:focus-within {
	transform: scale(1.15) rotate(-3deg);
	filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.25));
}

.water-lily::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #5fbf65, #045c45 75%);
	-webkit-mask: conic-gradient(from -20deg, #000 0deg 320deg, transparent 320deg 360deg);
	mask: conic-gradient(from -20deg, #000 0deg 320deg, transparent 320deg 360deg);
	filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.2));
}

.water-lily::after {
	content: "";
	position: absolute;
	width: 36px;
	height: 36px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--mint);
	box-shadow: 0 0 0 7px rgba(23, 252, 150, 0.18);
}

.water-lily button {
	position: absolute;
	inset: 0;
	z-index: 2;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	font-family: "Fredoka", sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cream);
	text-align: center;
	text-shadow: 0 2px 4px rgba(0, 55, 44, 0.6);
}

.water-lily button:focus-visible {
	outline: 3px solid var(--cream);
	outline-offset: 4px;
	border-radius: 50%;
}

.lily-one {
	left: 15%;
	top: 30%;
	transform: rotate(-8deg);
}
.lily-two {
	right: 15%;
	top: 35%;
	transform: rotate(8deg);
}

.lily-donation {
	left: 50%;
	bottom: 15%;
	transform: translateX(-50%) rotate(0deg) scale(0.95);
}

.lily-donation::before {
	background: radial-gradient(circle at 35% 30%, #72bb59, #064f3d 75%);
}

.lily-donation:hover,
.lily-donation:focus-within {
	transform: translateX(-50%) scale(1.1) rotate(0);
}

.lily-contacts {
	left: 50%;
	top: 9%;
	transform: translateX(-50%) rotate(-4deg);
}

.lily-contacts::before {
	background: radial-gradient(circle at 35% 30%, #6fc27a, #05664a 75%);
}

.lily-one:hover,
.lily-one:focus-within,
.lily-two:hover,
.lily-two:focus-within {
	transform: scale(1.1) rotate(0);
}

.lily-contacts:hover,
.lily-contacts:focus-within {
	transform: translateX(-50%) scale(1.1) rotate(0);
}

/* leggenda del Bargniff */

.legend {
	background: var(--cream);
	padding-bottom: 40px;
}

.legend-wrap {
	max-width: 760px;
}

.legend-eyebrow {
	margin-bottom: 18px;
	color: var(--forest);
	font-family: "Caveat", cursive;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

.legend-text p {
	margin-bottom: 20px;
	color: rgba(67, 47, 44, 0.85);
	font-size: 1.08rem;
	line-height: 1.75;
}

.legend-text p:last-child {
	margin-bottom: 0;
	color: var(--forest);
	font-weight: 600;
}

.legend-text p:first-child::first-letter {
	margin-right: 2px;
	float: left;
	color: var(--forest);
	font-family: var(--font-title);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 0.85;
}

/* perché le rane: le tre card */

.why {
	background: var(--cream);
	padding-top: 120px;
	padding-bottom: 70px;
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.why-card {
	padding: 34px 28px;
	background: #fff8e6;
	border: 1px solid rgba(67, 47, 44, 0.08);
	border-radius: 26px;
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

.why-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow);
}

.why-icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	border-radius: 18px;
}

.why-icon img {
	width: 70%;
}

.why-card:nth-child(1) .why-icon {
	background: #eadfb4;
}
.why-card:nth-child(2) .why-icon {
	background: var(--brown);
}
.why-card:nth-child(3) .why-icon {
	background: var(--forest);
}

.why-card h3 {
	margin-bottom: 10px;
	font-size: 1.25rem;
}

.why-card p {
	color: rgba(67, 47, 44, 0.75);
	font-size: 0.98rem;
}

/* schede degli articoli */

.art-card {
	display: block;
	overflow: hidden;
	color: inherit;
}

.art-cover {
	aspect-ratio: 16 / 10;
	margin: -34px -28px 22px;
	overflow: hidden;
	background: #eadfb4;
}

.art-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.art-date {
	display: block;
	margin-bottom: 8px;
	color: var(--forest);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.art-more {
	display: inline-block;
	margin-top: 14px;
	color: var(--forest);
	font-weight: 700;
}

/* articoli: sugli schermi stretti si scorrono di lato (o con le frecce) invece che in verticale */

.scroller {
	position: relative;
}

.scroller-arrow {
	display: none;
}

@media (max-width: 920px) {
	.why-grid {
		display: flex;
		gap: 16px;
		padding: 12px 4px 26px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.why-grid::-webkit-scrollbar {
		display: none;
	}

	.why-grid .why-card {
		flex: 0 0 min(82%, 340px);
		scroll-snap-align: center;
	}

	.scroller-arrow {
		position: absolute;
		top: 50%;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-top: -22px;
		background: var(--forest);
		border: 2px solid var(--cream);
		border-radius: 50%;
		box-shadow: 0 8px 18px -8px rgba(67, 47, 44, 0.6);
		color: var(--cream);
		font-size: 1.3rem;
		line-height: 1;
		cursor: pointer;
	}

	.scroller-arrow[hidden] {
		display: none;
	}

	.scroller-arrow--prev {
		left: -4px;
	}

	.scroller-arrow--next {
		right: -4px;
	}
}

/* sezione donazione (verde) */

.donation-section {
	position: relative;
	background: var(--forest);
	color: var(--cream);
	overflow: hidden;
}

.donation-content-wrap {
	position: relative;
	z-index: 2;
	padding: 60px 0;
}

.donation-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	max-width: 950px;
	margin: 0 auto;
	padding: 70px 56px;
	overflow: hidden;
	background: var(--brown);
	color: var(--cream);
	border-radius: 36px;
	scroll-margin-top: 110px;
}

.donation-box::before,
.donation-box::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.donation-box::before {
	width: 280px;
	height: 280px;
	top: -140px;
	left: -90px;
	background: var(--forest);
	opacity: 0.5;
}

.donation-box::after {
	width: 220px;
	height: 220px;
	right: -60px;
	bottom: -120px;
	background: var(--gold);
	opacity: 0.25;
}

.donation-content {
	position: relative;
	z-index: 2;
}

.donation-content h3 {
	margin-bottom: 12px;
	color: var(--cream);
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.donation-content p {
	max-width: 460px;
	margin: 0 auto;
	color: rgba(251, 249, 225, 0.82);
	font-size: 1.05rem;
}

.donation-button {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	padding: 20px 52px;
	border-radius: 100px;
	background: var(--mint);
	color: var(--brown);
	font-size: 1.2rem;
	font-weight: 700;
	transition:
		transform 0.25s var(--ease),
		background 0.25s var(--ease);
}

.donation-button:hover {
	background: #3cffa8;
	transform: translateY(-3px);
}

/* decorazioni della sezione donazione */

.donation-section::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	top: -240px;
	left: -120px;
	border-radius: 50%;
	background: rgba(23, 252, 150, 0.08);
	pointer-events: none;
}

.donation-section::after {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	right: -140px;
	bottom: -190px;
	border-radius: 50%;
	background: rgba(200, 166, 39, 0.14);
	pointer-events: none;
}

/* footer */

footer {
	padding: 90px 0 40px;
}

.foot-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px;
}

.foot-col p {
	max-width: 280px;
	color: rgba(67, 47, 44, 0.7);
	font-size: 0.95rem;
}

.foot-col h4 {
	margin-bottom: 16px;
	color: var(--forest);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.foot-col ul li {
	margin-bottom: 10px;
	font-size: 0.95rem;
}

.foot-col ul li a:hover {
	color: var(--forest);
}

/* animazione di comparsa allo scroll */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.7s var(--ease),
		transform 0.7s var(--ease);
}

.reveal.in {
	opacity: 1;
	transform: translateY(0);
}

/* instagram */

.insta {
	padding-bottom: 70px;
	background: var(--cream);
}

.insta-title {
	margin-bottom: 30px;
	color: var(--forest);
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	text-align: center;
}

.insta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
	align-items: start;
	justify-items: center;
}

.insta-follow {
	margin-top: 28px;
	color: var(--forest);
	font-weight: 600;
	text-align: center;
}

/* scheda di un post: con la nostra foto, oppure un segnaposto che non contatta Instagram */

.post-card {
	position: relative;
	display: block;
	width: 100%;
	max-width: 540px;
	overflow: hidden;
	background: #fff8e6;
	border: 1px solid rgba(67, 47, 44, 0.1);
	border-radius: 22px;
	color: inherit;
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}

a.post-card:hover,
a.post-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}

.post-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.post-card-body {
	padding: 16px 20px 20px;
}

.post-badge {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 99px;
	background: var(--brown);
	color: var(--cream);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.post-caption {
	margin-top: 10px;
	color: rgba(67, 47, 44, 0.85);
	font-size: 0.98rem;
}

.post-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--forest);
	font-weight: 700;
}

.post-card--plain {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 190px;
	padding: 28px 22px;
	text-align: center;
}

/* quando il post è incorporato da Instagram, la scheda diventa solo un contenitore */

.post-card--embed {
	overflow: visible;
	background: none;
	border: 0;
}

.post-card--embed.is-loading {
	min-height: 520px;
}

.insta-grid .instagram-media {
	margin: 0 auto !important;
}

@media (max-width: 420px) {
	.insta-grid .instagram-media {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* scheletro mostrato finché il post incorporato non è pronto */

.insta-skeleton {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(67, 47, 44, 0.12);
	border-radius: 14px;
	box-shadow: var(--shadow);
}

.post-card--embed:not(.is-loading) .insta-skeleton {
	display: none;
}

.insta-skeleton i {
	display: block;
	height: 12px;
	background: linear-gradient(90deg, #efe8c8 25%, #f8f3da 50%, #efe8c8 75%);
	background-size: 200% 100%;
	border-radius: 6px;
	animation: instaShimmer 1.4s linear infinite;
}

.insta-skeleton-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.insta-skeleton-head > i {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

.insta-skeleton-head > div {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
}

.insta-skeleton-head > div i:first-child {
	width: 55%;
}
.insta-skeleton-head > div i:last-child {
	width: 35%;
}

.insta-skeleton .insta-skeleton-media {
	flex: 1;
	height: auto;
	min-height: 220px;
	border-radius: 10px;
}

.insta-skeleton > i:last-child {
	width: 70%;
}

@keyframes instaShimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* popup "sotto costruzione" */

.popup {
	width: min(88vw, 380px);
	margin: auto;
	padding: 34px 28px 28px;
	background: var(--cream);
	border: 0;
	border-radius: 28px;
	box-shadow: 0 30px 70px -24px rgba(67, 47, 44, 0.7);
	color: var(--brown);
	text-align: center;
}

.popup[open] {
	animation: popupIn 0.35s var(--ease);
}

.popup::backdrop {
	background: rgba(67, 47, 44, 0.55);
}

.popup-frog {
	width: 92px;
	margin: 0 auto 14px;
	animation: popupFrog 3.2s ease-in-out infinite;
}

.popup h2 {
	margin-bottom: 8px;
	color: var(--forest);
	font-size: 1.9rem;
}

.popup p {
	margin-bottom: 22px;
	color: rgba(67, 47, 44, 0.82);
}

.popup-close {
	padding: 12px 32px;
	background: var(--mint);
	border: 0;
	border-radius: 99px;
	color: var(--brown);
	font:
		700 1.05rem "Raleway",
		sans-serif;
	cursor: pointer;
	transition:
		transform 0.25s var(--ease),
		background 0.25s var(--ease);
}

.popup-close:hover {
	background: #3cffa8;
	transform: translateY(-2px);
}

@keyframes popupFrog {
	0%,
	100% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-7px) rotate(-3deg);
	}
}

@keyframes popupIn {
	from {
		opacity: 0;
		transform: translateY(18px) scale(0.94);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* schermi stretti: il testo sta sopra e il laghetto con la rana sotto, senza sovrapporsi */

@media (max-width: 900px) {
	.hero {
		flex-direction: column;
		justify-content: center;
		gap: 28px;
		min-height: auto;
		padding: 112px 0 64px;
	}

	.hero .wrap {
		order: 1;
		width: 100%;
		padding: 0 22px;
	}

	.hero-copy h1 {
		font-size: clamp(1.6rem, 6.4vw, 2.6rem);
	}

	.pond {
		position: relative;
		top: auto;
		right: auto;
		order: 2;
		width: min(74vw, 380px);
		margin: 0 auto;
		transform: none;
		opacity: 1;
	}
}

/* responsive */

@media (max-width: 920px) {
	.mission .wrap {
		grid-template-columns: 1fr;
	}
	.mission-pond-scene {
		width: 105%;
		max-width: 850px;
	}
	.foot-top {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 760px) {
	.nav {
		padding: 12px 20px;
	}
	.wave {
		height: 90px;
	}
	/* laghetto un po' più largo della colonna, ma centrato (sporgeva solo a destra) */
	.mission-pond-scene {
		width: calc(100% + 36px);
		max-width: 650px;
		margin-left: max(-18px, calc((100% - 650px) / 2));
	}

	.bush-1 {
		left: -6px;
	}
	.bush-2 {
		left: -12px;
	}
	.bush-4 {
		right: -8px;
	}
	.bush-5 {
		right: -14px;
	}
	/* laghetto più alto, così ci stanno quattro ninfee con le scritte ben leggibili */
	.mission-pond {
		aspect-ratio: 1 / 1;
	}

	.water-lily {
		width: 118px;
		height: 100px;
	}

	.water-lily button {
		padding: 0 6px;
		font-size: 1.08rem;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.lily-one {
		left: 4%;
		top: 31%;
	}

	.lily-two {
		right: 4%;
		top: 37%;
	}

	.lily-donation {
		left: 50%;
		bottom: 2%;
		transform: translateX(-50%) rotate(-5deg);
	}

	.lily-contacts {
		left: 50%;
		top: 2%;
		transform: translateX(-50%) rotate(-4deg);
	}

	.lily-donation:hover,
	.lily-donation:focus-within {
		transform: translateX(-50%) scale(1.06) rotate(0);
	}

	.donation-content-wrap {
		padding: 50px 0;
	}
	.donation-box {
		padding: 40px 26px;
	}
	.donation-content h3 {
		font-size: 2rem;
	}
	.why {
		padding-top: 90px;
		padding-bottom: 50px;
	}
	.legend-text p {
		font-size: 1rem;
	}
	.legend-text p:first-child::first-letter {
		font-size: 2.6rem;
	}
}

/* telefoni molto piccoli: ninfee un po' più compatte per non toccarsi */

@media (max-width: 340px) {
	.water-lily {
		width: 106px;
		height: 90px;
	}

	.water-lily button {
		font-size: 1.02rem;
	}

	.lily-one {
		left: 2%;
	}

	.lily-two {
		right: 2%;
	}
}

/* telefoni: tolgo gli effetti più pesanti per la scheda grafica */

@media (max-width: 760px) {
	.pond {
		filter: none;
	}

	.mission-pond::after {
		mix-blend-mode: normal;
		animation: none;
	}

	.water-lily:hover,
	.water-lily:focus-within {
		filter: none;
	}
}

/* rispetta la preferenza di movimento ridotto */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}