/* "Храна" as a meal (parts/food.php): a kitchen garden where beetroots come up and a bee flies round; every
   paragraph served as a dish – the card is put on the table, the plate turns in with its dish (Lottie) or a fork and
   a knife, the bold words get a marker; the closing words over the waving flags and a laid table. */

.meal { position: relative; padding: 10px 0 0; overflow: hidden; overflow: clip; display: flow-root; } /* clip: never scrolled sideways */
.bg .meal .meal__first, .bg .meal .meal__closing p { font-family: 'Neucha', Arial, sans-serif; }

/* ---------- The opening and the kitchen garden ---------- */
.meal__open { position: relative; display: flex; align-items: center; gap: 30px; padding: 40px 0 30px; }
.meal__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 .meal__lead { opacity: 1; transform: none; }
.meal__lead p { margin: 0 0 14px; font-size: 17px; line-height: 1.75; color: #3c4741; }
.meal__lead p:last-child { margin-bottom: 0; }
/* the first words in the blue of the site (not red, as the client asked) */
.meal .meal__first { margin-bottom: 18px; font: 400 29px/1.35 'Cabin Sketch', Arial, sans-serif; color: #2b8bd3; }
.meal__garden { flex: none; position: relative; width: 420px; height: 300px; }
.meal__soil { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 50% 50% 20px 20px / 44px 44px 20px 20px; background: #7a5e58 url('../images/background-soil.svg') repeat center top; box-shadow: inset 0 7px 0 rgba(255, 255, 255, .1), 0 18px 26px -18px rgba(60, 40, 20, .6); }
/* the beetroots wait under the soil and come up one by one, half of them stays in the ground
   (cut off at the foot of the bed, so nothing of them shows under it while they wait) */
.meal__beets { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 34px; display: flex; justify-content: space-around; align-items: flex-end; clip-path: inset(-300px -60px -34px -60px); }
.meal__beet { width: 118px; height: 118px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(130px); transition: transform 1.1s cubic-bezier(.34, 1.5, .64, 1); transition-delay: calc(.6s + var(--k) * .35s); }
.meal__beet:nth-child(2) { margin-bottom: 8px; }
.is-in .meal__beet { transform: none; }
.meal__beet.is-pop { animation: meal-pop .9s cubic-bezier(.3, .7, .4, 1); }
.meal__beet > span, .meal__bee, .dish__food, .meal__set-food { display: block; }
.meal__beet > span { width: 100%; height: 100%; transform-origin: 50% 90%; animation: meal-wiggle 2.6s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.8s); }
@keyframes meal-pop { 0% { transform: none; } 35% { transform: translateY(-90px) rotate(-12deg); } 55% { transform: translateY(-96px) rotate(10deg); } 100% { transform: none; } }
@keyframes meal-wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.meal__worm { position: absolute; z-index: 3; width: 60px; height: 27px; background: url('../images/worm-2.svg') no-repeat center / contain; transform-origin: 30% 100%; animation: meal-peek 2.4s ease-in-out infinite alternate; }
.meal__worm--a { left: 14%; top: 34px; }
.meal__worm--b { right: 12%; top: 50px; width: 48px; height: 27px; background-image: url('../images/worm-3.svg'); transform: scaleX(-1); animation-name: meal-peek-r; animation-duration: 3s; }
@keyframes meal-peek { from { transform: rotate(-8deg); } to { transform: rotate(10deg) translateY(-4px); } }
@keyframes meal-peek-r { from { transform: scaleX(-1) rotate(-6deg); } to { transform: scaleX(-1) rotate(12deg) translateY(-3px); } }
/* the bee flies an oval round the beetroots (in front of them on one half, behind on the other) */
.meal__bee-orbit { position: absolute; z-index: 1; left: 50%; top: 110px; width: 0; height: 0; }
.meal__bee { position: absolute; left: 0; top: 0; width: 76px; height: 76px; offset-path: path('M -160 0 A 160 56 0 1 1 160 0 A 160 56 0 1 1 -160 0'); offset-anchor: center; offset-rotate: 0deg; animation: meal-orbit 7s linear infinite; }
@keyframes meal-orbit { 0% { offset-distance: 0%; transform: scaleX(-1); z-index: 0; } 49.9% { transform: scaleX(-1); z-index: 0; } 50% { transform: scaleX(1); z-index: 4; } 100% { offset-distance: 100%; transform: scaleX(1); z-index: 4; } }

/* ---------- The dishes ---------- */
.meal__dishes { padding: 50px 0 10px; }
.dish { position: relative; display: flex; align-items: center; width: 76%; margin: 0 0 50px; }
.dish.is-right { flex-direction: row-reverse; margin-left: auto; }
/* the plate: it turns in and lands beside the card, with its dish or a fork and a knife */
.dish__plate { flex: none; position: relative; z-index: 2; width: 150px; height: 150px; margin-right: -46px; border-radius: 50%; background: radial-gradient(circle, #fff 0 52%, #efe8e0 53% 57%, #fff 58% 70%, color-mix(in srgb, var(--c) 30%, #fff) 71% 100%); box-shadow: 0 16px 26px -14px rgba(60, 40, 20, .55); opacity: 0; transform: rotate(-220deg) scale(.3); }
.is-right .dish__plate { margin: 0 0 0 -46px; }
.dish.is-in .dish__plate { animation: meal-plate 1.1s cubic-bezier(.34, 1.3, .64, 1) .35s forwards; }
@keyframes meal-plate { to { opacity: 1; transform: none; } }
.dish__food { position: absolute; inset: 16px; }
.dish__fork, .dish__knife { position: absolute; top: 33px; width: 16px; height: 84px; }
.dish__fork { left: 42px; transform: rotate(-14deg); }
.dish__knife { right: 42px; transform: rotate(14deg); }
.dish__fork::before { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 22px; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(90deg, #b3bac2 0 3px, transparent 3px 6.5px); }
.dish__fork::after { content: ''; position: absolute; left: 0; top: 20px; width: 16px; height: 64px; background: linear-gradient(90deg, #a9b0b9, #dfe3e7 50%, #a9b0b9); clip-path: polygon(0 0, 100% 0, 100% 10%, 68% 26%, 68% 100%, 32% 100%, 32% 26%, 0 10%); border-radius: 0 0 5px 5px; }
.dish__knife::before { content: ''; position: absolute; left: 2px; top: 0; width: 12px; height: 44px; border-radius: 10px 2px 1px 1px; background: linear-gradient(90deg, #c3c9d0, #f0f2f4); }
.dish__knife::after { content: ''; position: absolute; left: 3px; top: 42px; width: 10px; height: 42px; border-radius: 5px; background: linear-gradient(90deg, #a9b0b9, #dfe3e7 50%, #a9b0b9); }
/* the card is put on the table: it slides in from its side and settles */
.dish__text { flex: 1; min-width: 0; padding: 30px 36px 30px 70px; border-radius: 28px; background: #fff; box-shadow: 0 20px 36px -24px rgba(60, 40, 20, .55); border-bottom: 5px solid var(--c); opacity: 0; transform: translateX(-70px) rotate(-2.5deg); }
.is-right .dish__text { padding: 30px 70px 30px 36px; transform: translateX(70px) rotate(2.5deg); }
.dish.is-in .dish__text { animation: meal-serve 1s cubic-bezier(.34, 1.25, .64, 1) forwards; }
@keyframes meal-serve { 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.dish__text p { margin: 0; font-size: 17px; line-height: 1.75; color: #3c4741; }
/* the editor's bold words: a marker in the dish's colour runs under them */
.dish__text strong { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) 38%, transparent) 58%, color-mix(in srgb, var(--c) 38%, transparent) 94%, transparent 94%) no-repeat 0 0 / 0 100%; transition: background-size 1s cubic-bezier(.4, 0, .2, 1) 1.1s; }
.dish.is-in .dish__text strong { background-size: 100% 100%; }

/* ---------- The end: the closing words and the laid table ---------- */
.meal__end { position: relative; padding: 100px 0 0; }
.meal__flags { position: absolute; left: -2%; top: 14px; width: 104%; height: 66px; background: url('../images/flags.svg') no-repeat center top / 100% 100%; transform-origin: top center; animation: meal-flag 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes meal-flag { from { transform: rotateX(30deg); } to { transform: rotateX(-30deg); } }
.meal__closing { max-width: 920px; text-align: center; opacity: 0; transform: scale(.85); transition: opacity .6s, transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.meal__end.is-in .meal__closing { opacity: 1; transform: none; }
.meal .meal__closing p { margin: 0; font: 400 32px/1.35 'Cabin Sketch', Arial, sans-serif; color: #8763be; }
/* a tablecloth in the site's red; the dishes are put on it one after another and bob a little */
.meal__table { position: relative; display: flex; justify-content: center; gap: clamp(8px, 3vw, 48px); height: 210px; margin-top: 110px; background: repeating-linear-gradient(90deg, rgba(255, 87, 54, .5) 0 24px, transparent 24px 48px), repeating-linear-gradient(0deg, rgba(255, 87, 54, .5) 0 24px, transparent 24px 48px), #fff; box-shadow: inset 0 10px 0 rgba(255, 255, 255, .5); }
.meal__set { position: relative; flex: none; width: 150px; height: 150px; margin: -78px 0 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(-90px); }
.meal__end.is-in .meal__set { animation: meal-drop .8s cubic-bezier(.34, 1.4, .64, 1) forwards, meal-bob 2.4s ease-in-out infinite alternate; animation-delay: calc(.9s + var(--k) * .2s), calc(1.9s + var(--k) * .3s); }
.meal__set.is-pop .meal__set-food { animation: meal-jump .7s cubic-bezier(.3, .7, .4, 1); }
@keyframes meal-drop { to { opacity: 1; transform: none; } }
@keyframes meal-bob { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateY(-6px); } }
@keyframes meal-jump { 0% { transform: none; } 40% { transform: translateY(-50px) rotate(-8deg); } 70% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
.meal__set-plate { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 42px; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 52%, #e9e2da 54% 60%, #fff 62%); box-shadow: 0 9px 12px -6px rgba(80, 30, 20, .35); }
.meal__set-food { position: absolute; left: 12px; right: 12px; bottom: 16px; height: 122px; }
/* the glass and the fish stand on the cloth by themselves (the fish has its own plate) */
.meal__set--glass .meal__set-plate, .meal__set--fish .meal__set-plate { display: none; }
.meal__set--glass .meal__set-food, .meal__set--fish .meal__set-food { bottom: 2px; }

/* ---------- The pictures of the plates (parts/food-icons.php) and their little movements ---------- */
.fi { display: block; width: 100%; height: 100%; overflow: visible; }
/* (only the moving parts: a transform-origin would shift the drawings' own rotate(a x y)) */
:where(.fi [class*="fi-"], .fi-confetti > *) { transform-box: fill-box; transform-origin: center; }
.is-in .fi-steam path { animation: fi-steam 2.6s ease-in-out infinite; }
.fi-steam path { opacity: 0; }
.fi-steam path:nth-child(2) { animation-delay: .8s; }
.fi-steam path:nth-child(3) { animation-delay: 1.6s; }
@keyframes fi-steam { 0% { opacity: 0; transform: translateY(8px); } 35% { opacity: .95; } 100% { opacity: 0; transform: translateY(-12px); } }
.fi-toss { transform-origin: 50% 100%; }
.is-in .fi-toss { animation: fi-toss 2.4s ease-in-out infinite alternate; }
@keyframes fi-toss { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-3px); } }
.is-in .fi-wave { animation: fi-wave 1.3s linear infinite; }
@keyframes fi-wave { to { transform: translateX(-12px); } }
.fi-bubble { opacity: 0; }
.is-in .fi-bubble { animation: fi-bubble 2.4s ease-in infinite; }
.fi-bubble:nth-of-type(2) { animation-delay: .7s; }
.fi-bubble:nth-of-type(3) { animation-delay: 1.4s; }
.fi-bubble:nth-of-type(4) { animation-delay: 1.9s; }
@keyframes fi-bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
.fi--washing .fi-bubble { animation-name: fi-soap; animation-timing-function: ease-out; }
@keyframes fi-soap { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: translateY(-14px) scale(1.05); } 100% { opacity: 0; transform: translateY(-18px) scale(1.2); } }
.is-in .fi-spin { animation: fi-spin 9s linear infinite; }
.is-in .fi-spin-slow { animation: fi-spin 16s linear infinite; }
@keyframes fi-spin { to { transform: rotate(360deg); } }
.fi-leaf { transform-origin: 0% 100%; }
.fi--carrot .fi-leaf, .fi--basket .fi-leaf { transform-origin: 30% 100%; }
.is-in .fi-leaf { animation: fi-leaf 2.2s ease-in-out infinite alternate; }
@keyframes fi-leaf { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.fi-lines path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.is-in .fi-lines path { animation: fi-write .6s ease-out forwards; }
.is-in .fi-lines path:nth-child(2) { animation-delay: .5s; }
.is-in .fi-lines path:nth-child(3) { animation-delay: .9s; }
.is-in .fi-lines path:nth-child(4) { animation-delay: 1.3s; }
@keyframes fi-write { to { stroke-dashoffset: 0; } }
.is-in .fi-beat { animation: fi-beat 1.4s ease-in-out 1.8s infinite; }
@keyframes fi-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(1.05); } }
.fi-flutter { transform-origin: 50% 0; }
.is-in .fi-flutter { animation: fi-flutter 3s ease-in-out infinite alternate; }
@keyframes fi-flutter { from { transform: rotate(-3deg); } to { transform: rotate(2.5deg); } }
.is-in .fi-wiggle { animation: fi-wiggle 1.8s ease-in-out infinite alternate; }
@keyframes fi-wiggle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.fi-hop { transform-origin: 50% 100%; }
.is-in .fi-hop { animation: fi-hop 2.6s ease-in-out infinite; }
@keyframes fi-hop { 0%, 55%, 100% { transform: none; } 70% { transform: translateY(-6px) rotate(-3deg); } 85% { transform: scale(1.03, .97); } }
.fi-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .fi-tick { animation: fi-write .8s ease-out .9s forwards; }
.is-in .fi-scrub { animation: fi-scrub .7s ease-in-out infinite alternate; }
@keyframes fi-scrub { from { transform: translate(-7px, 4px); } to { transform: translate(5px, -3px); } }
.fi-coin { opacity: 0; }
.is-in .fi-coin { animation: fi-coin 2.4s ease-in infinite; }
@keyframes fi-coin { 0% { opacity: 0; transform: translateY(-16px); } 18% { opacity: 1; transform: translateY(-6px); } 55% { opacity: 1; transform: translateY(26px); } 62%, 100% { opacity: 0; transform: translateY(30px); } }
.fi-lid { transform-origin: 50% 100%; }
.is-in .fi-lid { animation: fi-lid 3.2s ease-in-out infinite; }
@keyframes fi-lid { 0%, 55%, 100% { transform: none; } 68% { transform: translateY(-12px) rotate(-7deg); } 80% { transform: translateY(-9px) rotate(5deg); } 90% { transform: translateY(-2px); } }
.fi-confetti > * { opacity: 0; }
.is-in .fi-confetti > * { animation: fi-confetti 3.2s ease-out infinite; }
.fi-confetti > :nth-child(2) { animation-delay: .1s; } .fi-confetti > :nth-child(3) { animation-delay: .2s; } .fi-confetti > :nth-child(4) { animation-delay: .15s; }
@keyframes fi-confetti { 0%, 62% { opacity: 0; transform: translateY(26px) scale(.4); } 72% { opacity: 1; transform: translateY(0) scale(1) rotate(90deg); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px) rotate(180deg); } }

/* ---------- Smaller screens ---------- */
@media only screen and (max-width: 1100px) {
	.meal__garden { width: 340px; height: 260px; }
	.meal__beet { width: 96px; height: 96px; }
	.dish { width: 88%; }
	.meal__set { width: 120px; height: 120px; margin-top: -60px; }
	.meal__set-food { height: 96px; }
}
@media only screen and (max-width: 768px) {
	.meal__open { flex-direction: column; align-items: stretch; padding-top: 24px; }
	.meal__lead { padding: 24px 22px; }
	.meal .meal__first { font-size: 24px; }
	.meal__garden { align-self: center; width: 320px; height: 240px; }
	.dish, .dish.is-right { flex-direction: column; width: auto; margin: 0 0 40px; }
	.dish__plate, .is-right .dish__plate { width: 120px; height: 120px; margin: 0 0 -40px; }
	.dish__fork, .dish__knife { top: 20px; transform: scale(.85) rotate(-14deg); } .dish__knife { transform: scale(.85) rotate(14deg); }
	.dish__fork { left: 30px; } .dish__knife { right: 30px; }
	.dish__text, .is-right .dish__text { padding: 50px 22px 24px; transform: translateY(40px); }
	.dish__text p { font-size: 16px; }
	.meal .meal__closing p { font-size: 25px; }
	.meal__flags { height: 44px; }
	.meal__table { gap: 2px; height: 150px; margin-top: 80px; }
	.meal__set { width: 70px; height: 70px; margin-top: -36px; }
	.meal__set-plate { height: 22px; bottom: 2px; }
	.meal__set-food { left: 4px; right: 4px; bottom: 8px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.meal *, .meal *::before, .meal *::after { animation: none !important; transition: none !important; }
	.meal__lead, .meal__beet, .dish__plate, .dish__text, .meal__closing, .meal__set { opacity: 1 !important; transform: none !important; }
	.dish__text strong { background-size: 100% 100% !important; }
	.meal__bee-orbit { display: none; }
	.fi-lines path, .fi-tick { stroke-dashoffset: 0 !important; }
	.fi-bubble, .fi-coin, .fi-confetti > * { opacity: 0 !important; }
	.fi-steam path { opacity: .8 !important; }
}