/* -----------------------------------------------------------------
   Animated food illustrations for the Refreshments page.
   Original artwork: the shapes are inline SVG <symbol>s defined at
   the top of refreshments.html and referenced here by <use>.
   Everything in this file is decorative (aria-hidden) and never
   intercepts clicks.
   ----------------------------------------------------------------- */

/* The sprite itself is markup-only and must not take up space. */
.fd-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.fd { display: block; }

/* --- Garnish strip: one centred row of icons under the copy ------ */
.food-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 16px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.food-strip li {
	margin: 0;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}
.food-strip .fd { width: 42px; height: 42px; }

/* --- Motion ------------------------------------------------------ */
@keyframes fd-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-7px); }
}
@keyframes fd-sway {
	0%, 100% { transform: rotate(-7deg); }
	50%      { transform: rotate(7deg); }
}
@keyframes fd-pop {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.13); }
}
@keyframes fd-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	33%      { transform: translate(3px, -7px) rotate(6deg); }
	66%      { transform: translate(-3px, -3px) rotate(-6deg); }
}

.fd-anim-bob   { animation: fd-bob   3.2s ease-in-out infinite; }
.fd-anim-sway  { animation: fd-sway  4.1s ease-in-out infinite; transform-origin: 50% 85%; }
.fd-anim-pop   { animation: fd-pop   2.8s ease-in-out infinite; }
.fd-anim-drift { animation: fd-drift 6.0s ease-in-out infinite; }

/* Staggered starts so the row ripples instead of pulsing in unison. */
.fd-d1 { animation-delay: -.15s; }
.fd-d2 { animation-delay: -.55s; }
.fd-d3 { animation-delay: -.95s; }
.fd-d4 { animation-delay: -1.35s; }
.fd-d5 { animation-delay: -1.75s; }
.fd-d6 { animation-delay: -2.15s; }
.fd-d7 { animation-delay: -2.55s; }

@media (prefers-reduced-motion: reduce) {
	.fd { animation: none !important; }
}

@media screen and (max-width: 640px) {
	.food-strip { gap: 11px; }
	.food-strip .fd { width: 33px; height: 33px; }
}