/* "Ползи от Монтесори" as a garden (parts/benefits.php): the flower bed of the home page with its watering can and
   mole, notes with sprouts, a title that grows out of the ground, a flower for every benefit (each grows at its own
   pace and opens into a card), a bee and a butterfly flying between them, worms and the mole in the soil. */

.garden { position: relative; padding: 10px 0 0; overflow: hidden; }
.bg .garden__title { font-family: 'Neucha', Arial, sans-serif; }

/* ---------- The opening: the lead and the flower bed of the home page ---------- */
.garden__intro { position: relative; display: flex; align-items: flex-end; gap: 30px; padding: 40px 0 20px; }
.garden__lead { flex: 1; min-width: 0; padding: 34px 40px; border-radius: 30px; background: #fff; box-shadow: 0 24px 40px -26px rgba(60, 40, 20, .5); opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .9s cubic-bezier(.34, 1.3, .64, 1); }
.is-in .garden__lead { opacity: 1; transform: none; }
.garden__lead p { margin: 0; font-size: 19px; line-height: 1.75; color: #3c4741; }
/* the bed is the home page's: tulips on soil, the watering can hanging from its balloon right over the hole */
.garden__bed { flex: none; position: relative; width: 420px; height: 273px; cursor: pointer; }
.garden__bed-in { position: absolute; left: 0; bottom: 0; width: 600px; height: 390px; transform: scale(.7); transform-origin: 0 100%; }
.garden__tulips { position: absolute; left: 0; bottom: 0; width: 488px; height: 175px; background: url('../images/flowers.svg') no-repeat left bottom; transform-origin: 30% 100%; transform: scaleY(.8) skewX(-6deg); filter: saturate(.55); transition: transform 1.6s cubic-bezier(.34, 1.4, .64, 1), filter 1.2s; }
.is-watered .garden__tulips { transform: none; filter: none; transition-delay: 1s; }
.garden__can { position: absolute; left: 250px; bottom: 10px; width: 345px; height: 370px; background: url('../images/water-can.png') no-repeat 0 0; opacity: 0; transform: translateY(-60px); transition: opacity .8s, transform 1.4s cubic-bezier(.34, 1.3, .64, 1); }
.is-in .garden__can { opacity: 1; transform: none; }
/* it tips over, pours (the mole comes out of the hole), waits and stands up again – the frames of the original */
.is-pour .garden__can { animation: garden-pour 3.4s forwards; }
@keyframes garden-pour {
	0% { background-position: 0 0; animation-timing-function: steps(8, end); }
	26% { background-position: -2760px 0; }
	74% { background-position: -2760px 0; animation-timing-function: steps(8, end); }
	100% { background-position: 0 0; }
}

/* ---------- Notes, each with a sprout growing out of its top ---------- */
.garden__notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 30px; padding: 70px 0 20px; }
.garden__notes--odd { grid-template-columns: repeat(3, 1fr); }
.garden__notes--after { padding-top: 40px; }
.note { position: relative; padding: 30px 30px 26px; border-radius: 26px; background: #fff; box-shadow: 0 20px 34px -24px rgba(60, 40, 20, .5); border-top: 6px solid var(--c); opacity: 0; transform: translateY(50px); transition: opacity .7s calc(var(--k) * .15s), transform 1s cubic-bezier(.34, 1.3, .64, 1) calc(var(--k) * .15s); }
.note.is-in { opacity: 1; transform: none; }
.note p { margin: 0; font-size: 16px; line-height: 1.75; color: #3c4741; }
.note__sprout { position: absolute; left: 34px; top: -6px; width: 0; height: 0; }
.note__stem { position: absolute; left: -3px; bottom: 0; width: 6px; height: 46px; border-radius: 3px; background: #5fb64f; transform-origin: 50% 100%; transform: scaleY(0); }
.note__leaf { position: absolute; left: 2px; bottom: 30px; width: 26px; height: 14px; border-radius: 0 100% 0 100%; background: #7ad068; transform-origin: 0 100%; transform: rotate(-30deg) scale(0); }
.note__leaf--r { left: auto; right: 2px; bottom: 40px; border-radius: 100% 0 100% 0; transform-origin: 100% 100%; transform: rotate(30deg) scale(0); }
.note.is-in .note__stem { transform: none; transition: transform .8s cubic-bezier(.3, .7, .4, 1) calc(.5s + var(--k) * .15s); }
.note.is-in .note__leaf { transform: rotate(-30deg) scale(1); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(1.1s + var(--k) * .15s); }
.note.is-in .note__leaf--r { transform: rotate(30deg) scale(1); transition-delay: calc(1.3s + var(--k) * .15s); }
.note.is-in .note__sprout { animation: garden-sway 3.4s ease-in-out 2s infinite alternate; }

/* ---------- The title: its letters grow out of the ground ---------- */
.garden__title { margin: 70px auto 0; font: 400 46px/1.2 'Cabin Sketch', Arial, sans-serif; text-align: center; color: #3c4741; }
.garden__title .l { display: inline-block; color: var(--c); transform-origin: 50% 100%; transform: scale(.2, 0); }
.garden__title .sp { display: inline-block; width: .3em; }
.garden__title.is-in .l { animation: garden-letter .8s cubic-bezier(.34, 1.56, .64, 1) forwards, garden-breeze 3s ease-in-out infinite alternate; animation-delay: calc(var(--k) * .05s), calc(1s + var(--k) * .12s); }
@keyframes garden-letter { to { transform: none; } }
@keyframes garden-breeze { from { transform: none; } to { transform: rotate(-5deg) translateY(-3px); } }

/* ---------- The garden: a flower for every benefit ---------- */
.garden__area { position: relative; padding-top: 20px; }
.garden__beds { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; margin: 0; padding: 0; list-style: none; }
.bloom { position: relative; display: flex; justify-content: center; padding: 56px 14px 30px; }
/* each flower's own piece of grass – side by side they make the bed of the row */
.bloom::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 44px; background: url('../images/background-grass-top.svg') repeat-x 0 0 / 960px 35px, linear-gradient(transparent 28px, #7ad068 28px); }
.bloom:nth-child(3n+2)::after { background-position: -320px 0, 0 0; }
.bloom:nth-child(3n)::after { background-position: -640px 0, 0 0; }
/* the first and the last flower of a row carry the grass out to the edges of the screen */
.bloom:nth-child(3n+1)::after { left: -100vw; }
.bloom:nth-child(3n)::after, .bloom:last-child::after { right: -100vw; }
.bloom__plant { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; transform-origin: 50% 100%; }
.bloom.is-open .bloom__plant { animation: garden-sway var(--s) ease-in-out infinite alternate; }
@keyframes garden-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

.bloom__stem { position: relative; display: block; width: 8px; height: var(--h); margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #4c9a3f, #63b953 60%, #4c9a3f); transform-origin: 50% 100%; transform: scaleY(0); }
.bloom__leaf { position: absolute; left: 6px; top: 34%; width: 36px; height: 17px; border-radius: 0 100% 0 100%; background: #5fb64f; transform-origin: 0 100%; transform: rotate(-26deg) scale(0); }
.bloom__leaf--r { left: auto; right: 6px; top: 58%; border-radius: 100% 0 100% 0; transform-origin: 100% 100%; transform: rotate(26deg) scale(0); }
.bloom.is-in .bloom__stem { transform: none; transition: transform var(--g) cubic-bezier(.3, .7, .4, 1); }
.bloom.is-in .bloom__leaf { transform: rotate(-26deg) scale(1); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--g) * .55); }
.bloom.is-in .bloom__leaf--r { transform: rotate(26deg) scale(1); transition-delay: calc(var(--g) * .8); }

.bloom__card { position: relative; width: 100%; padding: 52px 24px 24px; border-radius: 26px; background: #fff; box-shadow: 0 20px 34px -24px rgba(60, 40, 20, .55); border-bottom: 5px solid var(--c); text-align: center; transform-origin: 50% 100%; transform: translateY(var(--h)) scale(.1); opacity: 0; }
.bloom.is-in .bloom__card { animation: garden-open 1s cubic-bezier(.34, 1.4, .64, 1) var(--g) forwards; }
@keyframes garden-open { 0% { opacity: 0; transform: translateY(40px) scale(.1) rotate(-8deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.bloom__card p { margin: 0; font-size: 17px; line-height: 1.6; color: #3c4741; }

/* the flower on top of the card: six petals around a yellow middle */
.bloom__head { position: absolute; left: 50%; top: 2px; width: 0; height: 0; transition: transform .2s; }
.bloom__head i { position: absolute; left: -14px; top: -40px; width: 28px; height: 40px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); transform-origin: 50% 100%; transform: rotate(var(--a)) scale(0); }
.bloom__head i:nth-child(1) { --a: 0deg; --n: 0; } .bloom__head i:nth-child(2) { --a: 60deg; --n: 1; } .bloom__head i:nth-child(3) { --a: 120deg; --n: 2; }
.bloom__head i:nth-child(4) { --a: 180deg; --n: 3; } .bloom__head i:nth-child(5) { --a: 240deg; --n: 4; } .bloom__head i:nth-child(6) { --a: 300deg; --n: 5; }
.bloom__head b { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3a0, #ffe400 55%, #e6b800); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); transform: scale(0); }
.bloom[style*="#e6b800"] .bloom__head b { background: radial-gradient(circle at 40% 35%, #ffb27a, #ff7b05 60%, #d85f00); }
.bloom.is-in .bloom__head i { animation: garden-petal .6s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--g) + .5s + var(--n) * .08s); }
.bloom.is-in .bloom__head b { animation: garden-mid .5s cubic-bezier(.34, 1.56, .64, 1) forwards; animation-delay: calc(var(--g) + 1s); }
@keyframes garden-petal { to { transform: rotate(var(--a)) scale(1); } }
@keyframes garden-mid { to { transform: scale(1); } }
.bloom.is-open .bloom__card:hover .bloom__head { animation: garden-spin 1.1s cubic-bezier(.34, 1.3, .64, 1); }
@keyframes garden-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } to { transform: rotate(360deg) scale(1); } }

/* ---------- The bee and the butterfly (Lottie) ---------- */
.garden__flyer { position: absolute; z-index: 3; left: 0; top: 0; width: 90px; height: 90px; margin: -45px 0 0 -45px; opacity: 0; pointer-events: none; transition: opacity .8s; will-change: transform; }
.garden__flyer.is-on { opacity: 1; }
.garden__flyer--fly { width: 80px; height: 80px; margin: -40px 0 0 -40px; }
.garden__flyer-in { display: block; width: 100%; height: 100%; animation: garden-bob 1.3s ease-in-out infinite alternate; }
.garden__flyer--fly .garden__flyer-in { animation-duration: 1.8s; }
.garden__lottie { display: block; width: 100%; height: 100%; transition: transform .25s; }
.garden__lottie svg { display: block; }
.is-left .garden__lottie { transform: scaleX(-1); }
@keyframes garden-bob { from { translate: 0 -6px; } to { translate: 0 6px; } }

/* ---------- The soil: worms and the mole ---------- */
/* right under the grass of the last row: a strip of grass, then the soil's wavy edge */
.garden__soil { position: relative; height: 170px; background: url('../images/background-soil-top.svg') repeat-x center top / 1518px 36px, linear-gradient(#7ad068 0, #7ad068 18px, #7a5e58 18px); overflow: hidden; }
.garden__soil::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; bottom: 0; background: url('../images/background-soil.svg') repeat center top; opacity: .7; }
.garden__notes--after + .garden__soil { margin-top: 40px; }
.garden__worm { position: absolute; z-index: 1; left: -120px; top: 104px; width: 110px; height: 30px; animation: garden-crawl 26s linear infinite; }
.garden__worm i { display: block; width: 110px; height: 30px; background: url('../images/worm-1-sprite.svg') no-repeat 0 0 / 550px 30px; animation: garden-wiggle .6s steps(5, end) infinite alternate; }
@keyframes garden-crawl { from { left: -120px; } to { left: 105%; } }
@keyframes garden-wiggle { from { background-position: 0 0; } to { background-position: -550px 0; } }
.garden__worm2 { position: absolute; z-index: 1; left: 34%; top: 40px; width: 82px; height: 37px; background: url('../images/worm-2.svg') no-repeat; transform-origin: 30% 100%; animation: garden-peek 2.4s ease-in-out infinite alternate; }
.garden__worm3 { position: absolute; z-index: 1; right: 30%; top: 120px; width: 66px; height: 37px; background: url('../images/worm-3.svg') no-repeat; transform: scaleX(-1); transform-origin: 70% 100%; animation: garden-peek-r 3s ease-in-out infinite alternate; }
@keyframes garden-peek { from { transform: rotate(-8deg); } to { transform: rotate(10deg) translateY(-4px); } }
@keyframes garden-peek-r { from { transform: scaleX(-1) rotate(-6deg); } to { transform: scaleX(-1) rotate(12deg) translateY(-3px); } }
/* the mole's holes; one at a time it looks out, a click sends it down */
.garden__hole { position: absolute; z-index: 2; left: var(--x); top: 20px; width: 130px; height: 80px; margin-left: -65px; overflow: hidden; }
.garden__hole::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 24px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #2b1d17 55%, #5a4033 72%); }
.garden__mole { position: absolute; z-index: 1; left: 6px; bottom: -70px; width: 119px; height: 44px; background: url('../images/mole-sprite.svg') no-repeat 0 0 / 119px 132px; cursor: pointer; pointer-events: auto; transition: bottom .25s cubic-bezier(.34, 1.4, .64, 1); }
.garden__mole.is-up { bottom: 12px; animation: garden-sniff .6s steps(3, end) infinite alternate; }
.garden__mole.is-down { bottom: -70px; transition-duration: .12s; }
@keyframes garden-sniff { from { background-position: 0 0; } to { background-position: 0 -132px; } }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.garden__beds { grid-template-columns: repeat(2, 1fr); }
	.bloom:nth-child(n)::after { left: 0; right: 0; background-position: 0 0, 0 0; }
	.bloom:nth-child(2n)::after { background-position: -480px 0, 0 0; }
	.bloom:nth-child(2n+1)::after { left: -100vw; }
	.bloom:nth-child(2n)::after, .bloom:last-child::after { right: -100vw; }
	.garden__bed { width: 360px; height: 234px; }
	.garden__bed-in { transform: scale(.6); }
	.garden__notes--odd { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 768px) {
	.garden__intro { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 24px; }
	.garden__lead { padding: 24px 22px; }
	.garden__lead p { font-size: 17px; }
	.garden__bed { align-self: center; width: 300px; height: 195px; }
	.garden__bed-in { transform: scale(.5); }
	.garden__notes, .garden__notes--odd { grid-template-columns: 1fr; gap: 50px; padding-top: 50px; }
	.garden__title { font-size: 34px; margin-top: 50px; }
	/* two flowers a row on a phone too: one long column of 18 beds was endless; shorter stems, smaller cards */
	.garden__beds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bloom { padding: 46px 5px 28px; }
	.bloom__stem { height: calc(var(--h) * .5); }
	.bloom__card { padding: 40px 10px 16px; border-radius: 20px; }
	.bloom__card p { font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
	.bloom__head { scale: .8; }
	/* the bee and the butterfly fly behind the cards: over the narrow cards they covered the words */
	.garden__flyer { z-index: 0; }
	.garden__flyer { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media only screen and (max-width: 600px) {
	.bloom__card p { font-size: 14.5px; line-height: 1.45; }
}
@media only screen and (max-width: 400px) {
	/* the smallest phones: long words ("взаимоотношения") fit the card whole */
	.bloom { padding-left: 3px; padding-right: 3px; }
	.bloom__card { padding-left: 8px; padding-right: 8px; }
	.bloom__card p { font-size: 13.5px; overflow-wrap: break-word; }
}
@media (prefers-reduced-motion: reduce) {
	.garden *, .garden *::before, .garden *::after { animation: none !important; transition: none !important; }
	.garden__lead, .note, .garden__can, .bloom__card, .bloom__stem, .garden__tulips { opacity: 1 !important; transform: none !important; filter: none !important; }
	.garden__title .l, .bloom__head b { transform: none !important; }
	.bloom__head i { transform: rotate(var(--a)) !important; }
	.bloom__leaf { transform: rotate(-26deg) !important; } .bloom__leaf--r { transform: rotate(26deg) !important; }
	.note__stem { transform: none !important; } .note__leaf { transform: rotate(-30deg) !important; } .note__leaf--r { transform: rotate(30deg) !important; }
	.garden__flyer, .garden__worm { display: none; }
}