/*
 * The flowering vine in the footer's bottom-left corner (the platform's own – not copied from
 * WordPress). It sits behind the footer's text, fades into the espresso background towards the
 * middle, and the flowers glow softly. Its own element (patterns.ts footer()), not .q-footer::before: the
 * season decorations (diyas, holly, pumpkins…) draw there and above the footer, so it must not clip.
 */
.q-footer { position: relative; isolation: isolate; }
.q-footer > .q-footer-art {
	display: block;
	position: absolute;
	margin: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: clamp(150px, 17vw, 230px);
	aspect-ratio: 188 / 161;
	background: url("/theme/images/footer-flowers.png") left bottom / contain no-repeat;
	pointer-events: none;
	opacity: .9;
	/* Dissolve the top and right edges into the background. */
	-webkit-mask-image: radial-gradient(130% 130% at 0 100%, #000 58%, transparent 100%);
	mask-image: radial-gradient(130% 130% at 0 100%, #000 58%, transparent 100%);
	filter: drop-shadow(0 0 3px rgb(96 146 235 / .55)) drop-shadow(0 0 10px rgb(96 146 235 / .3)) drop-shadow(0 0 18px rgb(233 199 127 / .12));
	animation: q-flower-glow 5s ease-in-out infinite alternate;
}
@keyframes q-flower-glow {
	from { filter: drop-shadow(0 0 2px rgb(96 146 235 / .45)) drop-shadow(0 0 8px rgb(96 146 235 / .22)) drop-shadow(0 0 16px rgb(233 199 127 / .1)); }
	to { filter: drop-shadow(0 0 4px rgb(110 160 245 / .7)) drop-shadow(0 0 14px rgb(96 146 235 / .38)) drop-shadow(0 0 24px rgb(233 199 127 / .16)); }
}
/* The © and credit lines pass over the vine: a halo in the footer's own colour keeps them readable. */
.q-footer .has-x-small-font-size p { text-shadow: 0 0 3px var(--wp--preset--color--espresso), 0 0 8px var(--wp--preset--color--espresso), 0 0 14px var(--wp--preset--color--espresso); }
/* Phones: smaller and quieter, so the links and legal lines stay easy to read over it. */
@media (max-width: 781px) {
	.q-footer > .q-footer-art { width: 120px; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	.q-footer > .q-footer-art { animation: none; }
}