/* Home – the questions in one of three scenes (parts/home-faq.php): balloons tied to the meadow (?faq=1),
   flowers in pots that bloom when watered (?faq=2), drops of water hanging from a cloud (?faq=3). */

/* ---------- The section: the beige ground of "Защо нас" goes on, and its grass fringe moves down to our feet ---------- */
.whyus:has(+ .faq)::after { display: none; }
/* the section lies over the elephant and the ladder: it lets every click through, except on its own things */
.faq { position: relative; z-index: 3; padding: 70px 0 40px; pointer-events: none; }
.faq.has-open .faq-overlay { pointer-events: auto; }
.faq::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 45px; background: url('../images/background-grass-top.svg') repeat-x center top; pointer-events: none; }
.faq h2 { margin: 0 0 30px; text-align: center; }
.faq .wrapper { position: relative; }
/* only the balloons, flowers, drops and cards take the pointer: the elephant and the ladder behind stay clickable */
.faq-field { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0 6px; pointer-events: none; }
/* every item is its own stack (the entrance animation makes it one anyway): above the grass fringe, and the open one above its neighbours */
.faq-item { position: relative; z-index: 2; width: 196px; }
/* the open one above its neighbours and above the veil behind its answer (.faq-overlay, z-index 25) */
.faq-item.is-open, .faq-item.is-watering { z-index: 30; }
.faq-item__stage { position: relative; }
.faq button { -webkit-tap-highlight-color: transparent; outline: none; }
.plant, .drop, .balloon__body { pointer-events: auto; }
.balloon:focus-visible .balloon__body, .plant:focus-visible .plant__pot, .drop:focus-visible .drop__body { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c); }
.faq-card__x:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }

/* ---------- The answer: a white card in the scene ---------- */
.faq-card {
	position: absolute; left: 50%; top: 0; z-index: 30; width: 360px; margin-left: -180px; padding: 30px 30px 24px;
	background: #fff; border-radius: 18px; box-shadow: 0 30px 50px -22px rgba(0, 30, 70, .5);
	transform: scale(.15) translateY(60px); transform-origin: 50% 40%; opacity: 0; pointer-events: none; visibility: hidden;
	transition: transform .7s cubic-bezier(.34, 1.4, .64, 1), opacity .3s, visibility 0s linear .7s;
}
.faq-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 18px 18px 0 0; background: var(--c); }
.faq-item.is-open .faq-card { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition-delay: .15s, .15s, 0s; }
.faq-item:first-of-type .faq-card { left: 0; margin-left: 0; }
.faq-item:last-of-type .faq-card { left: auto; right: 0; margin-left: 0; }
.faq-card h4 { margin: 0 40px 12px 0; font: 400 26px/1.15 'Cabin Sketch', Arial, sans-serif; color: #3c4741; }
.faq-card__text { font: 400 15px/1.6 'Open Sans', sans-serif; color: #3c4741; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 18px; }
.faq-card__text p { margin: 0 0 10px; }
.faq-card .btn { margin: 0; }
.faq-card__x { position: absolute; right: 14px; top: 18px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #e6e6e6; color: #3c4741; font: 400 34px/1 'Cabin Sketch', Arial, sans-serif; cursor: pointer; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s; }
.faq-card__x:hover { transform: rotate(180deg); background: var(--c); color: #fff; }
/* behind an open answer on a phone the page fades into its own beige (it turned blue before – 2026-11-05) */
.faq-overlay { position: fixed; inset: 0; z-index: 25; background: rgba(248, 241, 236, .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }

/* ========== 1. Balloons ========== */
/* they rise from the grass one after another when the section comes into view (faq.js adds is-in) */
.faq--balloons .faq-item { opacity: 0; transform: translateY(320px); }
.faq--balloons.is-in .faq-item { animation: balloon-rise 1.5s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: calc(var(--i, 0) * .14s); }
.faq--balloons .faq-item__float { animation: balloon-bob 5.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
/* tall enough for the balloons to float above the elephant; only the strings cross it */
.balloon { position: relative; display: block; width: 100%; height: 420px; padding: 0; border: 0; background: none; cursor: pointer; }
.faq-item:nth-of-type(2n) .balloon { height: 380px; }
.faq-item:nth-of-type(3n) .balloon { height: 452px; }
.balloon__body {
	position: absolute; left: 50%; top: 0; width: 160px; height: 196px; margin-left: -80px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; padding: 20px 16px 24px; box-sizing: border-box;
	border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%;
	background: radial-gradient(ellipse at 36% 30%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 55%), var(--c);
	box-shadow: inset -16px -22px 34px rgba(0, 0, 0, .18), inset 6px 8px 14px rgba(255, 255, 255, .18), 0 26px 32px -22px rgba(0, 0, 0, .5);
	transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
/* a sharp gloss on the shoulder and a slow shine passing over the rubber */
.balloon__body::before { content: ''; position: absolute; left: 24%; top: 9%; width: 24%; height: 15%; border-radius: 50%; background: rgba(255, 255, 255, .8); filter: blur(2px); transform: rotate(-32deg); }
.balloon__body::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%) 0 0 / 260% 100% no-repeat; animation: balloon-shine 7s linear infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.balloon:hover .balloon__body { transform: translateY(-10px) scale(1.05) rotate(-2deg); }
.balloon__q { position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font: 400 17.5px/1.25 'Neucha', 'Open Sans', sans-serif; letter-spacing: .01em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .2); }
.faq-item--dark .balloon__q { color: #4a3b00; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
/* long questions get a smaller size, so they fit whole */
.faq-item--long .balloon__q { font-size: 15px; line-height: 1.2; -webkit-line-clamp: 8; }
.faq-item--long .drop__q { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 8; }
.faq-item--long .plant__label span { font-size: 11.5px; -webkit-line-clamp: 6; }
.balloon__knot { position: absolute; left: 50%; top: 190px; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid var(--c); filter: brightness(.82); }
.balloon__string { position: absolute; left: 50%; top: 202px; bottom: 0; width: 20px; height: auto; margin-left: -10px; fill: none; stroke: #6b5a48; stroke-width: 2; stroke-linecap: round; opacity: .7; transform-origin: 50% 0; animation: string-wave 5.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
/* the pop: a flash ring and eight pieces of rubber */
.burst { position: absolute; left: 50%; top: 98px; width: 0; height: 0; pointer-events: none; }
.burst::before { content: ''; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid #fff; opacity: 0; }
.faq--balloons .faq-item.is-open .burst::before { animation: burst-ring .5s ease-out forwards; }
.burst i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 40% 60% 50% 50%; background: var(--c); opacity: 0; transform: rotate(var(--a)); }
.burst i:nth-child(1) { --a: 0deg; } .burst i:nth-child(2) { --a: 45deg; } .burst i:nth-child(3) { --a: 90deg; } .burst i:nth-child(4) { --a: 135deg; }
.burst i:nth-child(5) { --a: 180deg; } .burst i:nth-child(6) { --a: 225deg; } .burst i:nth-child(7) { --a: 270deg; } .burst i:nth-child(8) { --a: 315deg; }
.faq--balloons .faq-item.is-open .balloon { pointer-events: none; }
.faq--balloons .faq-item.is-open .balloon__body { animation: balloon-pop .32s ease-out forwards; }
.faq--balloons .faq-item.is-open .balloon__knot { animation: knot-fall .9s ease-in forwards; }
.faq--balloons .faq-item.is-open .balloon__string { animation: string-fall 1s ease-in forwards; }
.faq--balloons .faq-item.is-open .burst i { animation: burst .75s cubic-bezier(.2, .7, .3, 1) forwards; }
.faq--balloons .faq-item.is-open .burst i:nth-child(2n) { animation-duration: .6s; }
.faq--balloons .faq-item.is-back .balloon__body { animation: balloon-inflate .9s cubic-bezier(.34, 1.56, .64, 1) both; }
.faq--balloons .faq-item.is-back .balloon__string { animation: string-wave 5.2s ease-in-out infinite, fade-in .5s .3s both; }
.faq--balloons .faq-item.is-back .balloon__knot { animation: fade-in .5s .3s both; }

/* risen: no transform is left on the item (faq.js adds is-up) – a transform, even a still one, makes the answer's
   "position: fixed" on a phone count from the narrow balloon instead of the screen, so it came out as a long strip */
.faq--balloons .faq-item.is-up { opacity: 1; transform: none; animation: none; }
@keyframes balloon-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes balloon-rise { 0% { opacity: 0; transform: translateY(320px) rotate(4deg); } 30% { opacity: 1; } 80% { transform: translateY(-12px) rotate(-1deg); } 100% { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes balloon-shine { 0% { background-position: 120% 0; } 35%, 100% { background-position: -120% 0; } }
@keyframes burst-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes string-wave { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes balloon-pop { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.22, 1.14); opacity: 1; } 100% { transform: scale(1.4, 1.3); opacity: 0; } }
@keyframes balloon-inflate { 0% { transform: scale(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes knot-fall { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(160px) rotate(60deg); } }
@keyframes string-fall { 0% { opacity: .75; transform: rotate(0) translateY(0); } 100% { opacity: 0; transform: rotate(35deg) translateY(170px); } }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scale(.3); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: .75; } }

/* ---------- 1a. The balloons are tied (the client's notes of 2026-11-05) ----------
   A wide screen: a rope stretched from a wooden post on the left to the ladder of the scene, every balloon tied to it
   with its own string. A narrow screen: a ladder stands between the two columns and the balloons are tied to it.
   faq.js draws the strings, the rope and the knots in .faq-ropes and keeps them on the bobbing balloons. */
/* nearer to "Why us": the client saw too much empty room above the questions */
.whyus:has(+ .faq--balloons) { padding-bottom: 0; }
.faq--balloons { padding-top: 20px; }
.faq--balloons h2 { margin-bottom: 18px; }
.faq--balloons .balloon__string { display: none; }
/* the balloons stand higher than the rope above the elephant; the knots come at different heights */
.faq--balloons .balloon { height: 488px; }
.faq--balloons .faq-item:nth-of-type(2n) .balloon { height: 448px; }
.faq--balloons .faq-item:nth-of-type(3n) .balloon { height: 518px; }
/* the row keeps clear of the ladder on the right, so the bird on top of it stays in sight */
.faq--balloons .faq-field { flex-wrap: nowrap; justify-content: flex-start; padding-right: 150px; }
.faq--balloons .faq-item { flex: 0 1 196px; min-width: 0; }
.faq .faq-ropes { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.faq-ropes path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* the strings come with the balloons as they rise from the grass */
.faq-ropes__string { stroke: #6b5a48; stroke-width: 2; opacity: 0; transition: opacity .6s; }
.faq--balloons.is-in .faq-ropes__string { opacity: .75; transition-delay: 1.3s; }
/* a twisted rope: a light cord and darker turns over it */
.faq-ropes__rope { stroke: #a5876a; stroke-width: 4.5; }
.faq-ropes__twist { stroke: #6f563f; stroke-width: 4.5; stroke-dasharray: 2.2 5; opacity: .55; }
.faq-ropes__dot { fill: #6f563f; }
/* the post on the left: the same wood as the ladder (faq.js sets where and how tall) */
.faq-post { display: none; position: absolute; z-index: 0; width: 16px; margin-left: -8px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, #a98f78, #c7b3a2 45%, #b09781); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .06); }
.faq-post::before { content: ''; position: absolute; left: -3px; right: -3px; top: -7px; height: 12px; border-radius: 50%; background: #b09781; }
.faq-post.is-set { display: block; }
/* 2026-11-11: a young tree instead of the post (the client: "като растение или дърво, а не пръчка") – the trunk and
   branches in the colour of the house's trees, a crown of the scene's greens that sways a little; the rope is tied to
   the trunk under it. faq.js sets where it stands, how tall it is and how far the crown leans off the screen's edge. */
/* "още повече като дърво" (2026-11-11): a real trunk – bark-coloured, wider down to its roots, with the light on one
   side – going on into three branches and a big crown of three greens (parts/home-faq.php) */
.faq-post.faq-tree { width: 28px; margin-left: -14px; border-radius: 0; background: none; box-shadow: none; }
/* (the narrowing is on a layer of its own: a clip on the tree itself would cut off its crown) */
.faq-post.faq-tree::before { left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: 0; background: linear-gradient(90deg, #6f5240 0 22%, #8a6a52 22% 58%, #a07f66 58% 72%, #7a5b46 72%); clip-path: polygon(18% 0, 82% 0, 90% 88%, 100% 100%, 0 100%, 10% 88%); }
/* the roots spreading into the grass */
.faq-post.faq-tree::after { content: ''; position: absolute; left: -16px; right: -16px; bottom: -3px; height: 16px; background: #7a5b46; clip-path: polygon(40% 0, 60% 0, 66% 38%, 100% 100%, 78% 100%, 60% 66%, 52% 100%, 46% 100%, 40% 66%, 22% 100%, 0 100%, 34% 38%); }
/* the crown: the trunk goes on at x 180 of its drawing (300 × 240), so the crown leans a little to the edge */
.faq-tree__crown { position: absolute; left: 50%; bottom: calc(100% - 3px); width: 300px; height: 240px; margin-left: -180px; overflow: visible; transform-origin: 180px 100%; scale: var(--crown, 1); animation: tree-sway 6s ease-in-out infinite alternate; pointer-events: none; }
/* (normalize.css hides what is outside an svg – svg:not(:root) – and that cut the top of the crown flat) */
.faq-post .faq-tree__crown { overflow: visible; }
.faq-tree__wood { fill: #8a6a52; }
/* at the very edge of the screen the leaves come in a little (faq.js: --lean), over the branches' tips */
.faq-tree__leaves { transform: translateX(calc(var(--lean, 0px) * .6)); }
.faq-tree__leaves--back { fill: #4f9f45; }
.faq-tree__leaves--mid { fill: #6cc35a; }
.faq-tree__leaves--light { fill: #8fd874; }
.faq-tree__leaves circle { transform-box: fill-box; transform-origin: 50% 80%; animation: leaf-breathe 3.4s ease-in-out infinite alternate; }
.faq-tree__leaves circle:nth-child(2n) { animation-delay: -1.7s; }
.faq-tree__leaves circle:nth-child(3n) { animation-duration: 4.1s; }
@keyframes tree-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes leaf-breathe { from { transform: scale(1); } to { transform: scale(1.05, 1.03); } }

/* ---------- 1b. The arrows for the next questions (2026-11-11) ----------
   More questions than balloons: an arrow unties them one after another from the rope and they fly off into the sky
   (smaller and smaller, the string swinging under each – faq.js draws it), new ones are blown up in their places in
   three breaths and their questions come up when they are full. Only by the arrows, never by themselves. */
.faq-nav { position: relative; z-index: 6; display: flex; justify-content: center; align-items: center; gap: 16px; margin: -4px 0 8px; pointer-events: none; }
.faq--balloons h2 { margin-bottom: 10px; }
.faq-nav__btn {
	position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: #fff; color: #3c4741; cursor: pointer; pointer-events: auto; box-shadow: 0 8px 16px -10px rgba(0, 30, 70, .55);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s;
}
.faq-nav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.faq-nav__btn:hover { transform: translateY(-3px) scale(1.07); background: #ff5736; color: #fff; }
.faq-nav__btn--prev:hover svg { animation: nav-nudge-l .6s ease-in-out infinite alternate; }
.faq-nav__btn--next:hover svg { animation: nav-nudge-r .6s ease-in-out infinite alternate; }
.faq-nav__btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff5736; }
@keyframes nav-nudge-l { to { transform: translateX(-3px); } }
@keyframes nav-nudge-r { to { transform: translateX(3px); } }

/* the flight off: a tug as the knot slips off the rope, then up and away, smaller and smaller */
.faq--balloons .faq-item__stage { transform-origin: 50% 100px; }
.faq--balloons .faq-item.is-leaving .faq-item__stage { animation: balloon-away 1.65s cubic-bezier(.45, 0, .75, .45) forwards; pointer-events: none; }
.faq--balloons .faq-item.is-leaving .balloon, .faq--balloons .faq-item.is-arriving .balloon { pointer-events: none; }
@keyframes balloon-away {
	0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
	14% { transform: translate(0, 14px) rotate(calc(var(--tilt, 6deg) * -.3)) scale(1.03, .96); opacity: 1; }
	55% { opacity: 1; }
	100% { transform: translate(var(--drift, 30px), -300px) rotate(var(--tilt, 6deg)) scale(.3); opacity: 0; }
}
/* the new one: blown up in three breaths from its knot, a puff of air round it when it is full, then the question */
.faq--balloons .faq-item.is-arriving .balloon__body { animation: balloon-blow 1.25s cubic-bezier(.3, 1.3, .6, 1) both; }
.faq--balloons .faq-item.is-arriving .balloon__q { animation: question-in .5s 1s both; }
.faq--balloons .faq-item.is-arriving .balloon__knot { animation: knot-in .3s both; }
.faq--balloons .faq-item.is-arriving .burst::before { border-color: rgba(255, 255, 255, .9); animation: burst-ring .6s 1.05s ease-out forwards; }
@keyframes balloon-blow {
	0% { transform: scale(.06, .04); opacity: 0; }
	10% { transform: scale(.14, .1); opacity: 1; }
	28% { transform: scale(.46, .5); }
	36% { transform: scale(.42, .45); }
	62% { transform: scale(.8, .86); }
	70% { transform: scale(.76, .8); }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes question-in { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes knot-in { from { opacity: 0; } to { opacity: 1; } }
/* the ladder between the columns of a narrow screen, with the blue bird of the scene on top */
.faq-ladder { display: none; }

@media only screen and (max-width: 1110px) {
	.faq--balloons + .elephant-ladder .ladder { display: none; }
	.faq--balloons .faq-post { display: none; }
	.faq--balloons .faq-field { flex-wrap: wrap; justify-content: space-between; max-width: 500px; padding-right: 0; }
	.faq--balloons .faq-item { flex: none; width: calc(50% - 46px); }
	.faq--balloons .faq-item:nth-of-type(2n) .faq-item__stage { margin-top: 50px; }
	.faq--balloons .balloon, .faq--balloons .faq-item:nth-of-type(2n) .balloon, .faq--balloons .faq-item:nth-of-type(3n) .balloon { height: 272px; }
	.faq-ladder {
		display: block; position: absolute; z-index: 0; left: 50%; top: 150px; bottom: -36px; width: 56px; margin-left: -28px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='46'%3E%3Crect x='3' y='34' width='50' height='8' rx='4' fill='%23b09781'/%3E%3C/svg%3E") repeat-y center top / 56px 46px;
	}
	.faq-ladder::before, .faq-ladder::after { content: ''; position: absolute; top: -8px; bottom: 0; width: 10px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #b8a28e, #c7b3a2 50%, #b8a28e); }
	.faq-ladder::before { left: 0; }
	.faq-ladder::after { right: 0; }
	.faq-ladder__bird { position: absolute; left: 50%; bottom: 100%; width: 130px; height: 125px; margin: 0 0 -26px -58px; background: url('../images/bird-sprite.svg') no-repeat 0 0; transform: scale(.62); transform-origin: 50% 100%; }
	/* the elephant stands in the grass on the left of the ladder, its trunk reaching to it (it was a small grey
	   shape behind the ladder) */
	.faq--balloons + .elephant-ladder { z-index: 4; transform: none; }
	.faq--balloons + .elephant-ladder .elephant { left: auto; right: calc(50% + 34px); bottom: -14px; transform: scale(.8); transform-origin: 100% 100%; }
}
@media only screen and (max-width: 768px) {
	.faq.faq--balloons { padding-top: 10px; }
	.faq--balloons .balloon, .faq--balloons .faq-item:nth-of-type(2n) .balloon, .faq--balloons .faq-item:nth-of-type(3n) .balloon { height: 250px; }
	.faq--balloons .faq-field { max-width: 380px; }
	.faq--balloons .faq-item { width: calc(50% - 26px); max-width: none; }
	.faq-ladder { width: 40px; margin-left: -20px; top: 130px; background-size: 40px 40px; }
	.faq-ladder::before, .faq-ladder::after { width: 8px; }
	.faq-ladder__bird { transform: scale(.5); margin-left: -60px; }
	.faq--balloons + .elephant-ladder .elephant { right: calc(50% + 16px); bottom: -10px; transform: scale(.56); }
}
@media only screen and (max-width: 380px) {
	.faq--balloons + .elephant-ladder .elephant { transform: scale(.5); }
}

/* ========== 2. Flowers in pots ========== */
.plant { position: relative; display: block; width: 100%; height: 420px; padding: 0; border: 0; background: none; cursor: pointer; }
/* the pot: a rim, a tapered body and a label with the question */
.plant__pot { position: absolute; left: 50%; bottom: 0; width: 180px; height: 120px; margin-left: -90px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.plant:hover .plant__pot { transform: translateY(-3px); }
.plant__pot::before { content: ''; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 24px; border-radius: 7px; background: linear-gradient(180deg, #ee9a68, #d2693a); box-shadow: 0 3px 4px -2px rgba(0, 0, 0, .25); }
.plant__pot::after { content: ''; position: absolute; left: 10px; right: 10px; top: 20px; bottom: 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: linear-gradient(90deg, #d2693a, #ec935f 40%, #e1804d 75%, #c9602f); border-radius: 0 0 14px 14px; }
.plant__label { position: absolute; z-index: 3; left: 24px; right: 24px; top: 38px; bottom: 12px; display: flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 2px #ecd9bb, 0 2px 0 rgba(0, 0, 0, .08); }
.plant__label span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-align: center; font: 600 12.5px/1.3 'Open Sans', sans-serif; color: #5a4330; }
/* a soft shadow under the pot */
.plant::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 170px; height: 18px; margin-left: -85px; border-radius: 50%; background: radial-gradient(ellipse, rgba(60, 40, 20, .22), rgba(60, 40, 20, 0) 70%); }
/* the stem grows when watered */
.plant__stem { position: absolute; left: 50%; bottom: 108px; width: 7px; height: 92px; margin-left: -3px; border-radius: 4px; background: linear-gradient(90deg, #27655a, #3f8f78); transition: height .9s cubic-bezier(.34, 1.2, .64, 1); }
.faq-item.is-bloomed .plant__stem { height: 178px; }
.plant__leaf { position: absolute; width: 48px; height: 22px; background: linear-gradient(90deg, #2f7a68, #3f9a84); transform-origin: 0 50%; transition: transform .9s .2s cubic-bezier(.34, 1.3, .64, 1); }
.plant__leaf--l { right: 3px; bottom: 22px; border-radius: 60% 0 60% 0; transform-origin: 100% 50%; transform: rotate(28deg) scale(.75); }
.plant__leaf--r { left: 3px; bottom: 46px; border-radius: 0 60% 0 60%; transform: rotate(-28deg) scale(.75); }
.faq-item.is-bloomed .plant__leaf--l { transform: rotate(22deg) scale(1); }
.faq-item.is-bloomed .plant__leaf--r { transform: rotate(-22deg) scale(1); }
/* the head of the plant sits on top of the stem: a bud, then the flower */
.plant__head { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.faq-item.is-bloomed .plant__head { animation: flower-sway 4.2s ease-in-out 1s infinite; }
.plant__bud { position: absolute; left: -14px; top: -34px; width: 28px; height: 42px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 70%); box-shadow: inset -4px -6px 8px rgba(0, 0, 0, .12); transform-origin: 50% 100%; transition: transform .5s .3s, opacity .4s .3s; }
.plant__bud::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: -4px; height: 18px; border-radius: 50% 50% 45% 45% / 100% 100% 30% 30%; background: #2f7a68; }
.faq-item.is-bloomed .plant__bud { transform: scale(.2); opacity: 0; }
.plant__bloom i {
	position: absolute; left: -15px; top: -54px; width: 30px; height: 54px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--c) 78%, #000), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #fff));
	box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .3);
	transform-origin: 50% 100%; transform: rotate(var(--a)) scale(0); transition: transform .75s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--t);
}
.plant__bloom i:nth-child(1) { --a: 0deg; --t: .4s; } .plant__bloom i:nth-child(2) { --a: 60deg; --t: .48s; } .plant__bloom i:nth-child(3) { --a: 120deg; --t: .56s; }
.plant__bloom i:nth-child(4) { --a: 180deg; --t: .64s; } .plant__bloom i:nth-child(5) { --a: 240deg; --t: .72s; } .plant__bloom i:nth-child(6) { --a: 300deg; --t: .8s; }
.plant__bloom 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: inset 0 -3px 6px rgba(0, 0, 0, .15); transform: scale(0); transition: transform .5s .9s cubic-bezier(.34, 1.56, .64, 1); }
.faq-item--dark .plant__bloom b { background: radial-gradient(circle at 40% 35%, #ffb27a, #ff7b05 55%, #d96300); }
.faq-item.is-bloomed .plant__bloom i { transform: rotate(var(--a)) scale(1); }
.faq-item.is-bloomed .plant__bloom b { transform: scale(1); }
/* the watering can of the site, scaled down: it comes in from the right and pours (the frames of its sprite) */
.plant__can {
	position: absolute; z-index: 4; left: 50%; top: 52px; width: 138px; height: 148px; margin-left: -30px;
	background: url('../images/water-can.png') no-repeat 0 0 / 1242px 148px; clip-path: inset(40px 0 0 0);
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)) saturate(1.1);
	opacity: 0; transform: translate(60px, -40px) rotate(8deg); transition: opacity .35s, transform .5s cubic-bezier(.34, 1.3, .64, 1); pointer-events: none;
}
.faq-item.is-watering .plant__can { opacity: 1; transform: none; animation: can-pour 1.1s steps(4, end) .35s both; }
.faq--flowers .faq-item.is-open .plant { pointer-events: none; }
.faq--flowers .faq-card { top: auto; bottom: 124px; transform-origin: 50% 100%; transform: scale(.1) translateY(-30px); }
.faq--flowers .faq-item.is-open .faq-card { transition-delay: 0s, 0s, 0s; }

@keyframes can-pour { from { background-position: 0 0; } to { background-position: -552px 0; } }
@keyframes flower-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ========== 3. Drops of water ========== */
.faq--drops .faq-field { padding-top: 30px; }
.drop { position: relative; display: block; width: 100%; height: 390px; padding: 0; border: 0; background: none; cursor: pointer; }
/* every drop hangs from its own little cloud */
.drop__cloud {
	position: absolute; left: 50%; top: -24px; width: 196px; height: 80px; margin-left: -98px; pointer-events: none;
	background:
		radial-gradient(circle at 18% 68%, #fff 30px, transparent 31px),
		radial-gradient(circle at 42% 46%, #fff 40px, transparent 41px),
		radial-gradient(circle at 67% 56%, #fff 35px, transparent 36px),
		radial-gradient(circle at 86% 72%, #fff 25px, transparent 26px),
		linear-gradient(#fff, #fff) 22px 100% / calc(100% - 44px) 32px no-repeat;
	filter: drop-shadow(0 8px 12px rgba(0, 30, 70, .14));
	animation: cloud-drift 9s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
.drop__body {
	position: absolute; left: 50%; top: 46px; width: 150px; height: 180px; margin-left: -75px;
	border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
	background:
		radial-gradient(ellipse at 34% 28%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 42%),
		linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000));
	box-shadow: inset -10px -14px 24px rgba(0, 0, 0, .18), 0 20px 30px -18px rgba(0, 30, 70, .5);
	transform-origin: 50% 0; animation: drop-wobble 3.6s ease-in-out infinite; animation-delay: var(--d, 0s);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
/* the point where it hangs from the cloud */
.drop__body::before { content: ''; position: absolute; left: 50%; top: -20px; width: 44px; height: 44px; margin-left: -22px; border-radius: 0 50% 50% 50%; background: color-mix(in srgb, var(--c) 72%, #fff); transform: rotate(45deg); z-index: -1; }
.drop:hover .drop__body { transform: translateY(6px) scale(1.03); animation-play-state: paused; }
.drop__q { position: absolute; inset: 26px 18px 30px; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 13.5px/1.35 'Open Sans', sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 40, 90, .35); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.puddle { position: absolute; left: 50%; bottom: 0; width: 170px; height: 30px; margin-left: -85px; border-radius: 50%; background: radial-gradient(ellipse, rgba(82, 170, 232, .42), rgba(82, 170, 232, .16) 62%, rgba(82, 170, 232, 0) 72%); transition: transform .4s; }
.faq-item.is-open .puddle { transform: scale(1.25); }
/* the fall: it stretches, lands, flattens, splashes */
.faq--drops .faq-item.is-open .drop { pointer-events: none; }
.faq--drops .faq-item.is-open .drop__body { animation: drop-fall .62s cubic-bezier(.5, 0, .9, .4) forwards; }
.splash { position: absolute; left: 50%; bottom: 12px; width: 0; height: 0; pointer-events: none; }
.splash i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); opacity: 0; transform: rotate(var(--a)); }
.splash i:nth-child(1) { --a: -80deg; } .splash i:nth-child(2) { --a: -50deg; } .splash i:nth-child(3) { --a: -20deg; }
.splash i:nth-child(4) { --a: 20deg; } .splash i:nth-child(5) { --a: 50deg; } .splash i:nth-child(6) { --a: 80deg; }
.splash b { position: absolute; left: -20px; top: -8px; width: 40px; height: 16px; border-radius: 50%; border: 3px solid rgba(82, 170, 232, .7); opacity: 0; }
.faq--drops .faq-item.is-open .splash i { animation: splash-drop .7s .5s cubic-bezier(.2, .7, .3, 1) forwards; }
.faq--drops .faq-item.is-open .splash b { animation: splash-ring .8s .5s ease-out forwards; }
.faq--drops .faq-item.is-back .drop__body { animation: drop-form 1s cubic-bezier(.34, 1.3, .64, 1) both, drop-wobble 3.6s ease-in-out 1s infinite; }
.faq--drops .faq-card { top: auto; bottom: 8px; transform-origin: 50% 100%; transform: scale(.1) translateY(-10px); }
.faq--drops .faq-item.is-open .faq-card { transition-delay: .5s, .5s, 0s; }

@keyframes cloud-drift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes drop-wobble { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.03, .97); } 60% { transform: scale(.97, 1.04); } }
@keyframes drop-fall {
	0% { transform: translateY(0) scale(1, 1); opacity: 1; }
	25% { transform: translateY(16px) scale(.9, 1.15); opacity: 1; }
	80% { transform: translateY(150px) scale(.9, 1.1); opacity: 1; }
	100% { transform: translateY(164px) scale(1.5, .3); opacity: 0; }
}
@keyframes drop-form { 0% { transform: translateY(-30px) scale(.1, .2); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0) scale(1, 1); opacity: 1; } }
@keyframes splash-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(.4); } }
@keyframes splash-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(4, 3); } }

/* ---------- Narrower screens ---------- */
@media only screen and (max-width: 1280px) {
	.faq-item { width: 172px; }
	.balloon__body { width: 150px; height: 184px; margin-left: -75px; }
	.balloon__q { font-size: 16.5px; }
	.balloon__knot { top: 178px; } .balloon__string { top: 190px; } .burst { top: 92px; }
	.plant__pot { width: 166px; margin-left: -83px; }
	.plant__label { left: 20px; right: 20px; }
	.plant__label span { font-size: 12px; }
	.drop__cloud { width: 172px; margin-left: -86px; }
	.drop__body { width: 140px; height: 170px; margin-left: -70px; }
	.drop__q { font-size: 13px; }
}
@media only screen and (max-width: 1110px) {
	.faq-field { max-width: 620px; margin: 0 auto; }
	.faq-item { width: 196px; }
	.drop__cloud { width: 196px; margin-left: -98px; }
}
@media only screen and (max-width: 768px) {
	.faq { padding-top: 50px; }
	.faq-field { gap: 0 4px; }
	.faq-item { width: 46%; max-width: 190px; }
	.faq-item:nth-of-type(2n) .faq-item__stage { margin-top: 30px; }
	.balloon, .faq-item:nth-of-type(2n) .balloon, .faq-item:nth-of-type(3n) .balloon { height: 300px; }
	.balloon__body { width: 148px; height: 182px; margin-left: -74px; padding: 18px 14px 22px; }
	.balloon__q { font-size: 16px; -webkit-line-clamp: 6; }
	.balloon__knot { top: 176px; } .balloon__string { top: 188px; } .burst { top: 92px; }
	.plant { height: 380px; }
	.plant__pot { width: 160px; height: 112px; margin-left: -80px; }
	.plant__label { left: 20px; right: 20px; top: 36px; }
	.plant__label span { font-size: 12px; }
	.plant__stem { bottom: 100px; height: 80px; }
	.faq-item.is-bloomed .plant__stem { height: 150px; }
	.plant__can { top: 40px; margin-left: -34px; }
	.faq--drops .faq-field { padding-top: 30px; }
	.drop { height: 340px; }
	.drop__cloud { width: 176px; margin-left: -88px; }
	.drop__body { width: 140px; height: 168px; margin-left: -70px; }
	.drop__q { font-size: 13px; -webkit-line-clamp: 6; }
	/* the answer comes up over the page */
	.faq-card, .faq--flowers .faq-card, .faq--drops .faq-card { position: fixed; left: 12px; right: 12px; top: 50%; bottom: auto; width: auto; margin: 0; max-height: 80vh; overflow: auto; transform: translateY(-50%) scale(.2); transform-origin: 50% 50%; }
	.faq-item.is-open .faq-card, .faq--flowers .faq-item.is-open .faq-card, .faq--drops .faq-item.is-open .faq-card { transform: translateY(-50%); }
	/* (the first and the last item have their card pushed to a side on a wide screen: not here) */
	.faq-item:first-of-type .faq-card, .faq-item:last-of-type .faq-card { left: 12px; right: 12px; margin: 0; }
	/* the elephant stands above the section: under the veil while an answer is open */
	.faq.has-open + .elephant-ladder { z-index: 1; }
	.faq.has-open .faq-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
	.faq-card h4 { font-size: 22px; }
	.faq-card__text { font-size: 14px; -webkit-line-clamp: 12; }
}
@media (prefers-reduced-motion: reduce) {
	.faq-item__float, .balloon__string, .balloon__body::after, .faq-item.is-back .balloon__body, .drop__body, .drop__cloud, .plant__head { animation: none !important; }
	/* the turns: a quiet fade, no flight, no breaths; the tree stands still */
	.faq--balloons .faq-item.is-leaving .faq-item__stage { animation: calm-out .45s ease forwards; }
	.faq--balloons .faq-item.is-arriving .balloon__body, .faq--balloons .faq-item.is-arriving .balloon__q { animation: calm-in .6s ease both; }
	.faq--balloons .faq-item.is-arriving .burst::before { animation: none; }
	.faq-tree__crown, .faq-tree__leaves circle, .faq-nav__btn svg { animation: none !important; }
	.faq--balloons .faq-item { opacity: 1; transform: none; animation: none !important; }
	.faq-card, .plant__stem, .plant__leaf, .plant__bloom i, .plant__bloom b { transition: none; }
}
@keyframes calm-out { to { opacity: 0; } }
@keyframes calm-in { from { opacity: 0; } to { opacity: 1; } }